Jump to content


Photo
- - - - -

How to add tags to the nav


  • Please log in to reply
7 replies to this topic

#1 hevymetl

hevymetl

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 20 November 2011 - 11:30 AM

Is there a way to add tags within the
  • tags of the main nav? for instance, instead of:
  • Please Login or Register to see this Hidden Content

  • I want this to be generated as:
  • Please Login or Register to see this Hidden Content



    #2 catrina

    catrina

      Advocate

    • Members
    • 12345 posts
    • LocationCalifornia
    • Country: Country Flag

    Posted 20 November 2011 - 04:25 PM

    Rather than adding span tags to the code itself, you can create CSS that adds styles to the menu items. For example:

    Please Login or Register to see this Hidden Content



    #3 hevymetl

    hevymetl

      Newbie

    • Members
    • 5 posts
    • Country: Country Flag

    Posted 20 November 2011 - 07:37 PM

    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.

    #4 catrina

    catrina

      Advocate

    • Members
    • 12345 posts
    • LocationCalifornia
    • Country: Country Flag

    Posted 20 November 2011 - 07:40 PM

    Have you seen this?:

    Please Login or Register to see this Hidden Content



    #5 hevymetl

    hevymetl

      Newbie

    • Members
    • 5 posts
    • Country: Country Flag

    Posted 20 November 2011 - 07:43 PM

    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; }

    #6 catrina

    catrina

      Advocate

    • Members
    • 12345 posts
    • LocationCalifornia
    • Country: Country Flag

    Posted 20 November 2011 - 07:46 PM

    If you really need to edit the navigation code to add span tags, you will need to make sure that PlatformBase is activated.

    #7 hevymetl

    hevymetl

      Newbie

    • Members
    • 5 posts
    • Country: Country Flag

    Posted 20 November 2011 - 08:07 PM

    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.

    #8 hevymetl

    hevymetl

      Newbie

    • Members
    • 5 posts
    • Country: Country Flag

    Posted 21 November 2011 - 10:08 PM

    What code needs to be modified to make this happen?