[SOLVED] Customizin...
 
Notifications
Clear all

[SOLVED] Customizing Navigation Look

3 Posts
3 Users
0 Reactions
2,281 Views
(@vanityblaze)
Posts: 0
 

I need help figuring out how to customize my navigation links. Before I upgraded to version 3, my navigation menu (home, recent, search, etc.) was coded differently in css from the rest of the links on my page (like a different font color and size). I used a css class command such as the one below on the func.pagemenu.php page:

<a href=""URL"" class="menu">link text</a>

Since the pagemenu function has been replaced, I'm at a loss as to where I would go to customize my links in the way that I want. Can someone please point me in the right direction? I tried messing around with admin > links.php at bit, but I don't think that is what I'm wanting, or either it's not working. My changes in trying to add the class command didn't show up on the page or in view source.


 
Posted : 21/12/2006 1:10 am
(@tammy)
Posts: 2577
Member Moderator
 

In future, please follow the guidelines in the sticky notes for posting a help request.

You don't need to change the links to use css on them.  If you're using the menu block the links are enclosed in a div with the id "menu" and you use that in your CSS.  If you're using them individually, do the same thing.  Enclose them in a div or a span and style the A elements of that div/span. 


#menu A { color: green; }

See the CSSZen skin for another example.


 
Posted : 21/12/2006 1:36 am
(@lazuli)
Posts: 61
Trusted Member
 

Tammy's right.  You don't need to modify the links themselves.  This is an example of what my menus typically look like (or close to it).

<div class="menuContainer">
<div class="menuHeader">Navigation</div>
<div class="menuItem">
{menu_content}
</div>
</div>

From there, you can style each one without even touching the links.  My favorite menu trick right now is adding a bullet to the side of the link when it's moused over.

.menuItem -- More positioning, adding margins, and spacing each link apart.
.menuItem A -- Specific size for links, versus any info I leave in the sidebar.
.menuItem A:link, .menuItem A:active, .menuItem A:visited -- Color, decoration, usually remove the underline
.menuItem A:hover -- Any changes I want the link to make when moused over.

If you need more examples, check out my Shuriken skin.  While it's a 2.0 skin, so far I haven't made any changes to the menu for 3.0.


I'm sorry, but due to my schedule, I am not available for commissions.

Blog | DA Account

 
Posted : 21/12/2006 2:00 am
Share: