Announcement

Collapse
No announcement yet.

Add Drop Shadow to Main Body Container

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    [Official - Free] Add Drop Shadow to Main Body Container

    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:

    Click image for larger version  Name:	image.png Views:	1 Size:	762.5 KB ID:	8690

    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.

    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);
    }
    The above code applies for desktop only as mobile doesn't have edges for the main body container.

    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:

    Click image for larger version  Name:	image.png Views:	1 Size:	905.7 KB ID:	8691

    Click image for larger version  Name:	image.png Views:	1 Size:	846.0 KB ID:	8692
    Last edited by glennrocksvb; 01-09-2018, 07:20 AM.

    #2
    Outstanding, Glenn. Love it!!
    If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

    Comment


      #3
      Looks great!

      Comment


        #4
        So if i have a dark or black background it wont show? Is there a way to give it a light effect for dark backgrounds?

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          Yes but it will require a lot of trial and error to get the correct values and make it look right. Just like in the first screenshot, we're adding shadows for each of those boxes to make an illusion that the main content was in a single box.

        #5
        Looking nice, thank you

        Comment


          #6
          My bad i thought you were talking about the outer forum edge. And by the way i cant see on your demo here what you are talking about.


          Click image for larger version

Name:	Screen Shot 2018-01-10 at 7.05.05 PM.png
Views:	1
Size:	297.1 KB
ID:	8763

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            You can try changing all the rgba() values to white (#fff) and adjust the px values around. You can do that in the browser dev tools (Right click > Inspect) and you can see the changes on the fly.

          • Fleet
            Fleet commented
            Editing a comment
            I actually did do that on my TPB Extra theme and it didnt make the outer forum borders white for some reason. And then it added a white line across the breadcrumb. I think the ability to add that lighted backdrop to the forum over a dark background would be a sweet feature. So if you ever make it ill probably purchase it. Ill try again to fiddle with the code. I think i just put a 255 wherever there were "0" in the code. lol

          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            The 4th decimal number in rgba is the transparency. Change it to 1 to make it fully white and not transparent.

          #7
          I tried this. Didnt do anything.

          ​​​​​​.l-desktop #channel-tabbar,
          .l-desktop #footer {
          box-shadow: 0 0 8px rgba(#fff),0 8px 16px rgba(#fff)
          }
          .l-desktop #breadcrumbs,
          .l-desktop #channel-subtabbar {
          box-shadow: 0 3px 8px rgba(#fff), 0 14px 16px rgba(#fff);
          }
          .l-desktop .forum_disabled_wrapper {
          box-shadow: 0 0 0px rgba(#fff),0 12px 16px rgba(#fff)
          }
          .l-desktop #content {
          box-shadow: 0 12px 8px rgba(#fff),0 15px 16px rgba(#fff);
          }
          .l-desktop #notices {
          box-shadow: 0 5px 8px rgba(#fff),0 10px 16px rgba(#fff);
          }

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            You can use colors in either hex or rgb/rgba format but not both. Remove "rgba(" and ")" if you want to use hex values.

          • Fleet
            Fleet commented
            Editing a comment
            Can you elaborate on (" and ")? Im not sure what that means.

          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            You are doing rgba(#fff)
            Use only hex value #fff so you'll remove "rgba(" and ")"

          #8
          Ok thanks.

          Comment


            #9
            Go ahead and delete it didnt paste right.

            ? .l-desktop #channel-tabbar, .l-desktop #footer { box-shadow: 0 0 8px #fff,0 8px 16px #fff } .l-desktop #breadcrumbs, .l-desktop #channel-subtabbar { box-shadow: 0 3px 8px #fff, 0 14px 16px #fff; } .l-desktop .forum_disabled_wrapper { box-shadow: 0 0 0px #fff,0 12px 16px #fff } .l-desktop #content { box-shadow: 0 12px 8px #fff,0 15px 16px #fff; } .l-desktop #notices { box-shadow: 0 5px 8px #fff,0 10px 16px #fff; }

            Comment


              #10
              Very Nice! Sent a little thank you for this.

              Comment

              Working...
              X