Adding a drop shadow to vBulletin 5 main content is not as straightforward as you would expect it to be. This is because the way the HTML is structured, the main body container is not a single HTML tag as you would not normally expect for a website. If you put borders around the main parts of a vB5 homepage, this is how it would look like:
Notice that the main navigation menu, sub-navigation menu, breadcrumbs and main content have different borders. This means they have their own container and that they just have the same width to form an illusion that they are all in one container. This is the reason why adding borders or drop shadow to the main body container is not easy and straightforward.
This was not the original layout when 5.0.0 was launched. I believe vBulletin redesigned the layout in the later versions.
Now that you know the layout structure, here's the solution to add drop shadow to the main body container.
Add the below CSS in css_additional template in AdminCP or in Sitebuilder > Style > CSS Editor. Repeat for every active theme/style you are using.
Old Code:
Updated Code (as of 05/02/2022):
Choose one that applies to your forum.
For content including header:
βββββββFor content excluding header:
The above code applies for desktop only as mobile doesn't have edges for the main body container. If you installed the old code, you must remove it first before installing the latest one.
This is based off the Default Style. If you have a custom theme, you might need to tweak the CSS to make it work with your customized style.
This is how it would look like:
Notice that the main navigation menu, sub-navigation menu, breadcrumbs and main content have different borders. This means they have their own container and that they just have the same width to form an illusion that they are all in one container. This is the reason why adding borders or drop shadow to the main body container is not easy and straightforward.
This was not the original layout when 5.0.0 was launched. I believe vBulletin redesigned the layout in the later versions.
Now that you know the layout structure, here's the solution to add drop shadow to the main body container.
Add the below CSS in css_additional template in AdminCP or in Sitebuilder > Style > CSS Editor. Repeat for every active theme/style you are using.
Old Code:
Code:
.l-desktop #channel-tabbar, .l-desktop #footer { box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36) } .l-desktop #breadcrumbs, .l-desktop #channel-subtabbar { box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 14px 16px rgba(0,0,0,.36); } .l-desktop .forum_disabled_wrapper { box-shadow: 0 0 0px rgba(0,0,0,.18),0 12px 16px rgba(0,0,0,.36) } .l-desktop #content { box-shadow: 0 12px 8px rgba(0,0,0,.18),0 15px 16px rgba(0,0,0,.36); } .l-desktop #notices { box-shadow: 0 5px 8px rgba(0,0,0,.18),0 10px 16px rgba(0,0,0,.36); }
Updated Code (as of 05/02/2022):
Choose one that applies to your forum.
For content including header:
Code:
.l-desktop #wrapper { filter: drop-shadow(0px 7px 7px rgba(0, 0 , 0, 0.36)); }
Code:
.l-desktop #wrapper > *:not(header), .l-desktop #channel-tabbar { filter: drop-shadow(0px 15px 7px rgba(0, 0 , 0, 0.36)); } .l-desktop #footer { filter: drop-shadow(0px 7px 7px rgba(0, 0 , 0, 0.36)); }
This is based off the Default Style. If you have a custom theme, you might need to tweak the CSS to make it work with your customized style.
This is how it would look like:
Comment