[iDigitaliseParticipant]

Hi

I am working on a staging site for a client and trying to change the color of the font for the footer (top and bottom). Reading through a lot of the forums I managed to get the below CSS but this still doesn’t change the color of the font!

————————————————————
.x-logobar {
background: white;
background-color: white;
}
.x-topbar .p-info{
color: white;
}

.single-post .entry-featured {
display:none;
}

/* Footer Style */

.x-colophon.top {
background-color: #666666;
padding-top: 20px;
padding-bottom: 20px;
}

.x-colophon.bottom {
background-color: #222222;
}

.x-colophon.bottom,
.x-colophon.bottom .x-colophon-content a { /* content links */
color:#FFFFFF; }

.x-colophon.bottom {
padding-top: 5px;
padding-bottom: 5px;
}
————————————————————

I want to Make the entire font in the footer in White and Bold so it’s readable on the dark background.

Thanks

[Rue NelModerator]

Hello There,

Thanks for writing in!

To make the entire font in the footer in White and Bold so it’s readable on the dark background, please update this block of code:

.x-colophon.bottom,
.x-colophon.bottom .x-colophon-content a { 
  /* content links */
  color:#FFFFFF !important;
  font-weight: bold !important; 
}

Hope this helps. Kindly let us know.

[iDigitaliseParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Could you please provide your wp-admin credentials so we can have a better look and create a tailored solution?

Make sure to mark the reply as privte.

Thanks,

Joao

[iDigitaliseParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

I have updated the code to:

.x-colophon.top,
.x-colophon.top .widget,
.x-colophon.top a,
.x-colophon.bottom,
.x-colophon.bottom .x-colophon-content a { 
  /* content links */
  color:#FFFFFF !important;
  font-weight: bold !important; 
}

Hope this helps.

[iDigitaliseParticipant]

Thx! That’s good.

Is it possible to add a hover effect so the color change to Red on hover.

Thx

[NicoModerator]

Hi There,

Add this in your custom CSS to add hover effect:

.x-colophon.top a:hover, .x-colophon-content a{
color:red;
}

Hope it helps.

Let us know how it goes.

Thanks.

[iDigitaliseParticipant]

Hey.. I have added this to the end of my CSS but no luck.

[JoaoModerator]

Hi There,

Please change the code provided above by Nico for this one:

.x-colophon.top a:hover, .x-colophon-content a {
color:red !important;

}

Hope that helps,

Joao

[iDigitaliseParticipant]

Great! That Works! 🙂

Thx

[JadeModerator]

You’re most welcome.

[Author]

Posts