Forum:Special Navigation Formatting

Hello. I decided to use a quite special way to format my navigation, using a single picture as background and simple text, with transparent background and transparent border lines.

After testing it for a while it worked out, but now I have the problem that the sub-menus of the navigation are forced to use the same transparent formatting, and a navigation with just a font and transparent backgrounds is unusable.

Is there any way to format all navigation menus but the root menu in a different way than the main navigation menu?

~ Crynsos 22:18, 4 May 2009 (UTC)
 * Can you provide a link? --

http://deadfrontier.wikia.com/wiki/User:Crynsos/monaco.css is the current version I'm working on, didn't release the newest updates in the main MediaWiki:Monaco.css file yet. The background I planned to use for the navigation sub-menus is labeled as "navigation b" so far. (I used a lot of comments for myself in that file, so please don't get confused by them.) Along with that, another question: Is there a way to define a navigation background that gets only used for the navigation, but not the widgets? ~ Crynsos 17:28, 5 May 2009 (UTC)


 * Isn't there a .sub_menu class or something along that line? Are you using firebug? 17:52, 5 May 2009 (UTC)

No sorry, I only use Notepad++ for formatting it, didn't really think about using any other tools. So far I don't know overly much about CSS so I simply looked at other wikis, copied parts of their code and modified it so it works how I want it to, but since no wiki I saw uses a complicated navigation like I want mine to be, I found no clues for that.

I also had no idea if normal CSS code would really work with the special codes we use here, so I didn't look for any other CSS help. When looking for a detailed Wikia CSS guide I sadly couldn't really find anything either.

~ Crynsos 21:21, 5 May 2009 (UTC)


 * Firebug is a small tool that integrate into Firefox and that let us examine HTML and CSS code (and many more) and can help to figure out why something isn't working as expected. It's not used to format your CSS code. — TulipVorlax 22:44, 5 May 2009 (UTC)

Simple Answer: .sub-menu {	background: transparent url(http://images1.wikia.nocookie.net/deadfrontier/images/9/90/Navigation_Background.png) no-repeat left top; } Also if you have time visit w:c:Rappelz:MediaWiki:Monaco.css they have a more complete menu system customization because yours does part of the job but if you notice your image does not shrink or expands so for little menus/widgets you only see part of the image, and for big ones like the navigational one you have chunks of blank/dark parts --


 * Thanks for the code, I already tested it in a similar way but seemingly had a little coding error in there. About the menu design, I already saw such wikis, I got the inspiration and raw code from http://diablo.wikia.com/wiki/Diablo_Wiki, but sadly it's too complicated to create a similar menu part that can simply repeat as often as necessary, I tried that for several hours in Photoshop but never managed to make it look good, so I decided for a full static image.
 * I'd rather have that background only for the navigation widget and another background or only simple colors for the other widgets. While reading a bit in the Rappelz Monaco.css, I found what seems to be part of what I need, I'll test that now.
 * I'm now also trying how to work with FireBug, a bit complicated but maybe I'll get it out soon...
 * Thanks to everyone, I'll post again if I need more help.
 * ~ Crynsos 10:05, 7 May 2009 (UTC)

The trick is on the background color and figures, if you can see on the wikis that have customize it, they use simple and plain backgrounds (no sand like effect or something) no curve lines or something that could give out the fact those are separate images when they get into contact with the corners --