Size of Header & Background Color
-
How can I change the size of header and the background color in total white?
The blog I need help with is: (visible only to logged in users)
-
Change the “x” in height and width to whatever dimension you want for the size of your header.
.header{ background-color: white; height: "x"px; width: "x"px; } -
Could you please demonstrate step by step? I can’t find the page that you mentioned. I use Highwind theme. Can I change the size of header with this theme? Thank you for your answer.
-
You would have to go to the css editor page.
Here’s the link that describes how to get there.http://en.support.wordpress.com/custom-design/editing-css/
Once you are there, I would insert the code above and it should work.
-
@peggy1225hkhk
It seems that you do not have a custom design upgrade. Here’s the link to the detailed Highwind theme description page http://theme.wordpress.com/themes/highwind/Custom Header & Background
Easily add your own Custom Header image under Appearance → Header or Background pattern by following these simple instructions: Appearance → Background.Editing any template is not possible. This is a multi-user blogging platform. That means all blogs wearing the same theme are using the same template which only Staff can access and edit as every edit affects every blog wearing the same theme. You either purchase an annually renewable custom design upgrade so you can edit only the appearance or you accept the themes as is.
See here for details on purchasing the annually renewable custom and CSS editing:
Custom design – Frequently Asked Questions
http://en.support.wordpress.com/custom-design/#frequently-asked-questions
http://en.support.wordpress.com/custom-design/
http://en.support.wordpress.com/custom-design/editing-css/
http://en.support.wordpress.com/custom-design/custom-fonts/If you purchase the upgrade than use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can copy and paste your text into a thread that will appear in the CSS Forum where you will get the help you need.
-
I have custom design upgrade now. I inserted the code but it doesn’t work. The size of the header keeps unchanged. I would like to change the height of the header less 1/3. Moreover, the background-color is still grey instead of white. Please help.
-
I’m not seeing any grey in your header, are you?
This is what I see in Firefox 30: https://cloudup.com/c-lDXQeZN5u
While it looks like you added some CSS to change the header background colour, there isn’t any size specification. Try changing this:
.header { background-color: white; }to this:
.header { background-color: #ffffff; min-height: 150px; }Let me know how it goes.
-
Can I adjust the height of header less than 150px? Actually, I would like to change the background color of the website instead of header background-color. The background-color of header is fine now. The background color of website looks grey instead of white although I set it in white. How to change into white color? Moreover, how to change the color of site title? Thank you so much for your reply.
-
I would like to have the background of all pages of the website in white. How to make it?
-
Can I adjust the height of header less than 150px?
It looks like you already figured out how to do this in your custom CSS, by changing the number 150 to 100 in the CSS I provided earlier.
I would like to have the background of all pages of the website in white. How to make it?
I used a browser inspector to find the element that is set to light grey – it’s the class outer-wrap. You can target it with CSS like this to turn it white:
.outer-wrap { background-color: #ffffff; }Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
If CSS is new to you, here are some resources for learning more about it:
-
Moreover, how to change the color of site title?
Again, using a browser inspector, I can see that the site title has the class site-title, so it can be targetted like this:
.site-title { color: #bb00bb; }Change the colour code to anything you like.
Chrome has a built-in browser inspector and you can learn how to use it in the guides I sent above to make additional CSS adjustments.
-
Thank you so much. You are very helpful. Can I change the color of tagline? I would like to make the height of header shorter but I fail. Is there any minimum height?
-
Can I change the color of tagline?
Sure. You can see with a browser inspector that its class is site-description, so you can target it with CSS the same way you did for the site title.
-
I would like to make the height of header shorter but I fail. Is there any minimum height?
I see that you’ve tried to make the header only 10px high:
min-height: 10px;That won’t work, since it isn’t high enough to accommodate your site title and tagline, which are contained inside the header. It also needs to accommodate the height of the menubar.
Try making these adjustments to reduce the amount of padding within the header:
.header { background-color: #ffffff; min-height: 80px; padding-bottom: 5px; padding-top: 50px; }That’s about as short as the header can get while still looking balanced and accommodating all the elements it contains.
-
You should also test the header at different screen sizes to make sure it still works responsively. You may need to wrap it in a media query. Here’s a resource help with those adjustments:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/
-
I would like to change the color of tagline but fail. What’s wrong with the code?
How to change the size and color of the options (the top row of the website)?
Thank you so much. -
-
I would like to change the color of tagline but fail. What’s wrong with the code?
You’ve used this:
.tagline { color:#a124f6; }But as I mentioned earlier, the class for the tagline is site-description, so try this instead:
.site-description { color:#a124f6; } -
Can I have more fonts for Chinese words?
The specialty fonts available are the ones you’ll see in the Customize > Fonts dropdown menu.
If you’d like to specify a common system font that Chinese-speaking viewers would likely have installed on their machines, you could also specify that in your CSS. For example, an equivalent to a common pre-installed font like Verdana or Arial. If you’d like to do that, let me know and I can help you with the code.
-
How to change the size and color of the options (the top row of the website)?
Try this CSS, adjusting the size and colour as you like:
.highwind-navigation a { color: #bb00bb; font-size: 12px; }
- The topic ‘Size of Header & Background Color’ is closed to new replies.
WordPress.com Forums 