Your blog may look a little boring “out of the box.” This tutorial shows you how to add an image that is displayed across the top of your blog, and also how to change the colors of various elements in the header.
To display a custom header image
Go to your Dashboard, and unfold the Appearance pane. You will see a Header menu – click on it.
The Custom Header screen will open. Use the buttons to select a file and upload it:
If the image file that you choose is the exact required size of 960 x 121 pixels, then it will be used as-is. If, however, you upload an image of a different size, then you will be able to select part of the image that will display in the image header. You’ll get a screen that perhaps looks like this:
Finally, click to save the new header image:
Then go back to your blog to see the result!
Here are a couple of points to review concerning the header image:
- As noted above, an image of exactly 960 x 121 pixels will be used as-is. This can be used to place imagery whereever you like in the header.
- If you like, a PNG image with a transparent background can be used to have the background color show through.This works well for logo graphics and the like.
- If not using an exactly-sized image, then it should be larger than the 960 x 121 pixels in size.
- The various text elements in the header will overlay the uploaded image. There is currently no way to turn off the header text (so that it an be provided in the image).
To set header and link colors
There are a number of colors that can be set in your dashboard. To do so, open the Appearance pane and click on Theme Options:
You will see a page with a great many options. Scroll down to the “Blog Global Links Settings,” which is the start of the color settings. From here on are a number of color settings. To set a color, click in the entry box:
The color selector looks like this (when done, click on the background to dismiss the color selector):
Here is the list of colors, which a brief explanation of each. Unfortunately, you need to select the color and save it before you can see what exactl effect it will have. So if you choose to change the colors, be prepared to spend some time on it!
- “blog global links color” – changes the color of most links on the page (except header)
- “blog global links hover color” – same, but when th mouse is moved over the link
- “header background color” – that’s the color of the main header bar at the top
- “header text color” – that’s actually the subtitle color
- “header text link color” – that would be the main title text
- “header text link hover color” – as above, when the mouse is over it
- “blog dropdown navigation background color” – that’s the color of the menu background when not selected
- “blog dropdown navigation background hover color” – the color of the menu background when selected
- “blog dropdown navigation link color” – the color of menu text when not selected
- “blog dropdown navigation background hover link color” – the color of menu text when selected
- “blog dropdown navigation border color” – doesn’t do anything
Finally, make sure that you save your changes!