Change Navand Footer Bar Color

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Acerath
    New Member
    • Aug 2005
    • 25
    • 4.2.X

    Change Navand Footer Bar Color

    Hi, it is so powerful I don't know how to use it.

    Please advise how to change the color of the two navigation dark green bars at the top and bottom, to black color.

    I am confused with the color picker, and I only need to change these two and that is all. But everything else gets messed up everytime.
    Attached Files
    Last edited by Acerath; Wed 12 Dec '12, 11:55pm. Reason: Title is not clear, sorry!
  • Wayne Luke
    vBulletin Technical Support Lead
    • Aug 2000
    • 73981

    #2
    Styles & Templates -> Style Manager -> %yourstyles% -> Style Variable Editor (on dropdown) -> Go.

    In the Style Variable Editor, find tabbar_bg and change the color by entering the hex value of your choice (#000000 for black). You'll need to either remove the sprite graphic listed in the background image filed or update it to use your color.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment

    • DemOnstar
      Senior Member
      • Nov 2012
      • 1912

      #3
      Originally posted by Wayne Luke
      Styles & Templates -> Style Manager -> %yourstyles% -> Style Variable Editor (on dropdown) -> Go.

      In the Style Variable Editor, find tabbar_bg and change the color by entering the hex value of your choice (#000000 for black). You'll need to either remove the sprite graphic listed in the background image filed or update it to use your color.
      I am here too, my question is how does one update the sprite? I am sure it is not done with Photoshop.


      Comment

      • Wayne Luke
        vBulletin Technical Support Lead
        • Aug 2000
        • 73981

        #4
        Yes, you would update graphic files with a graphics editor like Photoshop. The developers are working on getting a new sprite that uses what is called alpha-transparency and will allow easier updating by customers.

        If you're not comfortable with Photoshop, I'd like to suggest removing the sprites for now. You'll be left with a flat look but that is very in right now due to Windows 8. You'll then be able to update background colors easier with the Style Variables and Style Generator in the "Color Styles" tab of Site Builder.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment

        • DemOnstar
          Senior Member
          • Nov 2012
          • 1912

          #5
          I am very familiar with Photoshop, I have been using it for years but I have had the sprites in Photoshop, done the necessary. Put them back into their original folder keeping their original names, refresh the window and to my surprise, they stay the same. Stubborn creatures.


          Comment

          • Wayne Luke
            vBulletin Technical Support Lead
            • Aug 2000
            • 73981

            #6
            The file for gradients is /core/images/css/sprite_gradients_vb.png.
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API

            Comment

            • DemOnstar
              Senior Member
              • Nov 2012
              • 1912

              #7
              Mr Luke, thank you, I have been editing the wrong element, I will let you know how it goes.


              Comment

              • Wayne Luke
                vBulletin Technical Support Lead
                • Aug 2000
                • 73981

                #8
                Confused me at first as well since there are two copies of the file in different locations.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud demonstration site.
                vBulletin 5 API

                Comment

                • DemOnstar
                  Senior Member
                  • Nov 2012
                  • 1912

                  #9
                  Precisely! And with your last statement, I feel confident that you are indeed correct.

                  - - - Updated - - -

                  Originally posted by DemOnstar
                  Mr Luke, thank you, I have been editing the wrong element, I will let you know how it goes.
                  Successful.
                  I also changed the colour of #footer-tabbar

                  However it change the button colours also.
                  Add new user group
                  Log in
                  Site builder 'on'

                  Not bad really but I prefer the original blue colour.
                  Ok. enough for today.

                  Thanks.................................
                  Last edited by DemOnstar; Mon 17 Dec '12, 11:52pm.


                  Comment

                  Related Topics

                  Collapse

                  Working...