Highwind Theme – Changing header size and sidebar colour
-
I’m using the Highway theme and would 1) Like to change the header height (make it shorter)and 2) Change the colour of the sidebar (I can’t seem to do this in Customize > Colours).
Does anyone know what I’d need to add to the ‘Custom CSS’ box to achieve this?
The blog I need help with is: (visible only to logged in users)
-
Ah ha! I have managed to change the sidebar colour as I found someone else who had a similar issue, but any help to change the header would be much appreciated.
-
Glad you figured out the sidebar colour — posting the code here in case it helps anyone else finding this thread. :)
#secondary { background-color: #ffffff; }This should reduce the top padding on the header and give it the same amount of space as there is below the tagline.
.header { padding-top: 5.5em; }Be sure to test this on different screen sizes; if you want it to apply only to specific sizes, you may need to add media queries.
You can learn more about using media queries that target certain screen sizes here:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/
-
Thank you so much for your help – this is perfect, and I have tested it on different devices.
Is it also possible to change the overall size of the fonts (e.g. header font, post headers, body font)? It’s looking more how I’d like it, but I prefer the font to be slightly smaller (e.g. if I zoom out on my browser twice).
-
Thank you so much for your help – this is perfect, and I have tested it on different devices.
Excellent! Looks good.
Is it also possible to change the overall size of the fonts (e.g. header font, post headers, body font)? It’s looking more how I’d like it, but I prefer the font to be slightly smaller (e.g. if I zoom out on my browser twice).
The easiest way to change the relative font sizes of all the fonts is to use the Customizer’s Fonts panel.
If you just want to reduce the font of everything slightly, you could try:
body { font-size: 90%; }If you want more precise control, use a browser inspector to find and target each element separately.
Learning how to target your site’s CSS with a browser inspector is very powerful. Here are some very helpful posts to get you started:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
-
-
You’re very welcome! If you need help with anything else, feel free to start a new thread.
- The topic ‘Highwind Theme – Changing header size and sidebar colour’ is closed to new replies.