Wikidot Community

I would try that but I can't figure out step one: where is the code to modify?

top bar menu is a list of lists.
second level is normally not possible - but with the CSS style on the nav:top ( in module CSS) it should be possible.

I have a site that I have not yet started which just by chance uses the same theme as you are using so I added the nested menus to it. The page with the css on for the site is at http://caspio.wikidot.com/css:theme and you are welcome to copy that page for your own use.

You can see on that page the nested menus.

You currently have a page on your site called admin:themes which is where you tell your site where to get the the imported css from the themes site. So edit that page and under the @import rule (which must always be first) copy the CSS from my page from /* TOP BAR down.

You then set up your nav:top page and you need to be careful to use the correct amount of indents for each level. You see how I've done it on my nav:top page.

Now of course the css won't look how you want it but you can now change the properties and values on the admin:themes page and when you save it the changes are made instantly on the site. Having CSS on its own page is the best way to manage your css.

But once you've added that come back with further questions about tweaks and changes.

Ok, I copied your code over. I edited my nav:top (Races).

You're right, its a bit ragged looking right now but I think that is what you meant by changing values…. which is also something new for me.

What's the next step I should be considering Rob?

(EDIT)
Correction, as soon as I add more than one first level sub-menu the raggedness goes away.

I guess my next step is this… How can I make it pick the colors based on my chosen theme?

Thanks Rob, I could not remember "where" you have built this demonstration.

Would be a g ood idea to copy this information for the howto ?
http://community.wikidot.com/howto:design-top-bar-menu-with-css

Go to his http://caspio.wikidot.com/nav:top and have a look on his menues! ( source button right top))

Super ! Well done.
- I have seen your top menu on http://nerdvana-pathfinder.wikidot.com/nav:top/edit/true

The original site I put this on is at http://www.rfpg.org but I altered it slightly to fit this theme. Yes I'll do a how-to on it as the CSS will need to be commented so that the user knows what each rule does (and I can probably simplify it a bit too).

Another issue I just notices is that the nested menus aren't showing up on my admin:themes page

This depends on thew admin setup - which nav:.. menu pages are set up for which category.

It seems that the category "admin:" have another nav:top page assigned ?

i mean this menu point in the admin manager: http://handbook.wikidot.com/en:site-manager-appearance-navigation-elements

The default themes are set to use a different theme for the admin category. So go to your site manager -> appearance -> themes, make sure that the admin category is selected, then in the box for the location change it to /admin:themes/code/1 and click the Save changes button.

and while you're at it make sure that in site manager -> appearance ->themes that the box in the default category says /admin:themes/code/1 as well.

Its completely unclear what things go with what code unfortunately.

If you notice, I made an earlier post that says "Yes I'll do a how-to on it as the CSS will need to be commented so that the user knows what each rule does"

Sorry but that was just a quick example built in 10 minutes, I haven't had time yet to comment it properly due to family stuff (dinner mainly) and other work over the last 2 hours.

One thing that really helps with learning CSS, showing you what rules affect what elements and testing changes on the fly isa Fireox add-on called Firebug from http://getfirebug.com

Oh, I missed that entirely. Sorry.

(EDIT)
Will firebug install into Chrome?

No Firebug is for Firefox. Chrome has a similar tool (press F12) for you to view properties and values that are being used, but I' not sure it can quite give you the same on the fly testing that Firebug can.
.
I'll add some commenting to that menus css page later

Hey Rob (and nerdvana42),

I usually use Google Chrome as my main browser, so I regularly use it's own CSS tools (Right-click > Inspect element). It is most certainly capable of on-the-fly testing just like Firebug.

There may be some features that Firebug has which Chrome does not, but all of the important ones that I need to use (changing HTML or CSS and seeing the changes reflected immediately) are there.

Summary: Firebug is probably more in-depth, but Chrome's built-in tools are definitely a strong competitor in terms of feature set.

Edit: Oh, and there is a Firebug Lite for Google Chrome - but I don't recommend it. Last I tried, it was severely lacking.

Thanks Shane. I took a look at that inspect element bit and I don't see how it explains how to tweak the code on my admin:themes page. I'll just have to wait for Rob's primer he was going to write up (and hope my missing his comment and subsequent impatience didn't put him off on helping me).

No, it's jsut that I'm fearsomely busy this week completing the integration of a shopping cart into a Wikidot site and on database work. I'll try to complete some commenting or the how-to later today.

Cool. Thanks for all the asistance

At http://caspio.wikidot.com/css:theme I have tidied up the CSS a bit removed the bits that were not necessary. I have also commented it to describe what each rule does. There are still improvements that can be made before it is turned into a how-to. You've not said what your level of css knowledge is but I hope the commenting helps and that you will be able to alter the properties and values to suit your site.

I would say that my level of CSS knowledge is less than nil if that were mathematically possible in a real world situation. I tried to apply some of what you put in there as comments but it seemed to break things. I'm just sticking with the dark blue menus for now and will keep an eye out for your more detailed how to comes out.