Jump to content
Sign in to follow this  
hevymetl

How to add tags to the nav

Recommended Posts

hevymetl    0
hevymetl

Is there a way to add tags within the tags of the main nav? for instance, instead of: Home I want this to be generated as: Home

Share this post


Link to post
Share on other sites
catrina    103
catrina
Rather than adding span tags to the code itself, you can create CSS that adds styles to the menu items. For example: [code]li.page_item {text-align: left;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
hevymetl    0
hevymetl
My need for doing this is to create tabs with rounded corners, which would be supported on all browsers. I.E. does not have a way to create radius corners, like Firefox. Therefore, what I do is wrap the nav item as described above. This allows me to create each tab with 3 backgrounds: 1 for the left side of the tab (non-repeating image), one for the middle (repeating x), and one for the right (non-repeating). As far as I know, there is not a way to create this effect with CSS on a single li tag.

Share this post


Link to post
Share on other sites
hevymetl    0
hevymetl
Btw, this would be an example of the CSS for the above code: /* top nav hover */ div#top ul li a:hover{ float:left; width:auto; background:url(images/nav_midlebg.gif) repeat-x 0 0; } div#top ul li a:hover span.left{ float:left; width:auto; background:url(images/nav_leftbg.gif) no-repeat 0 0; } div#top ul li a:hover span.left span.right{ float:left; width:auto; background:url(images/nav_rightbg.gif) no-repeat right top; padding:0 19px; display:block; font:bold 12px/33px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#A21827; background-color:inherit; cursor:pointer; } /* top nav active */ div#top ul li a.active{ float:left; width:auto; background:url(images/nav_midlebg.gif) repeat-x 0 0; } div#top ul li a.active span.left{ float:left; width:auto; background:url(images/nav_leftbg.gif) no-repeat 0 0; } div#top ul li a.active span.left span.right{ float:left; width:auto; background:url(images/nav_rightbg.gif) no-repeat right top; padding:0 19px; display:block; font:bold 12px/33px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#A21827; background-color:inherit; cursor:pointer; }

Share this post


Link to post
Share on other sites
catrina    103
catrina
If you really need to edit the navigation code to add span tags, you will need to make sure that PlatformBase is activated.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
hevymetl    0
hevymetl
I am currently using platformbase. I just haven't found where to modify the nav. The section.nav.php file would make sense, but I don't see any way to make the changes I am after within that code.

Share this post


Link to post
Share on other sites
hevymetl    0
hevymetl
What code needs to be modified to make this happen?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×