Customize Header Font Color

• 

  carolecarlson888 · Member · Mar 12, 2014 at 12:57 am

  • Copy link
  • Add topic to favorites

  I have upgraded – have the Suits Theme and not familiar with CSS. I simply want to change the font color and not sure how to do this.
  Any help appreciated.
  Remember, I have not clue about CSS. :)

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

• 

  hfzrhmn · Member · Mar 12, 2014 at 1:05 am

  • Copy link

  Hi,

  You can add the following custom CSS to your Custom CSS box:

  .site-header h1.site-title {
  	color: #cc00cc !important;
  }

  Change #cc00cc to the hex code of a color you want. Here’s a good site that will allow you to pick colors and get their hex code: http://html-color-codes.info/

  Here’s an additional CSS code if you want to change the description text color as well:

  .site-header h2.site-description {
  	color: #cc00cc !important;
  }

• 

  carolecarlson888 · Member · Mar 13, 2014 at 1:17 am

  • Copy link

  Hi hfzrhmm,
  I typed exactly what you said leaving the /* on the top line and at the end. It still has not changed. Do I have to have all the spaces correctly, including the second line indent as you have it?
  sorry, but I am really struggling with this.

  thanks for all your help with this,
  Carole

• 

  hfzrhmn · Member · Mar 13, 2014 at 1:22 am

  • Copy link

  Hi Carole,

  Right now your Custom CSS is like this:

  /*
  .site-header h1.site-header {
  color: #dd3737 !important;
  }
  
  .site-header h2.site-description {
  color: #dd3737 !important;
  }
  */

  Delete the /* at the beginning and the */ at the end, and it should apply now :)

  In CSS, wrapping things between /* and */ disables them, so that’s what’s happening in your case.

• 

  carolecarlson888 · Member · Mar 13, 2014 at 1:26 am

  • Copy link

  getting closer!! thanks! The description line is changed but still not the header line. ?

• 

  hfzrhmn · Member · Mar 13, 2014 at 1:41 am

  • Copy link

  A little typo, ‘site-header’ should be ‘site-title’. So the correct CSS code should be:

  .site-header h1.site-title {
  	color: #dd3737 !important;
  }
  
  .site-header h2.site-description {
  	color: #dd3737 !important;
  }

• 

  carolecarlson888 · Member · Mar 13, 2014 at 1:44 am

  • Copy link

  i did it!!! Figured it out. changed to site-header h1 site-title and it switched.

  thank you so much!
  carole

• 

  hfzrhmn · Member · Mar 13, 2014 at 1:58 am

  • Copy link

  Yeah, congrats and you’re welcome!