Changing font color in headers on Yoko theme

• 

  removearticle · Member · Jun 24, 2015 at 2:07 pm

  • Copy link
  • Add topic to favorites

  Ho do I change the font color for title headers and post titles? Been doing a lot for reading and it’s not very clear.

  Thanks for any help you can give me.

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

• 

  jasondayne · Member · Jun 26, 2015 at 3:55 am

  • Copy link

  Hi! If you have a Premium account you should be able to get this done through adding a little CSS code. That is done under Appearance in your dashboard.

  To change the page titles:

  .title {
  	color: red !important;
  }

  To change the post headers:

  h2 a {
  	color: red !important;
  }

  So if you do both it will look like this:

  .title {
  	color: red !important;
  }
  
  h2 a {
  	color: red !important;
  }

  1. It’s really important that the CSS be exact, so if it’s not working check to make sure everything is exactly as you see it above. Don’t leave out those periods or semicolons.

  2. You can change “red” to a hex number. Select any color here:
  Color Picker
  Then copy the hex number including the ‘#’ sign. Like this:

  .title {
  	color: #FF0000 !important;
  }
  
  h2 a {
  	color: #FF0000 !important;
  }

  3. If that that code does not work or it changes a title other than you were intending, just let me know and perhaps give me a link to a specific page and let me know exactly what text you want changed.

  Sorry if I’m talking below you here; you may already know most of these pointers!

  Best to you!

  Jason

• 

  removearticle · Member · Jun 26, 2015 at 10:00 am

  • Copy link

  You are not talking below me. css is new to me. I have been designing static html for years and am just now jumping into template design and css. It’s a whole new world for me so I appreciate the help. I was able to achieve the customization I wanted without using the “!important” code.

  I have since had this resolved through the help of another wordrpess forum.

  On a side note: how do you get the code to how up in rectangles as you have above?

  This was the magic css code here:

  .masthead .branding h1.logo a {
  color: #246822;
  }

  .masthead .branding h2.description {
  color: #246822;
  }

  .main h1.title a, .main h2.title a, .main h2.posttitle a, .hentry .title {
  color: #246822;
  }

• 

  jasondayne · Member · Jun 26, 2015 at 4:48 pm

  • Copy link

  Awesome! Yes, I throw the !important in there just because sometimes when dealing with the templates it’s difficult to know how specific your identification of the item needs to be to override whatever the CSS has currently. You can do the code in the boxes by using the “code” button up there above text box or you can just use backtick (‘) characters.

  Best to you!
  Jason