Separating CSS: Menu vs. Body

md462x / 2008-06-04 01:01:33   

I've looked around the forums for someone else trying to do this, without luck. I am trying to customize my site's CSS, but can't figure out how to differentiate between the menu and the content section..

For instace, I may want the menu links to the sidebar to highlight on hover, but not the photos in my exhibits.. Or perhaps text changes in the body w/o changing the menu.

In other words, how can i make the body text / links / etc. behave differently than the menu?

Is this easier to do than i think?

AntoineLafontaine / 2008-06-04 01:23:16   

It's not so hard.

The menu is encapsulated in a div with an id of "menu"... the content has an id of "content".

You should have or already figured out that you need to use what is called a selector in CSS to select which part of your page you want to modify with some CSS properties.

In this case the menu would be slected like this:
#menu{ INSERT SOME CSS }

If you want to select something inside the menu, just be more specific:
#menu a{ INSERT SOME CSS }

will select ALL the a tags (used for links) in the "menu" div.

So, in CSS there are three types of selectors... I've used 2 in the previous simple examples. The ID selector or object selector which needs to be prepended by a #(sharp) sign. Any html tag can be used as a selector. Just use the name of the tag (like "a" in the previous example). The last one is the class selector. It is usable when a class="something" is inserted into an html tag. To use this selector, you need to prepend it,s name with a .(dot) like the following:
#menu .container a{ INSERT SOME CSS }

My advice to everybody trying to customize its indexhibit installation using CSS is to go and grab a copy of Firebug for Firefox and start inspecting the pages you are working on. This will let you see all the CSS applied to your page and also what ids and classes are already available for you to work with.

Let's see those exhibit!

This thread has been closed, thank you.