Different type styles in menu

jlee / 2008-05-26 22:40:28   

Hi! I can't figure a few things out for the life of me.

• On the menu, I'd like "About" and "Links" to have the same type style as "Jennifer Lee." How do I do that?

• Also, in the menu, how do I hide "Home"?

http://www.jenniferleedesign.com/

AntoineLafontaine / 2008-05-27 03:58:22   

Hi jennifer,

This is something you can do by editing your website style sheet (CSS). Those are located inside indexhibit's folder.

The way you are setting your font at the top of your menu could also be done through CSS instead of hardcoding it using a "font" tag. This works, but it is considered a deprecated way of doing it and is still available only for backward compatibility. (This is just an advice, and is considered good practice)

Please search the forum a bit about CSS, you should be able to find a lot of relevant post with more detail than I am giving here.

Of course, please feel free to post further question if your search doesn't provide you answers or if you still feel confused about where/what/how.

jlee / 2008-05-27 15:05:38   

Hi Antoine,

I’ve toyed with Indexhibit’s CSS file (style.css) quite a bit and read through the forum ad nauseam, but still can’t seem to find a solution. Are there other CSS files I can toy around with? I was under the impression that I was only supposed to touch style.css. Anyhow, the problem is, I don’t know how to set font styles in style.css to independent portions of the menu.

For instance, in my style.css file, I have:

body {
font-size: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
background: #FFFFFF;

and

#menu {
width: 300px;
overflow: auto;
top: 0;
bottom: 0;
left: 0;
position: fixed;
height: 100%;
background-color: #fff;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
color: #FF9000;

I’m assuming “body” controls the text style that appears in the exhibit section? And I am also assuming “#menu” controls the text style that appears in the index (a.k.a. menu) section?

Now, how do I then assign the 10px/Georgia style to Jennifer Lee, Graphic Design, About, and Links? The style that I’ve set in “#menu,” 13px/Arial, seems to apply to all portions of the menu.

Because I am completely unfamiliar with CSS and don’t know what any of these words are or what they control (i.e., body, #menu, #menu ul, #menu ul li.section-title, #content, .container, #content p, etc... I have no idea what these sections in CSS do), I just played around with the file to see what would happen.

So, for the hell of it, I applied 10px/Georgia to “#menu ul.” This is then what my CSS file looked like:

#menu ul {
list-style: none;
margin: 0 0 10px 0;
border-top: 1px dashed #CCCCCC; padding-top: 10px;
font-size: 10px;
font-family: Georgia, "Times New Roman", Times, serif;

This style then applies to everything and, suddenly, the menu that is in all caps (PROJECTNAMELOREMLOREM and PROJECT NAME TEST), is 10px/Georgia instead of 13px/Arial.

So, is there some kind of “tag” I can use in CSS to compartmentalize the menu in some way so that I can assign different styles to different parts of the menu instead of having the menu one overall font style?

Also, you said it isn’t in good practice to hardcode the top portion of my menu with and that it can be done through CSS. I don’t know how to do this. Can you shed some light? It seems to me that I only know how to apply styles in a general, sweeping way, instead of to specific bits.

I apologize for the long post, but hopefully this will help others in the future. And thanks for your reply, Antoine. It is really exhilarating learning all this.

luissalcedo / 2008-05-27 19:01:10   

Go the easy route. Let the nerds do the math. If you have a mac use CSS Edit 2.6 (http://www.macrabbit.com). Open the css file and begin to alter the page. This editor does all the scripting like never before, even noobs can use it after just opening it. Then just FTP the style sheet and preview and you should have your new beautiful page.

gabito / 2008-05-27 19:19:47   

Nothing to say.

gabito / 2008-05-27 19:20:04   

Nothing to say.

AntoineLafontaine / 2008-05-28 02:06:32   


luissalcedo's advice might be a good one. There are many CSS editors out there that will remove a good amount of pain out of figuring out how to get your things done.

I do however think it isn't a bad idea to get some basic knowledge of what are CSS and how to use it so that you can better understand what to software is doing for you... There always those odd cases where the software won't cut it and you will need to get dirty.

You do not need to, but if you are interrested, search for w3schools and check their introduction to CSS2. There are also other good sites for that if you search.

Hope this helps.

jlee / 2008-05-28 02:29:16   

I didn't even know there was such a program! If I had known that before, I never would've gone through the pain. Thanks, luissalcedo.

And thanks for the w3schools referral, Antoine. I'll definitely have a look around.

This thread has been closed, thank you.