Before you ask please READ THIS

Overwrite text/link color in Footer widget

in Rife Posts: 18
Hi everyone,

I kindly ask your help for the following issue.

I can't seem to change the text color in my footer. I can find the option Footer in the General Settings menu. There you can modify font colors. But it also states that it will NOT be applied to "Footer Widgets". And as the template has a footer widget the color is indeed not applied.

I can't find where to modify text color specifically for Footer widgets. Help pls!!

Thanks a lot,
André

Comments

  • AirAir
    Posts: 10,660
    Hey :-)

    Yes, widgets are styled based on the Customizing → General settings → Footer → Widgets colors option. These because widgets have many colors and parts, so we have prepared styles in the main CSS for them.

    However, if you would tell me what is the value of the above mentioned option, I will prepare CSS for you for links color :-)
    Or just please post a live link to your website and it will be enough :-)

    With kind regards.
  • Posts: 18
    Hi there,

    Thanks for your kind answer. The values for the footer links are simply #FFFFFF (both normal as hover). The link to the website is https://day-day.nl/.

    Thanks for your help.
    Best, André
  • AirAir
    Posts: 10,660
    Hey :-)

    Now I am not sure are we talking about the footer section where you have widgets, or about the lowest part of the footer that has "© DAYDAY - 2021" currently?

    I am confused because links in the footer widgets sections are not #ffffff currently :-)

    With kind regards.
  • Posts: 18
    Sorry for the confusion. It does indeed concern the widgets (not the © DAYDAY - 2021 area). I actually don't know what color the are now, but I'd like them to be #FFFFFF.

    That's what I meant. Thx
  • AirAir
    Posts: 10,660
    OK. Here, please add this custom CSS:
    .foot-widgets.dark-sidebar a, .foot-widgets.dark-sidebar .widget_filter li a {
        color: #ffffff;
    }
    .foot-widgets.dark-sidebar a:hover, .foot-widgets.dark-sidebar .widget_filter li a:hover {
        color: #ffffff;
    }
    Hope now it will be ok :-)

    With kind regards.
  • Posts: 18
    Almost there! Two out the three widgets are perfect now. However one of the still displays the wrong color. I suppose it has something to do with the fact that this widget does not contain any links, just plain text. Do you some css for me to add?

    Really appreciate your help (and patience)
  • Posts: 18
    Hi,

    I think I it figured out myself. I added the following code to the css you sent me.

    .foot-widgets.dark-sidebar p, .foot-widgets.dark-sidebar .widget_filter li p {
    color: #ffffff;
    }

    This actually put the plain text in the final widget in the right color too.

    Thanks for your help.
  • AirAir
    Posts: 10,660
    Hey :-)

    Great work!

    You can also use simpler CSS like this:
    .foot-widgets.dark-sidebar, .foot-widgets.dark-sidebar .widget {
    color: #ffffff;
    }

    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion