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 »

I need a little help styling my 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 Apr 15, 2011, 06:30 PM
John Berry's Avatar
John Berry
 
7 posts · Mar 2011
Let me start by saying that I love this theme. I find almost every aspect custumizable. I am sure they all are I am just a noob and am learning as I go along. I have figured out how to put links into the menu bar however I cannot seem to find where it is that I customize the bar itself at. I want to change the size of the bar and control the background. I also want to center it.

The website I am working on is www.johnberrysculptures.com
  #2  
Old Apr 15, 2011, 08:06 PM
lmilesw's Avatar
lmilesw
 
10,082 posts · Jul 2009
Central New York State USA
The styling of the bar is done with CSS. You have to determine the selectors (You can use Firebug with Firefox for that) and then put the necessary CSS in ATO>Add HTML/CSS Inserts>CSS Inserts. That is easy to write in a few words but will probably take awhile to understand if you have never worked much with CSS.

A search through the forum should give you a start as well as Juggledad's cheat sheet for menus. An example would be
HTML Code:
#rmenu2 {
    background: #f0f0f0;
    padding: 20px 0;
    font-size: 20px;
}
Which will give you a gray background, 20px of padding on the top and bottom, a font size of 20px.

Experiment... Have fun.
__________________
~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 Apr 18, 2011, 03:32 PM
John Berry's Avatar
John Berry
 
7 posts · Mar 2011
I am learning css a little at a time. Please tell me this, what is the document name that I should be opening up then? Assuming I am using the way wordpress set it up by default.
  #4  
Old Apr 18, 2011, 05:22 PM
juggledad's Avatar
juggledad
 
22,166 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
it is a THEME option. in the backend go to Atahualpa Theme Options (or ATO for short)->Add HTML/CSS Inserts->CSS Inserts
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #5  
Old Apr 19, 2011, 03:20 AM
John Berry's Avatar
John Berry
 
7 posts · Mar 2011
That was very helpfull. Thank you. What command will center it horizontally
  #6  
Old Apr 19, 2011, 04:41 AM
juggledad's Avatar
juggledad
 
22,166 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
in the header configuration area, use %page-center instead of %pages
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #7  
Old Apr 19, 2011, 01:20 PM
John Berry's Avatar
John Berry
 
7 posts · Mar 2011
It worked but my border disappeared. Here is the code I have in there. What do you think?

#rmenu2 {
background: #c7ccba;
border: 4px solid;
border-color: #000;
padding: 4px;
}
  #8  
Old Apr 19, 2011, 05:07 PM
juggledad's Avatar
juggledad
 
22,166 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Try this in place of what you have
HTML Code:
div#menu1 ul.rMenu {
     background: none repeat scroll 0 0 #C7CCBA !important;
    border: 4px solid #000000;
    padding: 4px;
}
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #9  
Old Apr 19, 2011, 06:29 PM
John Berry's Avatar
John Berry
 
7 posts · Mar 2011
Almost there. At first it didnt work, but then I added the important tag to all the lines of code you wrote and it worked. Only problem is there is still a dashed line outside of the black border. Here is what I have

div#menu1 ul.rMenu {
background: none repeat scroll 0 0 #C7CCBA !important;
border: 4px solid #000000 !important;
padding: 4px !important;
}
  #10  
Old Apr 19, 2011, 07:00 PM
juggledad's Avatar
juggledad
 
22,166 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
This is where you use FireBug in FireFox to examine the element and find out what CSS is causing the dashed line then shut it off.
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #11  
Old Apr 27, 2011, 05:50 PM
John Berry's Avatar
John Berry
 
7 posts · Mar 2011
OK I figured it out thank you very much. I have one more question about my menu bar if you could help me out it would be awesome. How do I get more padding between my menu options?
  #12  
Old Apr 27, 2011, 08:33 PM
lmilesw's Avatar
lmilesw
 
10,082 posts · Jul 2009
Central New York State USA
Again Firebug to the rescue - Change padding as desired.
HTML Code:
#rmenu2 li {
    padding: 0 5px;
}
And if you don't want the white background to show on hover use
HTML Code:
#rmenu2 li {
    padding: 0 5px;
    background: #c7ccba !important;
}
__________________
~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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Page menu bar: Styling sub menus unelma Page & Category Menu Bars 5 Nov 16, 2010 12:15 AM
[SOLVED] Styling submenus different from menu bar emanuel1969 Page & Category Menu Bars 24 May 11, 2010 12:45 PM
[SOLVED] Styling Menu Bar gregrunco Header configuration & styling 2 Feb 28, 2010 09:54 AM
Page Menu Bar Styling chair Header configuration & styling 1 Aug 1, 2009 06:06 AM


All times are GMT -6. The time now is 11:56 PM.


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