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

    #16
    Is there a way to add the shadow behind the titleimage? I tried;
    Code:
     
     .l-desktop #titleimage {     box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 14px 16px rgba(0,0,0,.36); }
    With no success.

    Comment


      #17
      You mean the logo?

      Code:
      #header .site-logo img {
          box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 14px 16px rgba(0,0,0,.36);
      }
      Prefix it with .l-desktop if you want to apply it to desktop and tablets only.
      Helpful? Donate. Thanks!
      Fast VPS Host for vBulletin: A2 Hosting & IONOS

      Comment


      #18
      How I can make it only for forum, not topbar and subbar?

      Comment


        #19
        Code:
        #widget_XXXX {
            box-shadow: 0 0 8px rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.36);
        }
        Where XXXX is the widget id of the module. To find out the widget id, right-click on the module and choose Inspect. Find the containing div with widget_id="XXXX" attribute in the div tag where class name contains activity-stream-widget.

        Note: If you are using the Category Spacing mod, then it's not good to use because the space between the category blocks will also have the drop shadow.
        Helpful? Donate. Thanks!
        Fast VPS Host for vBulletin: A2 Hosting & IONOS

        Comment


        #20
        Thanks for letting me know then,

        Comment


          #21
          Looks good. Thanks. I made mine blue glowey.
          It does cause some undesirable horizontal shadows between modules, like breadcrumbs and notices, especially with any kind of transparent background. Doubling the blurs diffuses it a bit. Building a white shadow to mask it without masking vertical shadows or some extra coding with ::before and afters may be the solution but I'm leaving it for now. Good stuff.
          Works in vB 5.6.0.

          Comment


            #22
            I installed this code and it works fine but for the header (full width logo). The shadow is inwards on my desk top. Viewing on an Ipad it is properly placed at the border. Any ideas or another code I can try?
            I did add the code that Glenn posted in #17 above.

            It seems to get messed with a screen resolution change but only in the logo area. I also get a line in the bread crumb area. I'll nix this mod until another time

            Comment


              #23
              Originally posted by Mitch View Post
              I installed this code and it works fine but for the header (full width logo). The shadow is inwards on my desk top. Viewing on an Ipad it is properly placed at the border. Any ideas or another code I can try?
              I did add the code that Glenn posted in #17 above.

              It seems to get messed with a screen resolution change but only in the logo area. I also get a line in the bread crumb area. I'll nix this mod until another time
              You should modify the header cell in that case and not the logo image, here are 2 options you could try and both will work:

              Code:
              #header .site-logo {
                  box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 14px 16px rgba(0,0,0,.36);
              }
              Code:
              #header .header-cell {
                  box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 14px 16px rgba(0,0,0,.36);
              }

              Comment


                #24
                Thanks I'll try this out later when I'm on my desktop and report back

                Comment


                  #25
                  Originally posted by zoran_dj View Post

                  You should modify the header cell in that case and not the logo image, here are 2 options you could try and both will work:

                  Code:
                  #header .site-logo {
                  box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 14px 16px rgba(0,0,0,.36);
                  }
                  Code:
                  #header .header-cell {
                  box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 14px 16px rgba(0,0,0,.36);
                  }

                  Thank you very much..

                  That fixed the logo / header border issue that I had. See these screenshots and the black arrows. Is there a way to get rid of the red in those areas? This happens with any code I use


                  Click image for larger version

Name:	43FBD871-CE00-4F6A-A587-A9E2F3093911.jpeg
Views:	88
Size:	110.9 KB
ID:	21699Click image for larger version

Name:	2EDA8DE4-C0A2-4820-968C-543FD715CAC6.jpeg
Views:	66
Size:	127.5 KB
ID:	21700

                  Comment


                    #26
                    Any Ideas out there?

                    Comment


                      #27
                      Glenn
                      I have this all installed but the header. The code above does not work on my site. Any suggestions for a header code.
                      Thanks

                      Comment


                        #28
                        Mitch It actually works on your forum. It's just that you have a dark body background that the drop shadow cannot be seen. If you removed the background, you would see the drop shadow.

                        Click image for larger version

Name:	drop-shadow.png
Views:	15
Size:	177.4 KB
ID:	24757Click image for larger version

Name:	drop-shadow.png
Views:	10
Size:	177.4 KB
ID:	24758

                        If we make the drop shadow work on the header on your forum, it would also have the same issue.
                        Helpful? Donate. Thanks!
                        Fast VPS Host for vBulletin: A2 Hosting & IONOS

                        Comment


                          #29
                          I changed the dark shadow to a blue hue, everywhere but the header. When I use the header code it is not at the edges, but places the blue shadow inwards. It also effects the color of the menu drop down bar

                          Here is what I have so far

                          Code:
                          .l-desktop #channel-tabbar,
                          .l-desktop #footer {
                          box-shadow: 0 0 8px rgba(63, 127, 191),0 8px 16px rgba(63, 127, 191)
                          }
                          
                          .l-desktop #content {
                          box-shadow: 0 12px 8px rgba(0,0,0,.18),0 15px 16px rgba(63, 127, 191);
                          }
                          
                          .l-desktop #notices {
                          box-shadow: 0 5px 8px rgba(0,0,0,.18),0 10px 16px rgba(63, 127, 191);
                          }
                          
                          .l-desktop #breadcrumbs,
                          .l-desktop #channel-subtabbar {
                          box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 14px 16px rgba(63, 127, 191);
                          }
                          Attached Files

                          Comment


                          #30
                          Mitch, remove all the existing box-shadow code and replace all with this CSS code:

                          Code:
                          #wrapper {
                              filter: drop-shadow(0px 7px 7px rgba(3, 127, 191, 0.95));
                          }
                          vB5 HTML structure has changed since this mod was created 4+ years ago and the drop shadow code for the content that includes the header seems to be able to be simplified to the above code.
                          Helpful? Donate. Thanks!
                          Fast VPS Host for vBulletin: A2 Hosting & IONOS

                          Comment

                        Latest Topics

                        Collapse

                        Working...
                        X