Announcement

Collapse
No announcement yet.

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

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

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

  • #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 Glenn Vergara; Wed 16th Apr '14, 5:00pm.

    GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

    Comment


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

    GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

    Comment


    • #4
      Originally posted by Glenn Vergara View Post
      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


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

        GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

        Comment


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


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


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


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


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

                  GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                  Comment


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


                    • #12
                      The #channel-subtabbar ul li also needs white background.
                      Code:
                      #channel-subtabbar, #breadcrumbs, #content, .notices, #channel-subtabbar ul li { background: {vb:stylevar wrapper_background}; }

                      GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                      Comment

                      Related Topics

                      Collapse

                      Working...
                      X