Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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.


  #1  
Old Apr 15, 2011, 07: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, 09:06 PM
lmilesw's Avatar
lmilesw
 
10,176 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, 04: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, 06:22 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
it is a THEME option. in the backend go to Atahualpa Theme Options (or ATO for short)->Add HTML/CSS Inserts->CSS Inserts
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Apr 19, 2011, 04: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, 05:41 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
in the header configuration area, use %page-center instead of %pages
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Apr 19, 2011, 02: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, 06:07 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Apr 19, 2011, 07: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, 08:00 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Apr 27, 2011, 06: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, 09:33 PM
lmilesw's Avatar
lmilesw
 
10,176 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 01:15 AM
[SOLVED] Styling submenus different from menu bar emanuel1969 Page & Category Menu Bars 24 May 11, 2010 01:45 PM
[SOLVED] Styling Menu Bar gregrunco Header configuration & styling 2 Feb 28, 2010 10:54 AM
Page Menu Bar Styling chair Header configuration & styling 1 Aug 1, 2009 07:06 AM


All times are GMT -6. The time now is 10:35 PM.


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