Make the header transparent

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • RAWC
    Member
    • Aug 2009
    • 54

    Make the header transparent

    I have uploaded a new background image, the bricks. How do I make the header transparent so this background image shows in the header?

    Thanks.
  • AliMadkour
    Senior Member
    • Dec 2004
    • 1588
    • 6.X

    #2
    Edit header_background Stylevar
    AdminCP->Styles & Templates->Style Manager then choose Style Variable Editor from the drop-down menu and click go
    Search Stylevar : header_background edit it and click save

    Former vBulletin Support Staff
    Need Help?, Or P.M. Me

    Comment

    • Tibald
      New Member
      • Sep 2009
      • 27

      #3
      I have same issue, and edit of header_background not help ://
      Background changed to white but not trasparent .. maybe any another tip can help?
      http://f5.s.qip.ru/1...mt2nuH.gi - this is signature image added manually by IMG tag

      Comment


      • napy8gen
        napy8gen commented
        Editing a comment
        .header-edit-box color is appearing when put transparent in the property. this should report as bug.
    • DemOnstar
      Senior Member
      • Nov 2012
      • 1912

      #4
      I am no expert but I tried this and it worked.

      Please add this little snippet to your css_additional.css and let me know how it goes. Thanks.

      Code:
      #header {
            background: transparent;
      }
      #wrapper {
            background: none repeat scroll 0 0 transparent;
      }
      You can always delete if it doesn't help.

      You may have to do something here too?

      Code:
      #header .site-logo {
      Code:
      #header .header-cell {
      Code:
      #header .toolbar {
      Last edited by DemOnstar; Wed 5 Jun '13, 9:52pm.


      Comment

      • Tibald
        New Member
        • Sep 2009
        • 27

        #5
        This fix can remove fully wrapper bg, but need only header trasparent

        Here result image..
        http://f5.s.qip.ru/1...mt2nuH.gi - this is signature image added manually by IMG tag

        Comment

        • RAWC
          Member
          • Aug 2009
          • 54

          #6
          Originally posted by Tibald
          This fix can remove fully wrapper bg, but need only header trasparent

          Here result image..
          I agree, I am looking to achieve the same as you.

          Comment

          • napy8gen
            Senior Member
            • Jul 2001
            • 525
            • 6.X

            #7
            after changing to transparent in header background in stylevars,

            .header-edit-box bgcolor appears.


            and then:


            #wrapper bgcolor appears


            so this is the header bg color bug.
            Get Our vbulletin 6 themes

            Comment

          • Tibald
            New Member
            • Sep 2009
            • 27

            #8
            Wayne Luke answered: You can override the stylevars in your css_additional.css template. For help doing this, please open a thread in the forums.

            Can somebody help how to do this ?
            http://f5.s.qip.ru/1...mt2nuH.gi - this is signature image added manually by IMG tag

            Comment

            • BirdOPrey5
              Senior Member
              • Jul 2008
              • 9613
              • 5.6.3

              #9
              You can get to / edit that template by going to:

              The Admin CP -> Styles & Templates (in side menu) -> Style Manager

              Choose your Style

              Choose "Edit Templates" from the drop down menu

              Scroll to CSS Templates group and double-click on it

              The double click on the template called css_additional.css

              That will open it in the templat editor and you can add the CSS people have suggested.

              Save when you are done.

              Comment

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

                #10
                The CSS above is needed. Your background image applies to the BODY tag. If you have a single, none repeating image as the background and would like it to also scale to the window size, google background-cover.
                Translations provided by Google.

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

                Comment

                • RAWC
                  Member
                  • Aug 2009
                  • 54

                  #11
                  I am struggling with what code to add, can someone please post an idiots guide.

                  Thanks!

                  Comment

                  • Tibald
                    New Member
                    • Sep 2009
                    • 27

                    #12
                    Same here RAWC )) guys plz show how to do that ?)) bcuz i tried add transparent but its not help like on my scree above :/
                    http://f5.s.qip.ru/1...mt2nuH.gi - this is signature image added manually by IMG tag

                    Comment

                    • napy8gen
                      Senior Member
                      • Jul 2001
                      • 525
                      • 6.X

                      #13
                      Originally posted by Wayne Luke
                      The CSS above is needed. Your background image applies to the BODY tag. If you have a single, none repeating image as the background and would like it to also scale to the window size, google background-cover.
                      ​right now if we removed background for .wrapper, the wrapper covers bg color to top, but the thread starter wanted only header background transparent. This is not possible because class .wrapper sit on top of everything. The thread starter still want the wrapper bg color starting header below. This you must understand.

                      But it is not just .wrapper sits on top of header background. it is also .header-edit-box
                      that is why I reported as bug, header background color cannot be changed to transparent. At the moment it is near impossible to achieve it.
                      Get Our vbulletin 6 themes

                      Comment

                      • doctorsexy
                        Member
                        • May 2011
                        • 69
                        • 5.0.0

                        #14
                        If you want a transparent header do this " im no coder"

                        in the header template find

                        <div id="outer-wrapper">
                        <div id="wrapper">

                        The code thats after <!--[if !IE 8 ]><!-->

                        on line 206 ish and move to line 275, 276 just after the </div>

                        Then add <div class="wrapper"> to line 206 where where you moved the other code from.

                        Then add a </div> to 274 above the <div id="outer-wrapper">

                        In css_additional.css add this

                        .wrapper{

                        height:150px;
                        margin-right:18%;
                        margin-left:18%;
                        background-color: transparent;
                        }


                        Thats the best i can do if anyone wants to make it any better ...go for it.....

                        its working here http://opensezme.co.uk/vb5/
                        http://opensezme.co.uk/

                        Comment

                        • DemOnstar
                          Senior Member
                          • Nov 2012
                          • 1912

                          #15
                          Originally posted by doctorsexy
                          its working here http://opensezme.co.uk/vb5/
                          Nice job, confirmed...


                          Comment

                          Related Topics

                          Collapse

                          Working...