Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Need Help!


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Apr 14, 2010, 11:52 AM
greenterp
 
16 posts · Apr 2010
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.
  #2  
Old Apr 14, 2010, 12:27 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
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
__________________
~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.

Last edited by lmilesw; Sep 1, 2013 at 02:14 PM.
  #3  
Old Apr 14, 2010, 01:14 PM
greenterp
 
16 posts · Apr 2010
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.
  #4  
Old Apr 14, 2010, 02:13 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #5  
Old Apr 14, 2010, 03:01 PM
greenterp
 
16 posts · Apr 2010
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.
  #6  
Old Apr 14, 2010, 03:18 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
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
HTML Code:
background-color:red;
You can of course use hex numbers for other colors. If you want the text to be red use
HTML Code:
color:red;
If you want the border red use
HTML Code:
border:1px solid red;
For the top rounded corners I would guess you could use
HTML Code:
-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.
__________________
~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.
  #7  
Old Apr 15, 2010, 12:26 PM
greenterp
 
16 posts · Apr 2010
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!
  #8  
Old Apr 15, 2010, 12:53 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #9  
Old Apr 15, 2010, 02:21 PM
greenterp
 
16 posts · Apr 2010
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.
  #10  
Old Apr 15, 2010, 02:32 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
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.
HTML Code:
[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.
__________________
~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 Apr 16, 2010, 05:48 PM
greenterp
 
16 posts · Apr 2010
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.

Last edited by greenterp; Apr 16, 2010 at 07:20 PM.
  #12  
Old Apr 22, 2010, 06:29 PM
greenterp
 
16 posts · Apr 2010
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.
  #13  
Old Apr 22, 2010, 06:54 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
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?
__________________
~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.
  #14  
Old Apr 22, 2010, 08:03 PM
greenterp
 
16 posts · Apr 2010
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
  #15  
Old Apr 22, 2010, 08:18 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #16  
Old Apr 22, 2010, 08:39 PM
greenterp
 
16 posts · Apr 2010
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.
  #17  
Old Apr 22, 2010, 08:46 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
What are you using for the menu bar?
__________________
~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.
  #18  
Old Apr 22, 2010, 09:00 PM
greenterp
 
16 posts · Apr 2010
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.
  #19  
Old Apr 22, 2010, 09:20 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
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.
HTML Code:
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;
}
__________________
~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 Apr 24, 2010, 08:18 AM
greenterp
 
16 posts · Apr 2010
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?
  #21  
Old Apr 25, 2010, 12:54 PM
greenterp
 
16 posts · Apr 2010
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.
  #22  
Old Apr 26, 2010, 04:45 PM
greenterp
 
16 posts · Apr 2010
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
  #23  
Old Apr 26, 2010, 04:49 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
Take a look a ATO>Add New WIDGET AREAS
__________________
~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.
  #24  
Old Apr 26, 2010, 05:34 PM
greenterp
 
16 posts · Apr 2010
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?
  #25  
Old Apr 26, 2010, 05:37 PM
greenterp
 
16 posts · Apr 2010
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.

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


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