[SOLVED] Header Area Background
Is it possible to change the color of the header area without loading an image?
I'm trying to optimize my site for speed to I would prefer coloring it through html. Thanks! |
If you just want a solid color just use the %bar1 or %bar2 and style it as you wish.
|
or add to CSS Inserts
HTML Code:
#header {background: #00ffff !important;} |
Hi Guys!
Thanks for both tips. Though they both work, how do I apply the color to go past the margins and paddings? Here's my site http://www.seotaoist.com/ and I want the header area all blue without any white spaces whatsoever. Also is it possible to extend my menu bar's yellow stripe across the whole page? Moving out to the whole background? Thanks! |
You will probably have to play with padding on #header. As for extending the yellow menu bar you will have to create a background image that matches up with the menu bar both in alignment and color and put it in ATO>Body, Text, & Links using the example for setting a background image as a guide. The image could be just a few pixels wide and and you would add repeat-x to repeat it horizontally. Is that enough info to get you started or do you need more detail?
|
Hi Larry!
Thanks for this! Though I would still need your help to kind of guide me step by step especially with where I'm supposed to place the code and what code to place. Hehe Super thanks! Jurgen |
You first have to create the background image and then you place it in ATO>Body, Text & Links. How much do you know about creating background images, repeating images on the x and y axis and CSS?
|
Well I'd say i'm quite zero with CSS and pretty basic html.
|
Let's say I already have a 30x30 px yellow image uploaded unto my server.
Then I go to ATO > Body Text and Links and upload it as a background url(so and so) how do I make it so that it will be the same width and alignment with my page menu bar? Given that, how do I make my page menu bar's background color (yellow) override the padding and margins of the center layout? I wanted this so that the whole yellow stripe is accross the whole page. In addition I wanted also to have the header area all blue without white spaces. |
I don't have all this stuff locked in my head either. In this case though I want to take your 30px square image and have it repeat horizontally starting at the left and a certain number of pixels down from the top. We are going to use the background shorthand property which just means the background color, image, repeat, and position are all on one line. Soooo
|
Hi Larry,
I've tried it and it didn't seem to work. Again my site is at seotaoist.com so that you can see what I mean. Also here's the code on ATO > Body Text and Links HTML Code:
font-family: helvetica, verdana, arial, sans-serif; background: #3DC3F2; -> this is the blue background color. I need the yellow stripe to cut accross and over it. Thanks! |
What happened was that the yellow stripe came out but then the blue background was gone.
|
2 Attachment(s)
Disregard my previous messages. Here's a clearer explanation of what happened.
Here's the code I have on my ATO > Body Text and Links: HTML Code:
font-family: helvetica, verdana, arial, sans-serif; HTML Code:
background: #3DC3F2; HTML Code:
background: url(/wp-content/themes/atahualpa353/atahualpa353/images/yellow-stripe.gif) repeat-x 0 137px; Also the yellow strip didn't "connect" with the page menu bar. I believe this is because of paddings/margins on the header area that elicits the white spaces on the left and right area. Check out a mock layout I made of how I wanted my blog to look (see attached mockup) :( Jurgen |
Sorry... I forgot about the background color. The background line has to be only one line or you have to use separate selectors. First here is what you should use.
HTML Code:
background:#3DC3F2 url(/wp-content/themes/atahualpa353/atahualpa353/images/yellow-stripe.gif) repeat-x 0 137px; HTML Code:
background-image: url(/wp-content/themes/atahualpa353/atahualpa353/images/yellow-stripe.gif); |
Hi Larry!
That worked out great. Thanks! SEOTaoist.com. Moving forward, to complete my design, how do I change the header's background to blue? Also to make my page menu bar connect with the yellow background? |
Jurgen... I really love to help people out but it seems like I am building your site for you. You REALLY need to check out W3Schools.com and get the Firebug extension for Firefox then you will know what CSS does what and can determine selectors so you can apply it properly. This is a challenge to see if you can at least come up with some ideas as to what you should do next.
|
That's alright Larry! I understand!
Will do my best to figure this out. :) Super thanks for all the help! |
Hi Larry!
Good news! I was able to improve my design from last time and at the same time I was able to use as much html and css as I can to achieve this: http://www.seotaoist.com. Only problem remains is that I used this code: HTML Code:
#header { Anything here I'm missing? |
It looks like it is applying to all pages for me.
|
Really?
I'm referring to the background image (black bar) behind the menu bar. It seems to only be visible on my homepage. |
Use the full path to the background gif.
|
By the way guys! Thanks so much for the help and the directions.
Learned a lot from this! |
All times are GMT -6. The time now is 06:21 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.