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

    Free Mod 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.

    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));
    }
    ​​​​​​​For content excluding header:
    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));
    }
    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:

    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; 05-02-2022, 04:34 PM. Reason: Updated code
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Outstanding, Glenn. Love it!!

    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:	316
Size:	297.1 KB
ID:	8763

          Comment


          • Fleet
            Fleet commented
            Editing a comment
            I was just putting it next to the shadow i was talking about. I went ahead and added the code to my VB5 Theme and it looks like it does change that. But on my other themes you cant see it. Obviously because its dark. And then it looks like there is a line on the breadcrumb or whatever its called. Id love to just be able to add a white shadow on the sides of the forum. Up against my black background it would look like a light.

          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            I know the "line" you were referring to. The code needs to be tweaked around through trial and error to remove that line. It may take time to arrive at the right combination of values to get it right.

          • 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


                #11

                does not work

                Comment


                  #12
                  gimsy, I don't see the CSS code for the drop shadow in css_additional template. And the last CSS code (for the Blur replies mod) there has missing closing bracket symbol "}"
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                    #13

                    look now please

                    Comment


                      #14
                      You still have the missing } for the blur replies mod. See screenshot below.

                      Click image for larger version  Name:	image.png Views:	1 Size:	46.9 KB ID:	10824
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      Comment


                        #15
                        Originally posted by glennrocksvb View Post
                        You still have the missing } for the blur replies mod. See screenshot below.

                        Click image for larger version Name:	image.png Views:	1 Size:	46.9 KB ID:	10824
                        thank you very much friend

                        Comment

                        Users Viewing This Page

                        Collapse

                        There is 1 user viewing this forum topic.

                        • Guest Guest

                        Latest Posts

                        Collapse

                        Working...
                        X
                        Searching...Please wait.
                        An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                        Please push the back button and reload the previous window.'
                        An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                        Please push the back button and reload the previous window.'
                        An internal error has occurred and the module cannot be displayed.
                        There are no results that meet this criteria.
                        Search Result for "|||"