Footer Text Color and Content

Support
#1

Hello,

I’ve added content to my footer OK but the text is white on a white background, how do I change the colour?

There’s also a piece of text that says ‘Assign Menu’ that I can’t see where to remove and there’s social button that only show up when I hover the mouse over them. How do I fix all this please? Thanks.

#2

HI David,

Please add this code in X > Theme Options > CSS:

.x-colophon.bottom .x-colophon-content p {
    color: #ccc;
}

.x-colophon.bottom .x-colophon-content p a,
.x-colophon.bottom .x-social-global a {
    color: #000;
}

Then to remove the 'Assign Menu' text, please go to X > Theme Options > Footer > Footer Menu then disable it.

Hope this helps.

#3

Thanks,

This took care of the social buttons and the assign a menu link but the text still remains white

#4

Hi there,

Please update this code:

.x-colophon.bottom .x-colophon-content p {
    color: #ccc;
}

to

.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-colophon-content p {
    color: #ccc;
}

Feel free to change the color value in the code.

Hope this helps.

#5

Right, so I fixed the text colour but lost the social buttons again.

Please give me the code for the social buttons and the code for the text colour separately so I know which one’s which, thanks.

Can you also tell me how to make the footer text not be all in caps please? Thanks.

#7

Hi David,

To target footer content and to remove the capitalization, please use the following CSS rules and change the color accordingly.

footer.x-colophon.bottom .x-colophon-content {
    color: red;
    text-transform: none;
}

To target your social media icons, please use the following CSS rules and change your respective icon colors and hover colors accordingly.

footer.x-colophon.bottom .x-social-global .facebook {
    color: green;
}
footer.x-colophon.bottom .x-social-global .twitter {
    color: green;
}
footer.x-colophon.bottom .x-social-global .google-plus {
    color: green;
}
footer.x-colophon.bottom .x-social-global .facebook:hover {
    color: blue;
}
footer.x-colophon.bottom .x-social-global .twitter:hover {
    color: blue;
}
footer.x-colophon.bottom .x-social-global .google-plus:hover {
    color: blue;
}

Hope that helps.

#8

That got it. Thanks so much for your support.

#9

You’re welcome! :slight_smile:

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.