HowTo: Add some styling to the page menu bar
2 Attachment(s)
Update 05 Dec 2011: The css has been modified to work better with pages that have several levels of sub-pages. In my previous version, if a page was active, then all sub-pages in the menu were highlighted as active pages. This modified version should work for any number of sub-page levels. (Thanks to mimi for pointing this out)
This HowTo is intended to help you style the page menu bar with color gradients. Two examples are included for a light theme and dark theme. You don't have to follow my examples exactly, they're guidelines from which you can work. Universal steps Style & edit HEADER AREA Make sure you have the page menu bar enabled; Configure Header Area should include %pages MENU 1 (Page Menu) (Assuming everything on the page is at its default setting)
Example 1: Light theme http://forum.bytesforall.com/attachm...1&d=1317236845 MENU 1 (Page Menu)
Add HTML/CSS Inserts - Adjustable styles are marked by comments Code:
/* The main horizontal bar's background */ http://forum.bytesforall.com/attachm...1&d=1318359127 MENU 1 (Page Menu)
Add HTML/CSS Inserts - Adjustable styles are marked by comments Code:
/* The main horizontal bar's background */ Width of Menu Bar: You can control the width of the menu bar by including "width:80%;" in the CSS for #menu1 ul.rMenu-hor and #menu1 ul.rMenu-ver. Of course, change 80% to whatever width you prefer, or even specify something like 800px. You can align the bar left, center, or right. Below are some example CSS edits for each alignment. Choose one, don't blindly copy the whole thing. (Note that this is different from specifying %page-center or %page-right in the Atahualpa options for Configure Header Area. In that case the bar extends the entire width and only the menu items are shifted. You can actually use this tip in conjunction with that setting to move both the shrunk bar and the menu items around.) Code:
/* Shrink width of bar and align left, right, or center - choose only one! */ |
man, thank you so very much! This is axctly what i was looking for. Ill make sure i donate something to you as soon as i have enough funds. thnx bro :) ;)
|
Glad the guide is being found useful. I appreciate the feedback. No need for donations to me, but if you're happy with Atahualpa, use the donate link above to tell the dev and mods thanks!
|
Fabulous, just what I needed. Thank You!:)
|
What would be the code to change the page bar default color
background: #ffffff; to an image, such as a gradient of a controlled height and width, left aligned? I need it to be 30px high and 900px wide. |
Quote:
|
First of, thank you for the reply. They are always seriously appreciated.
My question may not have been clear. I did see the information you suggested but I wanted to use an image, instead of code, to generate the bar, so that I could control the width of the bar, rather than allow it to span the width of the entire screen, which is what the code version does. But, I did figure out an alternative that was so simple I amazed myself. I dropped %bar1 from the ATO, leaving just %image. In Photoshop, I simply put the gradient bar image into the header image. See the site under construction (and note the green gradient bar) at a temporary development server address: http://75.127.110.64/~seachang/ That will satisfy what I need for this project but I am still wanting to know what code would make the bar as requested, as an independent image that will replace the current "background: #ffffff;" Thanks. |
1 Attachment(s)
Hi mdmower, thanks for the awesome tutorial. I just have one question... (there's always one.) I'd like my page menu bar to extend to the edges of the screen, like my header, and as per Ata site http://crimsonleaf.co.uk/.
I've attached a screengrab of what I've achieved so far. The full width header was achieved with a repeated background gradient jpg in 'Style & edit HEADER AREA > Logo area: Styling', and I used the same jpg as the overall site background, repeated horizontally only. I thought maybe I could use the same trick for the menu bar, e.g. use a gradient image for the menu bar (which is the bit I haven't figured out how to do yet), and then just edit the gradient image I used for the site background to include the menu bar as well? I you have any ideas as to how I could a). extend the current coded menu bar to the screen edge, or b). re-create the menu bar with a gradient jpg/gif instead, I'd really appreciate it! Thanks. :-) |
Hi joe hark and Hells Bells,
This note is just to let you both know that I haven't abandoned this thread. I am in the middle of comprehensive exams for my doctoral degree. I do hope to look into your inquiries and further the examples from post one. As for a time frame, it's difficult to say, but hopefully within a couple of weeks. In the meantime I have no objection to anyone else chiming in with ideas. I hope you understand. Matt |
Here is a very simplistic answer as the complete answer would take bit to clarify. Hopefully this will get you started.
Background images can be used for just the menu itself or can be added to the background image while setting the menu to transparent. Then you might add a hover effect via CSS. Using the background for for the body is for circumstances where you want a full width "menu bar" or design such as here. To have the full width menu extend like the full width header for instance you would just incorporate the two into one image that is perhaps 10px wide by as high as the header and menu combined and then repeat it horizontally. Please... if that is not clear follow up with questions. |
Ok, I will try to chime in quickly:
Quote:
Code:
div#menu1 { margin-top: -30px !important; } I suspect that'll be enough to look right, but you should ideally go through and set transparent background in appropriate places. You might also need to check z-indexes. This I don't have time for right now, but hopefully this should point you in the right direction. |
You should also include other CSS like below. The relative is something I add to most CSS I am using for positioning for various reasons and the height is so you don't have a gap where the menu was.
HTML Code:
div#menu1 { |
This is really useful, but I am missing something. Where does this code get inserted?
I am in Style & edit HEADER AREA and have %pages enabled. In the top section there are references below the list of %items to "You can style and configure these header items individually further down on this page, and on the menu tabs Page Menu Bar and Category Menu Bar." However there is no where obvious to insert this css code. I must be missing it... Thanks (..and good luck with exams.) |
Quote:
|
Ah Ah, found it. Thanks
Anyway, you should be studying!!! |
Quote:
You can modify the width simply by putting Code:
width: 900px; In the end your css code would look like: Code:
#menu1 ul.rMenu-hor, To use a gradient image replace all of the 'background:' style modifiers in '#menu1 ul.rMenu-hor' and '#menu1 ul.rMenu-ver' with just one background-image line: Code:
background-image: url('/wp-content/uploads/images/gradient_bar.png') !important; Code:
background-image: none !important; In the end your code will look something like this: Code:
#menu1 ul.rMenu-hor, |
Thank you for this tweak, very much appreciated. :)
|
Thank you for this. Exactly what I needed for artofnlp.info, and worked perfectly first time :)
|
@mdmower, in case you are interested in updating this HowTo, to make it work with the powerful built in WordPress Menus, I have posted something over here.
Your styling codes are really great and appreciated, but they do not work well with WordPress Menus. I think it shouldn't be too hard for someone like you to amend it. |
Quote:
I would appreciate feedback from anyone who tests this, to make sure it works outside of my own limited testing. The ordering of the CSS blocks is important though, so first test with the example CSS exactly in-tact, then make changes as desired. |
Just re-discovered this post and wanted to say thanks, albeit rather belated! In the end I went for a different approach with the project I mentioned, but am now working on another where your advice will come in equally useful - thank you! :)
|
This is what I use when I want to have an image behind the links in the menu bar and to have the colour behind the links trasnsparent:
div#menu1 { background-image:url(http://domainname.com/menu.jpg); background-repeat:no-repeat; height:47px; border: 0; } div#menu1 ul.rMenu { background:transparent; } ul.rMenu li a:link, ul.rMenu li a:hover, ul.rMenu li a:active, ul.rMenu li a:visited, ul.rMenu li { background: none !important; } You can see it at work here: http://bonadeacafe.ca/ |
Where do we change this CSS? I would like to customize the header area on http://www.northshoreinline.com
|
add css to the 'ato->Add HTML/CSS Inserts->CSS Inserts' option
|
I guess I'm blind, I have no idea where to find this "ato->Add HTML/CSS Inserts->CSS Inserts"
|
All times are GMT -6. The time now is 12:30 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.