Docs

[nillamary]

Hi
I’ve tried several variations of the following code but it’s not working. I’d like to change the hover cololur of my social icons in my footer:
.x-colophon.x-social-global a {
color:#ccc;
}
.x-colophon. x-social .facebook a:hover {
color:#3b5998;
}
.x-colophon .x-social .x-twitter a:hover {
color:#55acee;
}
.x-colophon .x-social .x-google-plus a:hover [
color: #dd4b39;
]

Many thanks

[Darshana]

Hi there,

Thanks for writing in! Please follow this examples below and add it into your Customizer, Custom > CSS area.

.x-colophon.bottom .x-social-global .facebook:hover {
    color: #ff0000;
}

.x-colophon.bottom .x-social-global .twitter:hover {
    color: #ff0000;
}

.x-colophon.bottom .x-social-global .google-plus:hover {
    color: #ff0000;
}

Hope that helps.

[nillamary]

Thanks that worked. Although, I’d like to change the font colour to the same as the rest of my footer font, do I use:
.x-colophon.bottom x-social-global a {
color:#ccc;
}

[Prasant Rai]

Hello There,

Thanks for writing in!

Please use following code instead:

.x-colophon.bottom .x-social-global a{
    color: #ccc !important;
}

Thanks.

[nillamary]

I tried !important but this didn’t work.
I’m not sure if there’s something else in my CSS that’s stopping the lighter colour and displaying the darker grey still.

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[nillamary]

This reply has been marked as private.

[Friech]

Hi There,

Add this css code instead.

footer .x-social-global a {
	color: #ccc;
}

#ccc is the color of the text on your footer.

Make sure to clear your browser’s cache when previewing the page.

Cheers!

[nillamary]

I worked out the problem. My Comment code just before the CSS was messing it up (had // and // instead of /**/). The !important then did an over ride on my colours, so I removed that and it all worked perfectly!

Thanks anyway!

[Rupok]

Glad that you are all set now. Have a nice day!

[nillamary]

I’ve removed my “Contact” link at right of my Footer but would now like to have my social icons aligned right and tried the following codes that’s not working:

.x-colophon.bottom .x-social-global .inline-images {
text-align: right;
}

Also tried the following:
.x-colophon.top .x-container .x-column img {float: none !important;}
.x-colophon.top .x-container .x-column {text-align: right;}

.x-colophon .inline-images img {
display: inline-block;
left: auto;
right: auto;
}

[Jade]

Hi there,

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

@media (min-width: 979px) {
    .x-colophon.bottom .x-social-global {
        left: 70%;
    }
}

Hope this helps.

[nillamary]

Thanks Jade, worked a treat!

[Rad]

You’re welcome!

[nillamary]

Hi again,
Just noticed that although my social icons display the correct colour on the Home page, they display the default colour on my other pages.

Will the !important in the following code that Prasant Ras gave me early in this thread, fix the colour throughout my website?

.x-colophon.bottom .x-social-global a{
color: #ccc !important;
}

[Author]

Posts