Make the space where the logo and search bar is transparent?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • klaj3981
    New Member
    • Apr 2014
    • 29
    • 5.0.X

    Make the space where the logo and search bar is transparent?

    Is there a way to make the background of the space where the search bar and logo are transparent so that the global header_background can be seen behind it?
  • glennrocksvb
    Former vBulletin Developer
    • Mar 2011
    • 4011
    • 5.7.X

    #2
    I think this has been asked a couple of times here and the answer was that it was not possible without moving the header outside the wrapper which has the white background. If you set the background of the header to transparent, it will show through the white background of the wrapper because header is inside the wrapper.

    Well, worry no more. I was able to figure it out without modifying the header template. You just have to add this in css_additional.css template:

    Code:
    #wrapper {
        position: relative;
        margin-top: 104px; /* height of header (+ height of ads on top of header, if any) */  
    }
    #header {
        background: transparent;
        position: absolute;
        top: -104px;  /* height of header */  
    }
    /* if you have ads on top of header */
    #header-axd {
        background: transparent;
        position: absolute;
        top: 104px; /* height of header + height of ads */  
    }
    If you customized the header or your logo is taller than the default and the height of header got changed, you need to adjust 104px accordingly. Currently that's the current height of the header.
    Last edited by glennrocksvb; Wed 16 Apr '14, 5:00pm.

    Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

    Comment

  • glennrocksvb
    Former vBulletin Developer
    • Mar 2011
    • 4011
    • 5.7.X

    #3
    Alternative solution:

    Code:
    #wrapper, .header-edit-box, #header { background: transparent; }
    #channel-subtabbar, #breadcrumbs, #content { background: {vb:stylevar wrapper_background}; }
    #breadcrumbs { padding: 12px 20px 20px; margin: 0; }

    Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

    Comment

    • klaj3981
      New Member
      • Apr 2014
      • 29
      • 5.0.X

      #4
      Originally posted by Glenn Vergara
      I think this has been asked a couple of times here and the answer was that it was not possible without moving the header outside the wrapper which has the white background. If you set the background of the header to transparent, it will show through the white background of the wrapper because header is inside the wrapper.

      Well, worry no more. I was able to figure it out without modifying the header template. You just have to add this in css_additional.css template:

      Code:
      #wrapper {
      position: relative;
      margin-top: 104px; /* height of header (+ height of ads on top of header, if any) */
      }
      #header {
      background: transparent;
      position: absolute;
      top: -104px; /* height of header */
      }
      /* if you have ads on top of header */
      #header-axd {
      background: transparent;
      position: absolute;
      top: 104px; /* height of header + height of ads */
      }
      If you customized the header or your logo is taller than the default and the height of header got changed, you need to adjust 104px accordingly. Currently that's the current height of the header.
      I think I can get this code to work, but I am running the double header ads. The ads become aligned to the left (when they were previously centered) and also, the background behind the ads only becomes transparent as well (should stay solid since I only am looking to make the background behind the logo and search box transparent.

      I tried to modify the code for a half hour to get it to my likings, but was unable to get around the align=left for the ads! Thank you for this code work, it is a great start for me.

      Comment

      • glennrocksvb
        Former vBulletin Developer
        • Mar 2011
        • 4011
        • 5.7.X

        #5
        Did you try the easier alternative solution I posted? Just remove ".header-edit-box" if you don't want the ads to have transparent background.

        Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

        Comment

        • klaj3981
          New Member
          • Apr 2014
          • 29
          • 5.0.X

          #6
          Originally posted by Glenn Vergara
          Did you try the easier alternative solution I posted? Just remove ".header-edit-box" if you don't want the ads to have transparent background.
          Yes, I have tried the alternative solution and played around with it for a bit. I have the dual header ads and after I insert the easier version, I get a transparent space right behind the "notices" block.

          Comment

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

            #7
            You have to add .notices to this code:
            Code:
             
             #channel-subtabbar, #breadcrumbs, #content { background: {vb:stylevar wrapper_background}; }
            So it is like this:
            Code:
            #channel-subtabbar, #breadcrumbs, #content, .notices { background: {vb:stylevar wrapper_background}; }
            Hopefully they fix this properly using this JIRA:
            Translations provided by Google.

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

            Comment

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

              #8
              Also #channel-subtabbar has its own stylevar for the background so if you want to change it in the future using the stylevar system, you should remove #channel-subtabbar, from the beginning of the line. Most people want to match it to the background color of the active tab above and that isn't always going to match the color of the wrapper_background. More often than not, it doesn't match at all.
              Translations provided by Google.

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

              Comment

              • klaj3981
                New Member
                • Apr 2014
                • 29
                • 5.0.X

                #9
                Hi Wayne. Thanks for the input. So I have my code set as
                Code:
                #wrapper, .header-edit-box, #header { background: transparent; }
                #channel-subtabbar, #breadcrumbs, #content, .notices { background: {vb:stylevar wrapper_background}; }
                #breadcrumbs { padding: 12px 20px 20px; margin: 0; }
                I double checked to make sure that the style-var for wrapper background is set to #FFFFFF, and it is. But I still get the white background behind the notices. Are you replicating this?

                Comment

                • glennrocksvb
                  Former vBulletin Developer
                  • Mar 2011
                  • 4011
                  • 5.7.X

                  #10
                  Add:
                  Code:
                  .notices {
                      margin: 0;
                      padding: 0 20px;
                  }
                  Then change below in the template that contains the notices

                  Code:
                  <ul class="notices">
                  with:

                  Code:
                  <ul class="notices h-clearfix">

                  Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                  Comment

                  • klaj3981
                    New Member
                    • Apr 2014
                    • 29
                    • 5.0.X

                    #11
                    That fixed it Glenn, there are only a few more things needed to change. When you view the forum on a mobile device, you will see that there are a few more menu's that need to have the background changed in them. The most noticeable will be the subtabbar. But you are very talented!

                    Comment

                    • glennrocksvb
                      Former vBulletin Developer
                      • Mar 2011
                      • 4011
                      • 5.7.X

                      #12
                      The #channel-subtabbar ul li also needs white background.
                      Code:
                      #channel-subtabbar, #breadcrumbs, #content, .notices, [COLOR=#0000FF][FONT=Consolas][SIZE=12px]#channel-subtabbar ul li[/SIZE][/FONT] [/COLOR]{ background: {vb:stylevar wrapper_background}; }

                      Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                      Comment

                      Related Topics

                      Collapse

                      Working...