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.