CSS Nav bar coding

[psychandtheother 0]

so I'm sarting to get the hang of css, (finally!) Now I know what I want to do I need help with the coding. my site, http://www.psychologyandtheother.com/ what If I wanted to make Tab buttons instead of plain words? Exactly like the support button at the top of my screen with my current hover effect? Also if possible is pagelines incompatable with garamond as a font? Currently my nav bars is unappealing and does not stand out.

[catrina 103]

You can style the navigation buttons with some CSS. Would you like to style them like the link buttons at the top of this site (on the black background)? (The font style can be changed, as well.)

[psychandtheother 0]

Catrina that sounds great! Garamond is the only one I can't seem to get.

[psychandtheother 0]

The button on the black screen on top was pretty much what I was looking for If I could get that shape with garamond font I'd be estatic! Anyone with the code My site again is http://www.psychologyandtheother.com/

[kastelic 6]

Well that particular button is using CSS sprites (images) but you can get close with css background colors. Try this:

	body #menu-nav .page_item a{
	   background:black;
	   color:white;
	   border:1px solid #666;
	   margin-right:10px;
	   font-family: 'garamond', serif;
	}
	body #menu-nav .page_item a:hover{
	   color:white;
	   background: #225E9B;
	}
	body #menu-nav .current_page_item a{
	   background: #225E9B;
	}
	

[psychandtheother 0]

that solves this problem, but images are possible? That sounds extremely intriguing is the coding much harder to make? for an example if I was to do a leaf instead of a border what would the coding look like?

[Guest Guest]

What do you mean by a leaf instead of a border? In any case, you can add images instead of static background colors by doing something like the following (this is just an example mind you):

 #primary-nav .main-nav li a:hover{
	                background: #333 url(/wp-content/themes/platformbase/images/menubg.png) repeat-x left top;
	            }

So all you have to do really is background: url(link);