Support for CSS Flyout Menu

[ilsita]

Just to be a little more specific, this is the type of emphatic message I was talking about (and have a question about):

div#nav-cat li a {background-color: transparent; /*<---This will set the background color of the WHOLE MENU, EVERY LEVEL, SYSTEM WIDE!!! If you want different colors, DON'T CHANGE THIS!!! */
display: block;
padding: 0.25em 0 0.3em 0em;
text-decoration: none;
width: 100%;
color: white; /* sets the font color of the menu, SYSTEM WIDE!! In order to over-ride the font colors for the menu, and have different
colors for each level, such as font color changing when you hover, you need to remove any MENU colors referred to in your
stylesheet.css, as they over-ride this stylesheet! (includes/templates/YOUR_TEMPLATE/css/stylesheet.css) */

Now, when I look at the flyout menu, as it appears on my website, unedited, the text is indeed white. Whatever colors I had sepcified in my template stylesheet seem to have been overridden, despite what it says here.

When I look in my template css, I know where to find the column text color, but I'm wondering if this is different from "menu colors." The template I'm using doesn't seem to have any "menu" item color options. I don't want to de-activate the wrong thing.

Also, I'm not sure how to "remove any MENU colors." Do I simply delete the line altogether? Just the color line, or also the text-decoration and size lines? I mean, everything to do with the text?

Thanks for any insight into this.

Also, ckosoff, I got a css editor (I had no idea! holy cow...). Very good suggestion. Thanks.

ilsita

[MaxBodine]

thanks I fixed it!

[ilsita]

thanks I fixed it!

Oh good, I was just looking at your page, wondering what the problem was :) How did you fix it?

Edited to add that when I was looking at your page, I noticed that you might want to lighten up the color of the breadcrumbs text.

[slomojojo]

When I look in my template css, I know where to find the column text color, but I'm wondering if this is different from "menu colors." The template I'm using doesn't seem to have any "menu" item color options. I don't want to de-activate the wrong thing.

Also, I'm not sure how to "remove any MENU colors." Do I simply delete the line altogether? Just the color line, or also the text-decoration and size lines? I mean, everything to do with the text?

ilsita

I think the author picked very bold and clashing colors so it'd be easier to track them down in the stylesheet. It's a matter of experimenting.

I wouldn't delete any menu colors, just change them to be the same color once you've decided on the colors you want.

You asked about making text bold. You'd add:

font-weight: bold;

under the particular menu level you want bold text for. Try putting it in different places to figure out the right spot.

I think you also asked about adding images. Yes, you can add images or even use images for the entire menu. I recently added little arrows to each category on my menu; you can see it in my signature. I'd leave the images for last, though, after you get everything else worked out. However, I don't think you can add images to the border itself.

[ilsita]

I think the author picked very bold and clashing colors so it'd be easier to track them down in the stylesheet. It's a matter of experimenting.

Yeah, I figured that... I've been able to figure that stuff out, but haven't changed anything, really. Actually, I did change to a background image, but found that I couldn't edit anything after that, so I went back to the default.

I wouldn't delete any menu colors, just change them to be the same color once you've decided on the colors you want.

That makes sense. I'm still not sure which file, exactly. Are the menu items the same as the sidebox or column box? I'm a little stymied on this...

You asked about making text bold. You'd add:

font-weight: bold;

Where would I put that if I wanted to make the hover-in-the-event-of-submenu?

under the particular menu level you want bold text for. Try putting it in different places to figure out the right spot.

menu in the flyout or in my template?

I think you also asked about adding images. Yes, you can add images or even use images for the entire menu. I recently added little arrows to each category on my menu; you can see it in my signature. I'd leave the images for last, though, after you get everything else worked out. However, I don't think you can add images to the border itself.

I just checked out your flyout menu, and it looks beautiful. That is the sort of thing I'm going for.

Thank you so much!

ilsita

[slomojojo]

All the changes should be done in the stylesheet_categories_menu.css file. You shouldn't have to mess with the template for anything.

I was fooling around with the bold type. You can add

font-weight: bold;

to the div#nav-cat li:hover statement. Unfortunately, it will make all the submenus bold too.

You should try Firefox and install the Web Developer addon. Among many other useful things, it will allow you see all the css files for any site.

[ilsita]

All the changes should be done in the stylesheet_categories_menu.css file. You shouldn't have to mess with the template for anything.

I was fooling around with the bold type. You can add

font-weight: bold;

to the div#nav-cat li:hover statement. Unfortunately, it will make all the submenus bold too.

You should try Firefox and install the Web Developer addon. Among many other useful things, it will allow you see all the css files for any site.

I seem to be having some trouble with this. Perhaps I'm entering it incorrectly? Here's what I have, to no effect whatsoever:

div#nav-cat li.submenu {background-color: white;
font-weight: bold;}

Am I doing it wrong?

ilsita

[ilsita]

I just wanted to add that it works just fine if, instead of "bold" I use "text-decoration: underline"

Underline works, bold doesn't.

Hm.