Hi @tasmanjack,
For the header, i would like it to just be a solid background colour, and then scroll out of the page, just like this forum website. Currently I have to have a plain white front imagine, and it still stays in the picture when i scroll down, or just doesn’t look quite right.
It’s possible to change the background colour of the header with the following custom CSS:
.home .site-header, .blog .site-header {
background-color: #663399;
}
To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. If you have Jetpack installed then you can activate its custom CSS module.
You can change the value of #663399 to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:
http://www.color-hex.com/
Please note that it’s not possible to change the white background of the image using custom CSS. You would need to change the image itself within the image editing software it was created with.
Let me know if the above helps you to get the header looking as you intend it to.
For the single posts, is it possible to make the image smaller? And also, is it possible to have less white at the top, so the heading just moves right to the top and can be seen when you open the page?
The white space above the post’s content could be reduced with the following:
.single-format-image.has-post-thumbnail .content-area {
padding-top: 1rem;
}
In the above snippet, increase/decrease the value of padding-top to your liking. Please note that increments/decrements of 0.1 are enough to have an impact e.g. 1.1rem, 1.2rem, etc.
You could also reduce the amount of height that the image takes up with the following snippet:
@media only screen and (min-width: 1201px) {
.single-format-image.has-post-thumbnail .content-area {
margin-top: 30%;
}
}
.site-banner-media, .site-banner .site-banner-thumbnail {
padding-bottom: 30%;
}
If you experiment with increasing/decreasing the height in the above snippet, then make sure that the value of margin-top and padding-bottom stay the same. This is needed in order for the content to remain a reasonable distance from the featured image.
Thanks!
