Docs

[intveld]

Hi guys,

The links on my dev site are blue, without underlining. But I would like to change the color of links only in my top footer into white, also without underlining. I tried to do this with a style in the widget areas, but that also changed the colour of my ‘normal’ links in white (so unreadable).

I hope you can give me a clue how to do this.

Thanks,
Ton

[intveld]

This reply has been marked as private.

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

footer.x-colophon.top div#text-2 a {
    color: #fff !important;
    text-decoration: none !important;
}

footer.x-colophon.top div#wysiwyg_widgets_widget-2 a {
    color: #fff !important;
}

Thanks.

[intveld]

Great Prasant,

That works great. Do you also have some code to get the normal text white in the footer widgets?
Many thanks.

Ton

[Paul R]

Hi Ton,

You can add this under Custom > Edit Global CSS in the Customizer.

footer.x-colophon.top .widget,
footer.x-colophon.top .widget a {
    color: #fff;
}

Hope that helps

[intveld]

That worked indeed!

I have now:

footer.x-colophon.top div#text-2 a {
color: #fff !important;
text-decoration: none !important;
}

footer.x-colophon.top div#wysiwyg_widgets_widget-2 a {
color: #fff !important;

}footer.x-colophon.top .widget,
footer.x-colophon.top .widget a {
color: #fff;
}

But as you can see on the attachment: the links in widget area Footer 2 is still underlined, while in Footer 1 it’s ok now.

Maybe a last change? 🙂

Thanks again Ton

[intveld]

#SOLVED

Sorry. But I could do that change myself.

I’m very thankful for your patience and helpfulness.

Thanks again.
Ton

[Joao]

Glad to hear it Ton and thanks for letting us know.

Cheers

[intveld]

Dear guys,

Sorry to bother you again with an additional question. For the footer I have this code now:

.x-colophon.top {
background: black;
}
.x-colophon.bottom {
background: black;
}
footer.x-colophon.top div#text-2 a {
color: white !important;
text-decoration: none !important;
}
footer.x-colophon.top div#wysiwyg_widgets_widget-2 a {
color: white !important;
text-decoration: none !important;
}
footer.x-colophon.top .widget,
footer.x-colophon.top .widget a {
color: white !important;
text-decoration: none !important;
}
footer.x-colophon.top a span:hover, footer.x-colophon.top a:hover {
color: grey !important;
opacity: 1 !important;
}

The problem is that I managed to add a hover effect in Footer 2, but cannot put that hover effect in Footer 1, whatever I do. It’s the column with ‘Over happyskirtt’ (see attachment).

Could you help me with this?
Thanks
Ton

[Joao]

Hi There,

Please try:

footer.x-colophon.top div#text-2 a:hover {
    color: grey!important;
}

Hope it helps

Joao

[intveld]

You are great guys!
Many thanks

Ton

[Paul R]

You’re welcome! 🙂

[Author]

Posts