Change Colors in Footer Area, Gridiculous Theme

  • Unknown's avatar
    denatb · Member ·

    Hello:

    I would like some help in understanding how to change the colors in the footer area of the Gridiculous theme. How do I change the black background to coordinate with the customizations we are making? We’d also like to be able to change the colors of the fonts and social media icons, if possible.

    Thank you.

    Dena

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

  • staff-hbadger · Staff ·

    Hi Dena,

    I tried to look at your blog to try to help but it is currently set to private. Without being able to see it I can offer some general but not specific support.

    Have you explored the custom design toolbar to experiment with colors? If not, try that first. The Gridiculous Pro page says your theme offers color customization, so there may be options there using the customizer. If what you’re looking for is not there, you may need to purchase a custom design upgrade.
    Customizer: http://en.support.wordpress.com/customizer/
    Custom design upgrade: http://en.support.wordpress.com/custom-design/
    Custom colors: http://en.support.wordpress.com/custom-design/custom-colors/
    Gridiculous Pro: http://en.wordpress.com/themes/gridiculous-pro/

    If there is no way of changing the footer color or fonts using those tools, you may need to use CSS:
    Editing CSS: http://en.support.wordpress.com/custom-design/editing-css/

    If you find that CSS editing is the way you’ll need to go, there is a separate CSS Customization forum you can access to ask specific questions:
    https://en.forums.wordpress.com/forum/css-customization

    Hope that helps!

  • Unknown's avatar
    denatb · Member ·

    Hi. We have all the Customization Upgrades on the site. Other colors change, but not the footer area.

    I thought I had posted this in the customization forum…..Where are you seeing this and how can I assure I get it in the customizaton forum? I clicked the link you listed above earlier…..and thought that is where I was….

    D

  • Unknown's avatar
    denatb · Member ·

    Also, I can make the blog viewable later today so we can discuss this more closely…..I just don’t want to make it public until I know I am engaged in the right conversation. Overall, it’s not ready for public consumption yet…..

  • Unknown's avatar
    denatb · Member ·

    PS I went ahead and made the site public temporarily so you can see what I am talking about. D

  • Unknown's avatar
    denatb · Member ·

    And, am about to try to post question again in CSS forums.
    Thanks!
    D

  • staff-hbadger · Staff ·

    Hi Dena,

    Thanks for making your site public so that I could take a look. Do you know how to use the Inspect Element browser tool? In Firefox or Chrome, go to your blog and right click on the footer area. Select “Inspect Element” from the menu that pops up. A toolbar will pop up on the bottom of your blog: on the left you will see the html code for your site and on the right you will see the CSS.

    Click on the html line that looks like this:
    <footer id=”footer” role=”contentinfo” style=”height: 674px;”>

    and the CSS for your footer background and text colors will appear on the right. In that CSS module on the right you can play around to see what different colors will look like without it affecting your site. When you have found the color palette you like you will then need to add the CSS code to your customization screen (see the Editing CSS support doc referenced above).

    For example, if you want the footer background to be the same color as your blog background, you would add this code on your CSS customization screen:

    #footer {
    background: #000;
    }

    You’ll notice that because of the text shadowing the text will now look strange, so you’d likely want to add

    #footer {
    text-shadow: none;
    }

    Hope that helps!

  • Unknown's avatar
    denatb · Member ·

    Great. Thank you. This has been hugely helpful!
    One more thing:
    Can we work with the colors on the social media menu? Change those, too?

  • Unknown's avatar
    denatb · Member ·

    I guess there is still more. I see where to put the code above, but how do I get it to save? D

  • staff-hbadger · Staff ·

    Hi Dena,

    Once you have added your code in the CSS editor screen (NOT the Inspect Element browser tool – that’s just for experimentation) you will need to click save at the bottom right of the customizer for it to save.

    As far as changing the colors of the social media buttons you may want to work with support on your specific theme regarding that. Here is the Gridiculous Pro support page:
    http://theme.wordpress.com/themes/gridiculous-pro/support/

    Hope that helps!

  • Unknown's avatar
    denatb · Member ·

    Yes, it does help. I’ll ask the other question in the Gridiculous Forum.
    Thanks so much.
    D

  • staff-hbadger · Staff ·

    My pleasure – I’m glad it helped :-)

  • The topic ‘Change Colors in Footer Area, Gridiculous Theme’ is closed to new replies.