Announcement

Collapse
No announcement yet.

How to give a button a different color than the selected button

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

  • [vB4] How to give a button a different color than the selected button

    Hello there,

    I want to do something with my navigation. I went to stylevars and went to : navbar_tab_selected_background. I have given it an image as background. When you go with your mouse over the button what's new it too gets the same image as the selected button. But I want all the others when you go over with your mouse to have a different backgroundimage. How can I do that?

    Thanks in advance
    _Anubis

  • #2
    That is how it currently is here. They are different classes though. The selected one is defined in ".navtabs li.selected a.navtab" whereas the hovered one is defined in ".navtabs li a.navtab:hover". So, you can redefine those if you want.

    Please don't PM or VM me for support - I only help out in the threads.
    vBulletin Manual & vBulletin 4.0 Code Documentation (API)
    Want help modifying your vbulletin forum? Head on over to vbulletin.org
    If I post CSS and you don't know where it goes, throw it into the additional.css template.

    W3Schools <- awesome site for html/css help

    Comment


    • #3
      Thanks Lynne. But I have a question. When looking I see the following :

      .navtabs li a.navtab:hover {
      background:{vb:stylevar navbar_tab_selected_background} 0 -{vb:stylevar navbar_tab_selected_top_width}px;
      _background-image:none;
      /*color:{vb:stylevar linkhover_color};*/
      color:{vb:stylevar navbar_tab_linkhover_color};
      }
      So the stylevar is still that of the selected background. Or do I just need to change it in the background-image itself where it currently says none?

      I really appreciate your help so much!
      _Anubis

      Comment


      • #4
        _background-image is something needed because of other browsers - just leave it be.

        Please don't PM or VM me for support - I only help out in the threads.
        vBulletin Manual & vBulletin 4.0 Code Documentation (API)
        Want help modifying your vbulletin forum? Head on over to vbulletin.org
        If I post CSS and you don't know where it goes, throw it into the additional.css template.

        W3Schools <- awesome site for html/css help

        Comment


        • #5
          Lynne, I think you misunderstood me. When hovering over a tab that is not the selected one, I get the same image as the selected one!
          _Anubis

          Comment


          • #6
            Yes, I understand that and I posted the class you would need to look into in order to change that - .navtabs li a.navtab:hover. Add something like this to additional.css and you can change it:
            Code:
            .navtabs li a.navtab:hover {background: pink;}

            Please don't PM or VM me for support - I only help out in the threads.
            vBulletin Manual & vBulletin 4.0 Code Documentation (API)
            Want help modifying your vbulletin forum? Head on over to vbulletin.org
            If I post CSS and you don't know where it goes, throw it into the additional.css template.

            W3Schools <- awesome site for html/css help

            Comment


            • #7
              Thanks Lynne! Another problem is solved. I used :

              Code:
              .navtabs li a.navtab:hover {background-image:url('image.png');
              background-repeat:repeat-x;
              }
              _Anubis

              Comment

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