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 » Page & Category Menu Bars »

[SOLVED] Adding a gradient to a horizontal menu bar


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 Aug 28, 2010, 11:35 AM
sar
 
17 posts · Aug 2010
I am hoping that someone could tell me how to add a gradient to my category bar.

Thanks!
  #2  
Old Aug 29, 2010, 04:45 AM
juggledad's Avatar
juggledad
 
19,974 posts · Mar 2009
OSX 10.6.8/10.7.3 WP 2.8.x/2.9.x/3.x Atahualpa 3.5.x/3.7.x Safari 5.x Firefox 11 XP
do a forum search for 'juggledad colored cheat sheet' for a starting point
  #3  
Old Aug 29, 2010, 08:42 PM
sar
 
17 posts · Aug 2010
Juggledad - Thanks for pointing me to the CSS cheat sheet. However, I still do not know the specific info to add for a gradient. Any help you could provide would be greatly appreciated.
Thanks again!
  #4  
Old Aug 30, 2010, 03:59 AM
juggledad's Avatar
juggledad
 
19,974 posts · Mar 2009
OSX 10.6.8/10.7.3 WP 2.8.x/2.9.x/3.x Atahualpa 3.5.x/3.7.x Safari 5.x Firefox 11 XP
You need to create the gradient as an inane and use it as a background image
  #5  
Old Aug 30, 2010, 04:21 PM
sar
 
17 posts · Aug 2010
Thanks Juggledad. I am a bit new to this and I still cannot figure out which file to add the background image that I created to or what to add. I created a background in illustrator and put it in my images folder in atahualpa theme. I don't know what or where to put in the style sheet.
Thanks for your help!
  #6  
Old Sep 1, 2010, 05:49 AM
juggledad's Avatar
juggledad
 
19,974 posts · Mar 2009
OSX 10.6.8/10.7.3 WP 2.8.x/2.9.x/3.x Atahualpa 3.5.x/3.7.x Safari 5.x Firefox 11 XP
use the cheat sheet to see what items effect what part of the menu. then go to w3schools.com/css and read about the background syntax
  #7  
Old Sep 1, 2010, 05:10 PM
sar
 
17 posts · Aug 2010
Juggledad,
Still having trouble. I have pasted the url in the css below in each of the category options (separately) and nothing happened. Where do I put the url with the image of my gradient. I went to W3 (I have been using them). Still don't know what I am doing wrong. Can you give me a short step-by-step instruction?


/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 40px;
margin-top:0px;
background: gray;
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background: gray;
border: none 0px;
}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li a:visited,
ul.rMenu li {
background: gray !important;
color: #000000 !important;
}
/* ================================================ */
/* Category menu background */
/* ================================================ */
div#menu2 {
height: 40px;
margin-top:0px;
}
/* ================================================ */
/* Category Menu item's background and border */
/* ================================================ */
div#menu2 ul.rMenu {
height: 60px;
border: none 0px;
}
/* ================================================== */
/* Category Menu item */
/* ================================================== */
#menu2 ul.rMenu li a:link,
#menu2 ul.rMenu li a:hover,
#menu2 ul.rMenu li a:active,
#menu2 ul.rMenu li a:visited,
#menu2 ul.rMenu li {
color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
  #8  
Old Sep 1, 2010, 05:27 PM
juggledad's Avatar
juggledad
 
19,974 posts · Mar 2009
OSX 10.6.8/10.7.3 WP 2.8.x/2.9.x/3.x Atahualpa 3.5.x/3.7.x Safari 5.x Firefox 11 XP
use the
HTML Code:
background: url(http://yourdomain.com/path/to/your/image.jpg) repeat-x
syntax
  #9  
Old Sep 4, 2010, 09:17 PM
sar
 
17 posts · Aug 2010
Thank you!! Finally got it!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
extra horizontal menu bar for subpages? bajads Page & Category Menu Bars 7 Dec 22, 2010 07:51 AM
How to put Gradient Color, instead of solid color, in horizontal Page/Catgry Menu Bar rhythm Header configuration & styling 4 May 17, 2010 12:15 PM
Gradient in Page Menu Bar and Separation Bars clayphillips Page & Category Menu Bars 12 Feb 10, 2010 05:48 AM
[SOLVED] Ordering pages for horizontal nav bar and adding space before and after the cjceer Page & Category Menu Bars 2 Nov 6, 2009 09:29 AM
NAVT plugin and horizontal menu bar coldar75 Plugins & Atahualpa 1 Jul 7, 2009 08:47 AM


All times are GMT -6. The time now is 12:33 PM.


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