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?
Make the space where the logo and search bar is transparent?
Collapse
X
-
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 */ }
Last edited by glennrocksvb; Wed 16 Apr '14, 5:00pm. -
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; }
Comment
-
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 */ }
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
-
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.Comment
-
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
-
You have to add .notices to this code:
Code:#channel-subtabbar, #breadcrumbs, #content { background: {vb:stylevar wrapper_background}; }
Code:#channel-subtabbar, #breadcrumbs, #content, .notices { background: {vb:stylevar wrapper_background}; }
Translations provided by Google.
Wayne Luke
The Rabid Badger - a vBulletin Cloud demonstration site.
vBulletin 5 APIComment
-
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 APIComment
-
Hi Wayne. Thanks for the input. So I have my code set asCode:#wrapper, .header-edit-box, #header { background: transparent; } #channel-subtabbar, #breadcrumbs, #content, .notices { background: {vb:stylevar wrapper_background}; } #breadcrumbs { padding: 12px 20px 20px; margin: 0; }
Comment
-
Add:
Code:.notices { margin: 0; padding: 0 20px; }
Code:<ul class="notices">
Code:<ul class="notices h-clearfix">
Comment
-
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
-
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}; }
Comment
Related Topics
Collapse
-
by Mrs.TDoes any one know the dimensions of the header background?
We are trying to create a header background image but can't get it to fit correctly.
Thanks.-
Channel: Support Issues & Questions
Sat 11 Nov '17, 6:06am -
-
by Rob-HIs there a way to replace the background just in the header? Using "wood" template but want the header bkg to be white....
-
Channel: Support Issues & Questions
Sun 2 Jan '22, 11:55am -
-
by RAWCI have uploaded a new background image, the bricks. How do I make the header transparent so this background image shows in the header?
Thanks.1 Photo-
Channel: Support Issues & Questions
Tue 4 Jun '13, 11:10am -
Comment