Change colors in Footer Area of Gridiculous Pro, Including Font and Social Media

• 

  denatb · Member · Jun 16, 2014 at 11:59 am

  • Copy link
  • Add topic to favorites

  Hello:

  I would like some help in understanding how to change the colors in the footer area of the Gridiculous Pro 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.

  We have purchased all the upgrades. Other colors change when working in the customizer, but not these so far….

  Thank you.

  Dena

  The blog I need help with is whippletreeyarnshop.com.

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

• 

  kathrynwp · Staff · Jun 17, 2014 at 3:16 pm

  • Copy link

  How do I change the black background to coordinate with the customizations we are making?

  This should do it:

  #footer {
  background-color: #000;
  }

• 

  kathrynwp · Staff · Jun 17, 2014 at 3:19 pm

  • Copy link

  We’d also like to be able to change the colors of the fonts

  Then you’d add this instead of the above to define a text colour:

  #footer {
  background-color: #000;
  color: #fff;
  }

  Of course you’ll need to change black and white to whatever colours you want. :-)

  If you also want to change the link colours in the footer, you’d do something like this:

  #footer a {
  color: #bb00bb;
  }

• 

  kathrynwp · Staff · Jun 17, 2014 at 3:24 pm

  • Copy link

  For the social links, these are the styled you’d want to tweak to your desired colours – I used a browser inspector to find them:

  #menu-social ul li a:before {
      color: #bb00bb;
      background-color: #999999;
      box-shadow: 1px 1px 1px #222222 inset, 1px 1px 1px #555555;
  }

  You can also define a hover colour with this:

  #menu-social ul li a:hover:before {
      color: #000000;
  }

• 

  denatb · Member · Jun 17, 2014 at 3:31 pm

  • Copy link

  Kathryn:

  Thank you for this. I think some lines got crossed and I actually got some of the above information from another WordPress engineer yesterday, but for the font and links information…..

  Would you be so kind as to take a look at it now….You’ll see I changed the background color to blue, removed the shadows, made some of the font white. Still, some pieces remain grey. I believe the links? We’d like to be able to change those colors, including the colors of the social media icons. Can you help me with that? I think I missed something in translation…..

  Here is all the CSS I have placed on the site for the moment regarding these questions:

  #footer {
  background: #174A70;
  }
  }
  color: #ffff;
  }
  #footer {
  text-shadow: none;
  }
  #footer a {
  color: #fffff;
  }

  Your help is greatly appreciated.

  D

• 

  kathrynwp · Staff · Jun 17, 2014 at 3:35 pm

  • Copy link

  Ah – I see you submitted a couple of duplicate threads:

  https://en.forums.wordpress.com/topic/change-colors-in-footer-area-gridiculous-theme

  https://en.forums.wordpress.com/topic/colors-footer-text-background-and-social-media-icons-gridiculous

  http://premium-themes.forums.wordpress.com/topic/social-icon-menu-how-to-change-colors

  Since you already have three other threads going, I’ll close this one and let you continue in the others you’ve already started.