Widget font color changes

• 

  tscsoccer · Member · Feb 18, 2015 at 11:25 pm

  • Copy link
  • Add topic to favorites

  Currently working with the Sorbet theme, and I’d like to edit the colors of the type in the widgets, but can’t seem to find a place to do this. Can I affect the CSS to make this customization, and if so, where would I add the new, amended CSS? Sorry, I’m new to CSS so hopefully someone has a tip.

  Thank you!

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

• 

  staff-happychia · Staff · Feb 19, 2015 at 10:23 am

  • Copy link

  Please add this code to CSS Editor and see if you like the result:

  You can change the colors to the ones you like.

  #secondary .widget h1, .widget-title {
  color: green;
  }
  
  #secondary .widget {
      color: yellow;
  }

• 

  tscsoccer · Member · Feb 21, 2015 at 5:12 pm

  • Copy link

  Perfect! thank you– was able to add hex colors so it worked perfectly.

  New question, if you are game: would also like to change the header background color to a hex green to match our header graphic. Would this be another CSS modification?

  http://taughannocksoccer.com/

  Any help appreciated!

• 

  chaitanya021815 · Member · Feb 21, 2015 at 11:23 pm

  • Copy link

  This is an easy game :-)

  .site-header {
      background: #4ab01b;
  }

• 

  tscsoccer · Member · Feb 22, 2015 at 1:16 am

  • Copy link

  Wow, thank you. Again, perfect :)

  OK, so one last challenge. I want to change the footer color to match header background (#0c3807).

  http://taughannocksoccer.com/

  Let me know what you think!

  Thank you so much for all your help!

• 

  tscsoccer · Member · Feb 22, 2015 at 1:19 am

  • Copy link

  Also, separate question: how can I add links to generic text Widgets? Is this a CSS addition, or am I missing this option somewhere in the Widgets menu?

  Thanks–

• 

  staff-happychia · Staff · Feb 22, 2015 at 1:51 am

  • Copy link

  .site-footer {
  background: #0c3807;
  }

  Text Widget Links support document teaches how to add links to generic text Widgets :-)

  Also keep Links and Image Links support documents handy.

• 

  thesacredpath · Member · Feb 26, 2015 at 8:04 pm

  • Copy link

  Hi, to change the footer to the green color, add the following CSS.

  .site-footer {
      background: #0c3807;
  }

  Here are some useful support resources on using text widgets.
  Text Widget
  Text Widget Links
  Linking Images

• 

  thesacredpath · Member · Mar 3, 2015 at 3:04 pm

  • Copy link

  Hi there, I see you have the footer changed to the green color. I’m going to mark this thread as resolved, but feel free to start a new one if you have additional questions.