changing header/footer background and font colours

  • Unknown's avatar
    audetskee1968 · Member ·

    I would like to change the background colour of both my header banner as well as the footer (widget section of my page at the bottom). I would like them to be changed from black to white and for the text ( site title, menu, and widget text such as more, and copyright be changed to a dark grey).

    Also, the affinity theme is set so that as you start scrolling down on desktop and tablet versions, the background of the menu/header bar changes colours. I would like for it to remain the same as I scroll down.

    Can we apply these changes to my mobile site as well.

    Thank you

    The blog I need help with is: (visible only to logged in users)

  • livfor2day · Staff ·

    This is possible but only if you have a WordPress.com Premium plan. With that, you have the Custom Design option, which allows you to make changes to the site’s CSS file and truly customize your blog.

    You can find more information in your blog’s Site Settings panel and at https://wordpress.com/plans/.

    If you have purchased a Premium Plan and would like to know how to make these changes, please let me know and I would be more than happy to walk you through it.

  • Unknown's avatar
    audetskee1968 · Member ·

    Hello :) Yes I do have a business plan I believe it’s called. Is this option still possible?

  • livfor2day · Staff ·

    It is. Can you give me an example of the type of dark gray that you’d like? Even better, go to http://www.colorpicker.com and you can find any shade of gray that you could ever possibly imagine. If you could pass along the code in the box next to the # sign above the color box (this is called the HEX code that corresponds to that color), that would be awesome!

    I’ll put together specific instructions for you so that you can simply put the code where it needs to go.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @, for the footer widget area, you can add the following CSS and you can adjust the color declarations as desired. 

    .footer-widgets {
    background-color: #fff;
    color: #777;
}
.footer-widgets .widget-title {
    color: #777;
}
.footer-widgets .widget div ul li, .footer-widgets .widget > ul li {
    border-color: #777;
}

    If you also want to change the background color on the social icons, add the following and adjust the colors as desired. The first rule is the background color for the horizontal band. The second rule is the color for the circular background color on the icons. 

    .jetpack-social-navigation {
    background-color: #fff;
}
.jetpack-social-navigation a::before, .jetpack-social-navigation a:visited::before {
    background-color: #ddd;
}

    On the header, are you talking about the dark band at the top with your site title and navigation?

  • Unknown's avatar
    nicefreshbread · Member ·

    Hi Livfor2day and thesacredpath —

    I’m wondering if you can help me. I am using the Eighties theme, which I love. I’m brand new to CSS and don’t yet understand how to code what I want.

    I’d like my tag line to be #6EEECB instead of white. Could you possibly write down what I need to include in the CSS box to make that happen?

    Gratefully,
    Sarah

    nicefreshbread.com

  • livfor2day · Staff ·

    Hi, Sarah.

    It looks like you’ve figured this out on your own. Way to go!

    If you’d like any more assistance, it would be better to start your own thread in the WordPress.com support forums so as not to confuse the thread happening here.

    Thanks and good luck!

  • supernovia · Staff ·

    Thanks for that @livfor2day :) I’ll go ahead and close this thread out since the first issue appears to be resolved, too. Cheers, all!

  • The topic ‘changing header/footer background and font colours’ is closed to new replies.