Page titles n different colors

  • Unknown's avatar
    vegcapersblog · Member ·

    The Appetite theme shows page titles on featured images for every page. I want each page to have a title in a different color. Please help me with the CSS for this.

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

  • Unknown's avatar
    taniametalli · Member ·

    Hi there,

    If you have the Premium or Business Plan, you can change the color of the title by adding this line of code:

    h1.entry-title {
    color: “your new color”;
    }

    However, I don’t think it’s possible to have a different color for each page, as that would mean modifying the HTML code, by adding a class to each page h1.entry-title.

    If you have a Business Plan, you can add your own theme and modify the HTML as you prefer.

    Hope this helps.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @vegcapersblog, we can specifically target individual pages for CSS changes such as title color using the unique page id CSS class set in the opening body html tag in the page source code. It does mean that each page has to have its own CSS rule to do this, and it also means that each page you create going forward would need a CSS rule written for it to control the color. If you use the web inspector in your browser and look in the HTML section on the left, you will see something that starts out like this on your Know Our Food page.
    <body class="page-template page-template-templates page-template-grid-full-width-page page-template-templatesgrid-full-width-page-php page page-id-43...
    The page-id-43 is the unique page id class we will use on this page. The following custom CSS makes that title overlaid on the image into an lime yellow color for demonstration, which you can of course edit to your liking. 

    .wf-active body.page-id-43 #primary-header .entry-title {
  color: #ffee11;
}

    You can use your web inspector and the above as a guide for changing the page titles colors on other pages.

  • Unknown's avatar
    vegcapersblog · Member ·

    Thank you. One more question. What if I don’t want the page title to appear on the featured image on a particular page?

  • Unknown's avatar
    thesacredpath · Member ·

    You can use the unique CSS class for the page from the opening body tag and then do this (using Know Our Food as an example}. 

    .page-id-17 #primary-header .entry-title {
  visibility: hidden;
}
  • The topic ‘Page titles n different colors’ is closed to new replies.