Add Drop Shadow to Main Body Container

[NumNum Village Idiot Find all posts View Profile Close NumNum]

Is there a way to add the shadow behind the titleimage? I tried;

 
 .l-desktop #titleimage {     box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 14px 16px rgba(0,0,0,.36); }

With no success.

[glennrocksvb Founder/Coder Find all posts View Profile Close glennrocksvb]

You mean the logo?

#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.

[NumNum]

Thank you!

[faustvasea Senior Member Find all posts View Profile Close faustvasea]

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

[glennrocksvb Founder/Coder Find all posts View Profile Close glennrocksvb]

#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.

[watershed]

You are a god

[faustvasea Senior Member Find all posts View Profile Close faustvasea]

Thanks for letting me know then,

[wheatcom Junior Member Find all posts View Profile Close wheatcom]

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.

[Mitch VFF Find all posts View Profile Close Mitch]

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

[zoran_dj Member Find all posts View Profile Close zoran_dj]

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:

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

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

[Mitch VFF Find all posts View Profile Close Mitch]

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

[Mitch VFF Find all posts View Profile Close Mitch]

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:

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

#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

[Mitch VFF Find all posts View Profile Close Mitch]

Any Ideas out there?

[Mitch VFF Find all posts View Profile Close Mitch]

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

[glennrocksvb Founder/Coder Find all posts View Profile Close glennrocksvb]

Mitch

VFF

Find all posts

View Profile

Close

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.



If we make the drop shadow work on the header on your forum, it would also have the same issue.

[Mitch VFF Find all posts View Profile Close Mitch]

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

.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);
}

[glennrocksvb]

I will check again.

[glennrocksvb Founder/Coder Find all posts View Profile Close glennrocksvb]

Mitch

VFF

Find all posts

View Profile

Close

Mitch, remove all the existing box-shadow code and replace all with this CSS 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.

[Mitch]

Worked nice
Thanks

[glennrocksvb]

Awesome! Thanks for confirmation.