• Resolved ralexandra

    (@ralexandra)


    Hello,
    I have already eliminated the featured image from each post page and adjusted the black bar to not be so tall. What I would like to do now is make the post title font on each post page smaller AND change its color. Finally, I would also like to know how to make the background black bar another color.
    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • What I would like to do now is make the post title font on each post page smaller AND change its color.

    I used a browser inspector to see that the class on post titles is entry-title. That means you can target its size and colour with custom CSS – in your CSS plugin or child theme – like this:

    .entry-title {
        font-size: 2.0em;
        color: #bb00bb;
    }

    You can tweak the size and choose a different colour, as you like.

    Finally, I would also like to know how to make the background black bar another color.

    If you’re referring to the grey strip behind the post title, you can try targetting it like this:

    .has-thumbnail .entry-header .entry-title, .entry-header .entry-title {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    }

    If you want to keep the transparency (currently at 50%) you’ll need to use the RGBA format above, and change the first three zeroes to whatever RGB values correspond to the your desired colour.

    For example, if you wanted a strip at 50% white, you’d find that white is represented by R-255, G-255, B-255, so your CSS would look like this:

    .has-thumbnail .entry-header .entry-title, .entry-header .entry-title {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
    }

    You can use a colour converter to find the RGB values:

    https://www.javascripter.net/faq/hextorgb.htm

    If you don’t want to keep the transparency, you can replace

    rgba(0, 0, 0, 0.5)

    with a hexadecimal colour code instead – for example, #bb00bb

    Let me know how it goes.

    Thread Starter ralexandra

    (@ralexandra)

    Thanks Kathryn. The first fix seems to work as I desired, I just need to play around with the colors and sizes on my own. Great!!!!

    Before I try the second fix, does that code refer to the black bar at the top of each individual post page or on the title page?
    Thank you again.

    Before I try the second fix, does that code refer to the black bar at the top of each individual post page or on the title page?

    It refers to the dark strip behind the word “Morning Tea” in this test post:

    https://pictoricodemo.wordpress.com/2011/07/07/morning-tea/

    If you meant something else, could you provide a link to a sample page on the demo and explain which part you’re trying to change? Thanks.

    Thread Starter ralexandra

    (@ralexandra)

    ok, yes this is what I meant. I removed the featured image so my strip is solid black.
    Thank you.

    Great, glad that did the trick. I’ve marked this post as resolved but you can always start a new one if you need further help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘change font size header and color bar on POST pages only’ is closed to new replies.