Change background color of footer while keeping font white

Home Forums Automattic Forefront Change background color of footer while keeping font white

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #107860 Resolve

    theeagertraveller
    Member

    I’d like to change the footer background color to black and maintain the footer font color to white. Can you please help me with the CSS for this because when I try to edit the color in the customize section of wordpress, the font color in the footer section also changes and I can’t seem to fix it to white.

    Appreciate your help. Cheers

    The blog I need help with is theeagertraveller.com
    #138243

    Michelle

    Hi there,

    Looks like your footer background color is already black. Here’s the CSS to turn the text white:

    .footer-widget-area .widget, .footer-widget-area .widget-title, .footer-widget-area .widget a, .footer-widget-area .widget input[type="text"], .footer-widget-area .widget input[type="email"], .footer-widget-area .widget input[type="search"], .footer-widget-area .widget input[type="password"], .footer-widget-area .widget textarea, .footer-widget-area .widget a, .footer-widget-area .widget_calendar #wp-calendar tbody a, .footer-widget-area .widget_flickr #flickr_badge_uber_wrapper a:link, .footer-widget-area .widget_flickr #flickr_badge_uber_wrapper a:active, .footer-widget-area .widget_flickr #flickr_badge_uber_wrapper a:visited, .footer-widget-area .milestone-header, .footer-widget-area .milestone-countdown, .footer-widget-area .milestone-message, .site-info, .site-info a {
    color: #fff;
    }

    #138269

    theeagertraveller
    Member

    Hi Michie, sorry I think I called you ‘AM’ on the previous thread (my bad).

    Worked fine, thanks. Can you help with the code as well to change the color of the ‘subscribe’ button and the connect icons on the footer to gold?

    Cheers

    #138309

    Michelle

    No worries about “AM”, :D

    Do you still want the subscribe button in your footer to be gold? Looks like you’ve changed the colors around a bit since the last time I visited your site (it’s shaping up really nicely by the way!).

    To change the background social icons in the footer to match the current background color of the subscribe button, try this:

    .social-links a {
    color: #ebcfa7;
    }
    .social-links a:hover {
    color: #d78d2d;
    }

    #138351

    theeagertraveller
    Member

    Awesome. Is it possible to tweak only the subscribe button as well, should I decide to change it in the future?

    Thanks, have placed that code but changed the icons to white to match the text on the bottom left.

    I noticed that when hovering through links in the body and sidebar, there’s a nasty green underneath :( Can i amend this? Perhaps to light gold as well?

    Btw, thank you for noticing my blog :) I can’t imagine how I’ll survive without your help. I have no training on css whatsoever. Apologies as well if I’ve raised a lot of topics in the forum. There’s really a lot to fix in this theme I guess. Or maybe it’s just me. Because when I had the ‘Further’ theme installed, I don’t remember asking as much. Also, I’m not sure what your preference is but I submitted the questions on separate topics so if ever someone has the same question it’ll be easier to spot rather than compiling them on 1 single message. I found this useful when I searched the forum, I always try to search the Forefront forum first before raising anything to avoid any duplicate. :) It’s a shame that most of the blogs on Forefront, those that had questions anyway, were private.

    Cheers

    #138427

    Michelle

    Is it possible to tweak only the subscribe button as well, should I decide to change it in the future?

    Yes, you can target the subscribe button with this CSS:

    .footer-widget-area button, html .footer-widget-area input[type="button"],
    .footer-widget-area input[type="reset"],
    .footer-widget-area input[type="submit"] {
    background-color: #8e8e8e;
    }

    .footer-widget-area button,
    html .footer-widget-area input[type="button"],
    .footer-widget-area input[type="reset"],
    .footer-widget-area input[type="submit"] {
    color: #F9F9F9;
    }

    The first block controls the background color; the second controls the text color on top of the button.

    I noticed that when hovering through links in the body and sidebar, there’s a nasty green underneath :( Can i amend this? Perhaps to light gold as well?

    Yes, I will answer that over here in a bit. :)

    Btw, thank you for noticing my blog :) I can’t imagine how I’ll survive without your help. I have no training on css whatsoever. Apologies as well if I’ve raised a lot of topics in the forum. There’s really a lot to fix in this theme I guess. Or maybe it’s just me. Because when I had the ‘Further’ theme installed, I don’t remember asking as much. Also, I’m not sure what your preference is but I submitted the questions on separate topics so if ever someone has the same question it’ll be easier to spot rather than compiling them on 1 single message. I found this useful when I searched the forum, I always try to search the Forefront forum first before raising anything to avoid any duplicate. :) It’s a shame that most of the blogs on Forefront, those that had questions anyway, were private.

    I appreciate your starting a different topic for each question, it will certainly make it easier for future users to search and find answers. :)

    #138492

    theeagertraveller
    Member

    Worked perfectly :) Thank you, Michelle.

    Sorry but just noticed now, could you please help me amend the color of the 2nd line in the footer? If you could also give the code to completely remove it. I’d like to do a trial and error before I go with either one.

    Thank you.

    #138607

    Michelle

    To change the color, find the CSS I provided for changing the top border, and modify it so that it looks like this:

    .footer-widget-area {
    border-bottom: 1px solid #e0991e;
    border-top: 1px solid #e0991e;
    }

    To remove it, just change the “border-bottom” rule to “none”.

    #138679

    theeagertraveller
    Member

    Now I’ve hidden the second line on the footer. Awesome!

    Thanks for the help, Michelle.

    #138704

    Michelle

    You’re very welcome! :)

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Change background color of footer while keeping font white’ is closed to new replies.