Footer/Widget Text Colour

Support
#1

Hi

I’m trying to change the colour of the font in the footer and in widgets, but there are no options in X theme or in the widget section. Can anyone help?

Thanks

#2

Hello @slowbear,

Thanks for writing in!

Please use following CSS under X > Theme Options > CSS:

footer.x-colophon .textwidget {
    color: #ddd;
}

footer.x-colophon.bottom a {
    color: #ddd;
}

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

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Thanks Prasant

Do you also know how I would change the icons for the widgets, and their colour?

Thanks

#4

Hi @slowbear,

To change the color of the widget icons, please use this code:

.widget .h-widget:before {
    opacity: 1;
    color: #fff;
}

As for changing the icons, it is possible through custom CSS depending which icon you want to use. Please refer to the fontawesome icons for the code you need to use. For example, you want to use the bars icon, please update the CSS code to:

.widget .h-widget:before {
    content: '\f0c9';
    opacity: 1;
    color: #fff;
}

https://fontawesome.com/icons/bars?style=solid

You need to change f0c9 to the icon’s Unicode value:

Hope this helps.

#5

.widget .h-widget:before {
opacity: 1;
color: #fff;
}

Didn’t seem to work?

Also, do you know how I can remove the lines above the widgets?

And is there anyway to remove the underline from footer nav?

#6

Hi @slowbear,

I have just checked your site and you have this code in the style.css of the child theme which overrides the code previously suggested:

.widget .h-widget:before, .widget .h-widget:after {
    color: #124475!important;
    opacity: 0.7!important;
}

Kindly find the code in the style.css file of the child theme and change the values there instead.

To remove the underline from the footer navigation, please find this code added to the Global CSS:

.x-colophon.bottom .x-nav li a {
    color: #7C90A4;
}

then update it to:

.x-colophon.bottom .x-nav li a {
    color: #7C90A4;
    text-decoration: none;
}

Hope this helps.

#7

Hi Jade

Still no joy with the widget icon colour.

Also, do you know how I would remove the line above each widget? Image is in previous post.

Thanks

#8

Hi @slowbear,

I have just checked your site and I could see the code took effect correctly already:

Please clear your browser’s cache.

As for the line above the widget, please add this code:


.widget:before {
    display: none;
}

Hope this helps.

#9

Hi Jade

These have worked perfectly. Thank you so much for your help.

Chris

#10

You’re most welcome, Chris.

#11

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