Posted by stacita on 05 Mar 2010 20:20, last edited by stacita on 05 Mar 2010 20:24
This forum post by Rob Elliott on the breakdown of the top-bar menu's CSS components is very helpful:
http://community.wikidot.com/forum/t-172511
It would be nice to take up where Rob left off and create a more lasting How-To. Please help!
#top-bar { }
This covers the overall properties for the top bar. So you would put in here for example the background-color and background-image properties. Perhaps also the font although this will affect list items unless they too have a font–size value set.
Then any list must be either an unordered list <ul> or an ordered list <ol> (starting for example with 1, 2, 3…)
#top-bar ul { }
So before your list you have the <ul> tag which tells you to expect an unordered list. Therefore each of your top bar menus will start with #top-bar ul. You can apply overall properties to this, for example: display:inline or display:table. If you specify for example font-sizes here they would also affect items lower down in the tree.
#top-bar li { }
This is the top-level menu headings. In the html above it is “Milk”, “Eggs” and “Cheese”.
#top-bar li ul { }
This would affect the overall properties of the submenu.
#top-bar li ul li { }
This will affect a list <li> inside a list <li>, i.e the submenu and would normally include things like float or display properties.
#top-bar li a { }
This one will affect all anchors inside your top level lists.
#top-bar li ul li a { }
And this would affect an anchor inside a submenu.
Hover:
#top-bar a:hover { }
If you had an item in the top bar that wasn’t in a menu but was a link to something you could use the top-bar a:hover. For menu items though you would normally see something like #top-bar ul li:hover a:hover { } and if you specified a text-decoration:underline for example it would underline each of the list items in turn as you hovered over each one.
#top-bar li ul li a:hover { }
This is for the hover on the anchors in the submenus
#top-bar li:hover ul, #top-bar li.sfhover ul { }
I’ve never been quite sure what sfhover is and does but I think it comes from some sort of menu creator package. I usually delete it from my themes.
I have created new buttons in the top menu and I have created the pages to go with them but where and how do I link them together so that they work when I click on the menu button
You treat the buttons in the top menu bar like regular links. For example, you would change [# FAQ] to [[[FAQ]]] in the top bar, assuming your FAQ is on a page called faq.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
how do i remove links?