• I hadn’t realized that the header of posts functions differently that the header of pages, and now I have an issue with the color of my H1 and H2 text, which I made white to stand out over the featured images on my pages. If I cannot have a featured image underneath the post titles, I’d like at least to know how to change the color of the H1 and H2 text in posts. Can you help me with this?

    Thanks in advance!

Viewing 5 replies - 1 through 5 (of 5 total)
  • This should in theory work:

    .entry-content h1,
    .entry-content h2 {
      color: #bb00bb;
    }

    Change the example purple to your preferred colour. If you have any trouble with it, please provide a link to a page or post showing the issue so I can take a look directly – thanks.

    As a side note, don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    Thread Starter jebraweb

    (@jebraweb)

    Thanks, Kathryn. I have a Custom CSS plugin installed and added the code you suggested, but the post headers haven’t changed. You can take a look at http://centered-psychotherapy.com/home/blog/

    Thanks in advance for your help!

    Ah, I misunderstood your question. When you said you wanted to know “how to change the color of the H1 and H2 text in posts.” I thought you meant the content within each post, not the post titles on the blog index. 🙂

    If you want to change the colour of your blog post titles on this page – http://centered-psychotherapy.com/home/blog/ – then this custom CSS should do the trick:

    .blog h2.entry-title {
      color: #bb00bb;
    }

    Does that achieve what you want?

    Thread Starter jebraweb

    (@jebraweb)

    That’s the ticket! Thank you!

    I can open a second topic if you like, but as long as I have your attention, is it possible to add a header image to this blog page like we have on other pages of the site? Just curious. 🙂

    Thank you again, very much!

    That’s the ticket! Thank you!

    Great!

    I can open a second topic if you like, but as long as I have your attention, is it possible to add a header image to this blog page like we have on other pages of the site? Just curious. 🙂

    My colleague Richard and I both took a look at this, but neither of us sees a simple way to add a header to the blog page with CSS alone. If you really want to do that, we’d recommend making a child theme, in which you could then add a new div element to the blog template file and mimic the styling of the .hero with-featured-image and its child divs, .page-wrapper and .page-title to achieve the effect you want.

    Making a child theme means your changes won’t be overwritten when you update the theme. If you’re new to child themes, you can explore these guides:

    http://codex.ww.wp.xz.cn/Child_Themes
    http://op111.net/53/
    http://vimeo.com/39023468

    p.s. in future it’s better if you start a new thread for a new question. 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Post-only styling help’ is closed to new replies.