Announcement

Collapse
No announcement yet.

How do you add CSS to navtab links?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [Forum] How do you add CSS to navtab links?

    How do you add CSS to navtab links in the Navigation manager, like you do here for the "Purchase" tab font color?
    vBulletin - Sometimes, I'm just like, Wow, and then I'm like, Whoa, and then I'm like, Damn.

    vBulletin.org's ol' Moderator

    I have a lifetime terrorist hunting permit - #091101

    chmod a+x /bin/laden -- Allows anyone the permission to execute /bin/laden

  • #2
    This is how it is being done here:
    Code:
    #tab_nzm4_882 a.navtab {
        color: #FBCB3D;
    }
    Change tab_nzm4_882 to the Identity of the navtab and the color or any other CSS element to what you want it to be.

    This goes in the additional.css template, of course.

    Comment


    • #3
      Each tab have a unique id. you still can play with navigation by editing the 'navbar_tabs' template
      Please feel free to contact me if you have any questions or concerns

      Links: vBulletin Manual - Code Documentation - FAQ - Bug Tracker - Lemon Juice
      vBulletin 5 Connect: Extensions - Articles - Features - Purchases

      Comment


      • #4
        Originally posted by Matthew Gordon View Post
        This is how it is being done here:
        Code:
        #tab_nzm4_882 a.navtab {
            color: #FBCB3D;
        }
        Change tab_nzm4_882 to the Identity of the navtab and the color or any other CSS element to what you want it to be.

        This goes in the additional.css template, of course.
        How do you get the black text for the hover color?

        - - - Updated - - -

        I figured it out, I think, unless there is an easier way.

        Code:
        #tab_nzgw_296 a.navtab {
            color: #FBCB3D;
        }
        #tab_nzgw_296 a.navtab:hover {
            color: #000000;
        }
        vBulletin - Sometimes, I'm just like, Wow, and then I'm like, Whoa, and then I'm like, Damn.

        vBulletin.org's ol' Moderator

        I have a lifetime terrorist hunting permit - #091101

        chmod a+x /bin/laden -- Allows anyone the permission to execute /bin/laden

        Comment


        • #5
          Thats the correct way.
          Baby, I was born this way

          Comment


          • #6
            I believe that is how it should be done. Glad you figured it out.

            Comment


            • #7
              Thank you for verifying that, Paul and Matthew, and thanks to Matthew for showing me the new way to do it.

              I'm having a blast with the new Navigation Manager.

              - - - Updated - - -

              I was doing it like this before but things have changed.

              Code:
              .navtabs li a.navtab_donate { color: #FBCB3D; }
              .navtabs li a.navtab_donate:hover { color: black; }
              vBulletin - Sometimes, I'm just like, Wow, and then I'm like, Whoa, and then I'm like, Damn.

              vBulletin.org's ol' Moderator

              I have a lifetime terrorist hunting permit - #091101

              chmod a+x /bin/laden -- Allows anyone the permission to execute /bin/laden

              Comment


              • #8
                Originally posted by Boofo View Post
                How do you get the black text for the hover color?
                Here it uses the standard navbar_tab_select_color stylevar. Doing it in CSS if the hover is unique is the proper way.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                vBulletin 5 Documentation - Updated every Friday. Report issues here.
                vBulletin 5 API - Full / Mobile
                I am not currently available for vB Messenger Chats.

                Comment


                • #9
                  Okay, here is what I have now and it works except when the button is highlighted. Then it shows the text in the orange/brown color. How do I fix that?

                  Code:
                  /* Donate Navbar Button Color */
                  #tab_nzgw_296 a.navtab {
                      color: #FBCB3D;
                  }
                  #tab_nzgw_296 a.navtab:hover {
                      color: {vb:stylevar navbar_tab_selected_color};
                  }
                  You were close Wayne. You forget the ending ed for style variable (navbar_tab_selected_color)
                  vBulletin - Sometimes, I'm just like, Wow, and then I'm like, Whoa, and then I'm like, Damn.

                  vBulletin.org's ol' Moderator

                  I have a lifetime terrorist hunting permit - #091101

                  chmod a+x /bin/laden -- Allows anyone the permission to execute /bin/laden

                  Comment


                  • #10
                    Originally posted by Boofo View Post
                    You were close Wayne. You forget the ending ed for style variable (navbar_tab_selected_color)
                    Ahh, sorry about that.

                    Building on your code this is what I get:

                    Code:
                    /* Donate Navbar Button Color */
                    #tab_nzgw_296 a.navtab {
                        color: #FBCB3D;
                    }
                    #tab_nzgw_296 a.navtab:hover {
                        color: {vb:stylevar navbar_tab_selected_color};
                    }
                    
                    .navtabs li.selected#tab_nzgw_296 a.navtab {
                        color: {vb:stylevar navbar_tab_selected_color};
                    }
                    This shows my tab orange and then red (my selected color) on hover and when it is the active tab.
                    Last edited by Wayne Luke; Wed 23rd May '12, 3:31pm.
                    Translations provided by Google.

                    Wayne Luke
                    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                    vBulletin 5 Documentation - Updated every Friday. Report issues here.
                    vBulletin 5 API - Full / Mobile
                    I am not currently available for vB Messenger Chats.

                    Comment


                    • #11
                      Thank you, Wayne, That fixed it. Are you using the default style on your site? That red color sounds interesting.

                      I never would have gotten the third part of the code you posted. I'm really bad at the CSS stuff.
                      vBulletin - Sometimes, I'm just like, Wow, and then I'm like, Whoa, and then I'm like, Damn.

                      vBulletin.org's ol' Moderator

                      I have a lifetime terrorist hunting permit - #091101

                      chmod a+x /bin/laden -- Allows anyone the permission to execute /bin/laden

                      Comment


                      • #12
                        The site I am playing with does not use a default style. It is dark blues and black backgrounds with white text and bold link colors.
                        Translations provided by Google.

                        Wayne Luke
                        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                        vBulletin 5 Documentation - Updated every Friday. Report issues here.
                        vBulletin 5 API - Full / Mobile
                        I am not currently available for vB Messenger Chats.

                        Comment


                        • #13
                          Is there any way to have only menu on tab and not link ?

                          Comment


                          • #14
                            Originally posted by willy888 View Post
                            Is there any way to have only menu on tab and not link ?
                            A menu where you click on the tab and it drops down? No... Not at this time. Andreas is working on an Addon that he wants to provide this functionality with. It is on vBulletin.org.

                            If you mean a menu in the subnav where it shows a link and that drops down like the "Quick Links" menu above, then yes. Just add a new menu to your tab in the Navigation Manager.
                            Translations provided by Google.

                            Wayne Luke
                            The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                            vBulletin 5 Documentation - Updated every Friday. Report issues here.
                            vBulletin 5 API - Full / Mobile
                            I am not currently available for vB Messenger Chats.

                            Comment


                            • #15
                              I have already a mod Evi Menu tabs that I use , but I thought with this new vb tab function that I wouldn't have to use it anymore.

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X