Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Header Area Background


  #1  
Old Aug 13, 2010, 10:50 PM
Jurgen Estanislao
 
76 posts · May 2010
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!
  #2  
Old Aug 13, 2010, 11:11 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
If you just want a solid color just use the %bar1 or %bar2 and style it as you wish.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Aug 14, 2010, 06:00 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
or add to CSS Inserts
HTML Code:
#header {background: #00ffff !important;}
(you might want to change the color to something else
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Aug 14, 2010, 09:47 AM
Jurgen Estanislao
 
76 posts · May 2010
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!
  #5  
Old Aug 14, 2010, 11:27 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Aug 14, 2010, 06:10 PM
Jurgen Estanislao
 
76 posts · May 2010
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
  #7  
Old Aug 14, 2010, 08:20 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Aug 14, 2010, 08:32 PM
Jurgen Estanislao
 
76 posts · May 2010
Well I'd say i'm quite zero with CSS and pretty basic html.
  #9  
Old Aug 14, 2010, 08:42 PM
Jurgen Estanislao
 
76 posts · May 2010
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.
  #10  
Old Aug 14, 2010, 09:22 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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
  • Go to ATO>Body, Text, & Links and look at the example
    HTML Code:
    background:url(/~thehapq1/wp-content/themes/atahualpa353/images/backgr.gif) repeat top left;
    We have to modify it for your image but it already has the proper path in the example for your site so all you have to do is replace the image name with the name of your yellow square.
  • Change the image, repeat and position such as the following and tweak as needed.
    HTML Code:
    background:url(path_to_image) repeat-x 0 100px;
    The repeat-x says repeat horizontally, The 0 means 0 pixels from the left side and the 100px means 100 pixels down from the top.
  • Now tweak the 100px setting until the yellow bar aligns with the menu bar.
You can play around with this particular function at W3Schools.com
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Aug 14, 2010, 10:39 PM
Jurgen Estanislao
 
76 posts · May 2010
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;
font-size: 16px;
color: #000000;
background: #3DC3F2;
background: url(/wp-content/themes/atahualpa353/atahualpa353/images/Background-Yellow-Stripe.gif) repeat-x 0 100px
padding-top: 20px; padding-bottom: 20px;

background: #3DC3F2; -> this is the blue background color. I need the yellow stripe to cut accross and over it.

Thanks!
  #12  
Old Aug 14, 2010, 10:45 PM
Jurgen Estanislao
 
76 posts · May 2010
What happened was that the yellow stripe came out but then the blue background was gone.
  #13  
Old Aug 14, 2010, 11:03 PM
Jurgen Estanislao
 
76 posts · May 2010
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;
font-size: 16px;
color: #000000;
background: #3DC3F2;
background: url(/wp-content/themes/atahualpa353/atahualpa353/images/yellow-stripe.gif) repeat-x 0 137px;
padding-top: 20px; padding-bottom: 20px;
This is the blue background that I want to retain:
HTML Code:
background: #3DC3F2;
Here is the yellow strip code that I inserted:
HTML Code:
background: url(/wp-content/themes/atahualpa353/atahualpa353/images/yellow-stripe.gif) repeat-x 0 137px;
Instead of having the yellow stripe go over the blue background, the background went all white but displayed the yellow stripe (see attached screenshot).

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
Attached Thumbnails
Click image for larger version

Name:	What Happened.png
Views:	599
Size:	203.1 KB
ID:	681  Click image for larger version

Name:	Layout.png
Views:	551
Size:	7.7 KB
ID:	682  
  #14  
Old Aug 15, 2010, 06:09 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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;
As you can see the background color, image, repeat and position are all on one line and I would add they need to be in a particular order as shown on the W3Schools.com site. If you want or need to have them on separate lines for some reason you would use separate selectors such as the following.
HTML Code:
background-image: url(/wp-content/themes/atahualpa353/atahualpa353/images/yellow-stripe.gif);
background-color: #3DC3F2;
background-position: 0 137px;
background-repeat: repeat-x;
What happened in your case was you had two lines with just background and the first one was taking precedence.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #15  
Old Aug 15, 2010, 07:13 PM
Jurgen Estanislao
 
76 posts · May 2010
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?
  #16  
Old Aug 15, 2010, 08:05 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #17  
Old Aug 15, 2010, 08:07 PM
Jurgen Estanislao
 
76 posts · May 2010
That's alright Larry! I understand!

Will do my best to figure this out. Super thanks for all the help!
  #18  
Old Aug 16, 2010, 09:52 AM
Jurgen Estanislao
 
76 posts · May 2010
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 {
background-color: #E1ECF2 !important;
background-image: url(wp-content/uploads/images/black-background.gif) !important;
background-repeat: repeat-x !important;
background-position: 0 140px !important;
}
...and it only applies to the homepage. My style doesn't apply to others.

Anything here I'm missing?
  #19  
Old Aug 16, 2010, 03:39 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
It looks like it is applying to all pages for me.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #20  
Old Aug 16, 2010, 05:04 PM
Jurgen Estanislao
 
76 posts · May 2010
Really?

I'm referring to the background image (black bar) behind the menu bar. It seems to only be visible on my homepage.
  #21  
Old Aug 16, 2010, 05:43 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Use the full path to the background gif.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #22  
Old Aug 17, 2010, 10:22 PM
Jurgen Estanislao
 
76 posts · May 2010
By the way guys! Thanks so much for the help and the directions.

Learned a lot from this!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Dashed Lines in Header area / Page menu bar area jstech Header configuration & styling 5 Apr 29, 2010 07:46 AM
header image as background image for logo area soni Atahualpa 3 Wordpress theme 8 Apr 2, 2010 03:05 AM
[SOLVED] Removing White Background in Header Area Netforest Header configuration & styling 2 Oct 23, 2009 01:15 PM
Background Images in Header Area dwbaylor Header configuration & styling 3 May 3, 2009 04:48 PM
Putting a image background in the header's logo area kirinafa Header configuration & styling 2 Feb 18, 2009 04:08 PM


All times are GMT -6. The time now is 04:38 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.