Assigning color to different text areas

• 

  jaffarealestate · Member · Mar 16, 2017 at 2:10 pm

  • Copy link
  • Add topic to favorites

  How do I assign different color to different text area on the page?

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

• 

  thesacredpath · Member · Mar 17, 2017 at 9:07 am

  • Copy link

  Can you let us know which text you wish to change the colors on so that we can work out the code for you and give you an example that you can then use to change other areas.

• 

  jaffarealestate · Member · Mar 17, 2017 at 11:39 am

  • Copy link

  Thank you for your response, I wanted to change the color of the text in the menu and also in the body text. Also wanted to know if it’s possible in the body text to have headline in one color and the body text in different color.
  Thank you

• 

  thesacredpath · Member · Mar 17, 2017 at 8:00 pm

  • Copy link

  To change the color of the text in the menu, add a color declaration to your .main-navigation rule like this and set your color as desired.

  .main-navigation a {
  	font-size:20px;
  	color: #cc0000;
  }

  For the main content text color, use the following. I’ve also included a rule to change the color of the links (a elements).

  body {
  	color: #00ff28;
  }
  a {
  	color: #a700ff;
  }

  Also wanted to know if it’s possible in the body text to have headline in one color and the body text in different color.

  Are you talking about the titles of the posts, such as on your For Sale page?

• 

  jaffarealestate · Member · Mar 19, 2017 at 12:40 pm

  • Copy link

  How do I find the area where I can plug in the code for changing the main menu text color? Could you point out the path to it? Thanks,

• 

  thesacredpath · Member · Mar 20, 2017 at 6:55 pm

  • Copy link

  Hi, the code I mentioned would be entered at Customize > CSS. You have the base rule already there, all you have to do is add the color declaration. This is what you have now.

  .main-navigation a {
  	font-size: 20px;
  }

  Make it look like this.

  .main-navigation a {
  	font-size:20px;
  	color: #cc0000;
  }

  The other two CSS rules I gave (body and a) simply add to the bottom of the existing custom CSS you have at Customize > CSS.