Change Page Title Text Color

• 

  neolifeteamjohnson · Member · Apr 6, 2015 at 11:05 pm

  • Copy link
  • Add topic to favorites

  I need a custom CSS code to change the Title Text Color on a few pages in my Purpose Theme.

  The Purpose Theme uses white text, but some of my featured images have white backgrounds so the text does’t show up.

  Thanks!

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

• 

  dannywellman · Member · Apr 7, 2015 at 12:44 am

  • Copy link

  Hey there!

  If you want to change the Title text for every page, the following code should work for you. This will make it green. Adjust the Hex value to change the color to what you want.

  .headline.img-headline {
    color: #00ff00;
  }

  If you need to change the title color for only a few pages, you could do that also. Let me know and I’ll try and walk you through it since I can’t see your private pages.

  Good luck!
  -Danny

• 

  neolifeteamjohnson · Member · Apr 12, 2015 at 2:14 am

  • Copy link

  Thanks so much, Danny! I really appreciate it!

  I would just like to change the title color for a few pages. Could you walk me through how to do that?

  Thanks again for your advice,
  Kathryn

• 

  thesacredpath · Member · Apr 14, 2015 at 10:23 pm

  • Copy link

  Since background images can all be different, for your menu items, you might consider the following, which puts a slightly opaque (transparent) background to the menu items. Give it a try and see what you think.

  .menu li {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
      border-radius: 5px;
  }

  To change the actual page titles on selected page (not menu) we can use the unique CSS page id body class, which is found in the opening body selector for the page. You can use the web inspector built into your browser to find this. As an example, the following would turn the page title on your Start Here page black.

  .page-id-37 .headline.img-headline {
      color: #000000;
  }

  You can use that as a guide for other pages and just change the hex color code as you desire.