I need a little help styling my menu bar.
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 |
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 { Experiment... Have fun. |
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.
|
it is a THEME option. in the backend go to Atahualpa Theme Options (or ATO for short)->Add HTML/CSS Inserts->CSS Inserts
|
That was very helpfull. Thank you. What command will center it horizontally
|
in the header configuration area, use %page-center instead of %pages
|
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; } |
Try this in place of what you have
HTML Code:
div#menu1 ul.rMenu { |
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; } |
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.
|
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?
|
Again Firebug to the rescue - Change padding as desired.
HTML Code:
#rmenu2 li { HTML Code:
#rmenu2 li { |
All times are GMT -6. The time now is 12:51 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.