Announcement

Collapse
No announcement yet.

Make the header transparent

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

  • 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.

  • #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


    • #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.

    • #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 5th Jun '13, 9:52pm.


      Comment


      • #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


        • #6
          Originally posted by Tibald View Post
          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


          • #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 New Flat Theme Pro Pack or Grab all 34 vb5.5.1 skins @sultantheme.com -vb3 responsive style or vb4 responsive style and vbcloud custom style

            Comment


          • #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


            • #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


              • #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 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
                  I am struggling with what code to add, can someone please post an idiots guide.

                  Thanks!

                  Comment


                  • #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


                    • #13
                      Originally posted by Wayne Luke View Post
                      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 New Flat Theme Pro Pack or Grab all 34 vb5.5.1 skins @sultantheme.com -vb3 responsive style or vb4 responsive style and vbcloud custom style

                      Comment


                      • #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


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


                          Comment

                          Related Topics

                          Collapse

                          Working...
                          X