Hi everyone! Just joined and this seems like an awesome forum! I'm truly a novice who is just flying by the seat of his pants. I read the stickies and have google searched trying to figure out how to do what I'm trying to do and simply can't figure it out. At this point I'm just frustraed. So.....I'm using Atahualpa 3.4.6 and I'm running the most recent WordPress 2.9. Basically, I just want to change what I guess would be called the background? so that its gray and fading from dark to light. Basically I want it to look like this. I want those grey horizontal columns on the side of the page. Here is what my site currently looks like. As you can see, its just plain white all the way out to the edge of the screen. Thanks in advance for any help you can give me.

Well you sure want to jump into more interesting things right off the bat. First of all to make a background color you can just go to ATO>Body, Text, & Links and set a background color. To do what you want requires using a background image like the attached, which fades from grey to white on the sides and use CSS to repeat in from the top to the bottom. Then you need to make sure you set your Atahualpa to a width that conincides with the background image and set the footer to sticky (This is an Atahualpa setting) so that short pages always stick to the bottom otherwise the image will be seen under the footer on short pages and not look so good. I'm throwing quite a bit at you because this can't be summed up easily but maybe you will get the idea.

Click image below to enlarge
Attachment 464

Thanks for the reply lmilesw! Ok, so I went in and changed the background color to grey. But now the center text background is grey as well and I don't want that. I kinda already figured out that I had to put in a jpg like that, but I have no idea how to code it so that it repeats and looks all nice and polished like it does on the website I posted above. I have no idea how to use CSS to repeat in from the top to the bottom. Any help w/ that would be awesome! Thanks again.

Here is a link to a video to show you what else you need to change. After you set the background as you did you now have to set a background for the center column (as see in video), sidebars, header, etc. so that the background color doesn't show through. Of course some may want to have a background image that shows though all the text so you would leave those blank. As for CSS and HTML related issues I often go to W3Schools for help with syntax. When you go to the site on the top of the menu to the left you will see Learn CSS for example. You can try out various pieces of code live.

You the man! I got it! although obviously I used a vertical one as opposed to a horizontal one like I originally wanted. When I tried to use a horizontal one it was off centered and I didn't seem to be able to center it. No matter, it looks good the way it is. Thanks again!

Actually, while I've got this going, I've got two other things I'd like to do and then I'm done. I'd like to make the widget title boxes red and then also round the top edges of them. Again, I have absolutely no clue how to do this, but if someone could help I would be beyond appreciative! Thanks again lmilesw.

Go to ATO>Style WIDGETS>Widget Title Box and add whatever code you want. If you want the background to be red you can just put

background-color:red;

You can of course use hex numbers for other colors. If you want the text to be red use

color:red;

If you want the border red use

border:1px solid red;

For the top rounded corners I would guess you could use

-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright: 10px;
border-radius-topleft: 10px;

All the extra code here is because different browsers use different implementations of the CSS for rounded corners. You can change the 10px to different values for a smaller or larger radius.

Ok, I got a new one.....I noticed while browsing my site on my iphone that the site looks pretty much just like it does on a full sized browser except for one thing. The center content area is more narrow and now my youtube videos look way too big and they are going to cover any column web banners on the right column. I looked at a few other blogs and the youtube videos appear the correct proportionate size. Does anyone know what you can do so that on a mobile browser like mobile safari you can get the columns to stay the same size on the regular browser and the youtube clips to look like they do normally. Thanks again for all of your help lmilesw!

You might want to try setting your site to a fixed 980px width which is the same as your header image. I don't know about configuring for iPhone but I'm going to look into it.

lol once again lmilesw....you are the man! youtube videos are now slightly outside of the center column but look way better....looks way better on the iphone. Thanks again.

Not sure how you embedded you videos but this is my current way which works real easy. Just click the share button in YouTube, copy the email link and paste between the embed shortcodes as below.

[embed width=640]http://www.youtube.com/watch?v=dMH0bHeiRNg[/embed]

Then you just change the width to what works for the spot it is going into. A whole lot easier than the embed code from YouTube.

Ok, so I got a new one.....I found a page menu bar that I would really like to incorporate into my site, but I have no idea how to do it. It would seem that I need to manipulate the CSS code to do this one by adding a jpg and doing some other stuff that I don't know. I gotta stay, I went to W3School and while its a little helpful its still a bit over my head I think. Thanks again, this forum rocks. Here is the page menu bar I'd like to incorporate.

update....using some code I found in another thread here I was able to partially get done what I'm looking to do. Now I just need the font to look the way I want and the bar to span the entire length of the website. Thanks in advance for any and all help.

Ok, so I'm looking at the site on internet explorer and there is all kinds of stuff wrong with it. Can anyone help me out with a couple of things? First, I figured out how to ad a web banner above the header and center it. However, the code I used to center it clearly does not work with internet explorer. It looks great on chrome. Also, in IE, the page menu bar is two lines. Lastly, I'm still looking for help on how to stretch the background image of my page menu bar across the whole site. Thanks everyone.

IE can be problematic with some CSS. As for the banner at the very top. Did you create a new widget area for that? If not how did you do it?

I did not create a widget for the banner at the top, I don't know how to do that...I simply inserted the banner in the header.php just before the header in the body of the file and then centered it w/ <center>. Like I said, I'm just kinda learning this stuff as I go along. Also, do you have any idea how to get the background image for my menu bar to carry acrosss the entire page? I can't figure it out. I need to get wordpress for dummies! lol

I never put anything in the core files such as header.php because if and when you upgrade to a newer Atahualpa version (using the technique in this forum) you would lose those changes. You could just try adding that to ATO>Add HTML/CSS Inserts>HTML Inserts: Body Top like I did in this screen shot to put a big Hello at the top of the page. The only way to have an image span the whole page is to put it in the background.

Awesome! thanks it worked! it is centered in IE now. Now the only thing I have to figure out how to do is get my page menu bar to look right.

What are you using for the menu bar?

I put this in the CSS inserts

div#menu1 ul.rMenu-hor li a:link,
div#menu1 ul.rMenu-hor li a:visited,
div#menu1 ul.rMenu-hor li a:active,
div#menu1 ul.rMenu-hor li a:hover{
background: #333 url(http://essence.ithemes.com/wp-conten...s/navbar.gif);
color: white;
height: 31px;
margin: 0px auto;
padding: 0px;
width: 100px;
text-align: center;
font-size: 1.1em;
}
div#menu1 ul.rMenu li.current_page_item a:visited,
div#menu1 ul.rMenu li a:hover {
background: #333 url(http://essence.ithemes.com/wp-conten...s/navbar.gif);
color: white;
height: 31px;
margin: 0px auto;
padding: 0px;
width: 100px;
text-align: center;
font-size: 1.1em;
}

The 'Home' and 'About' tabs look like I want, but not the entire bar.

I would have to play around with that code for awhile but try taking out the width attribute and just put the first CSS group in as below. One thing that jumps out at me is the link to the ithemes site for the image. I created a few px wide gradient and let it repeat across the menu bar which seemed to work.

div#menu1 ul.rMenu-hor li a:link,
div#menu1 ul.rMenu-hor li a:visited,
div#menu1 ul.rMenu-hor li a:active,
div#menu1 ul.rMenu-hor li a:hover{
background: #333 url(http://essence.ithemes.com/wp-conten...s/navbar.gif);
color: white;
height: 31px;
margin: 0px auto;
padding: 0px;
text-align: center;
font-size: 1.1em;
}

Unforunately that didn't work at all. It took away the background all together. I just can't figure out how to get it to extend the entire length of the bar. I mean I should just have to repeat the image but I just don't know how to do it and to do it properly so that the tabs are the appropriate length and the image background stays when you hover over each tab on the menu bar. Does that make sense?

Ok, so I used some code from another post from juggledad and I think I got my issue resolved as far as getting my background image to span the entire length of the page menu bar. Now, how do I get the actual tabs to be uniform in size w/ the rest of the menu bar and how do I get the text the color, size and location I want within each tab? Lastly, I'd like to do some shading like this in my center column. What do I need to do in order to get that kind of shading for my center column. Thanks again for all of the help! This is one of the best forums I've used for anything.

Hey Larry, how can I place a widget where I have the banner at the top of the site now? I want to place an ad rotating widget up there so I can rotate through several. Thanks

Take a look a ATO>Add New WIDGET AREAS

Figured it out! Thanks Larry!!! Hey let me ask you one more.....I still can't figure out how to color the background on my sidebar widgets. When you look at the section it says that they took that out of the atahualpa theme template. How can I manually go in and do it?

oh and one more.....do you have any idea how to do that shading of the center column like in the example I gave above? I like how it makes the center column pop off of the page. Thanks again.