vB4 board shadow effect?

[EliasAlucard]

On vB3, and as we can see on this very forum, there's a small shadow around the forum board. This effect seems to have been removed in vB4? Because I cannot find it, nor have I ever seen a skin with this shadow effect.

Is there any way in stylevars to skin a vB4 forum with a shadow like this vB3 skin?

[Mr_Running]

Styles & Templates --> Search in Templates --> Search for Text --> additonal.css (In style of your choice) --> Add to additional css...

Try Something like this in the additional.css

.body_wrapper {
   -moz-box-shadow: 4px 4px 5px #FF0000;
   -webkit-box-shadow: 4px 4px 5px #FF0000;
   box-shadow: 4px 4px 5px #FF0000;
}

Change #FF0000  to your shadow colour / color

[EliasAlucard]

^^ Yeah, that worked. However, it only shows the shadow on one side, and only in the body, not in the header. I'd like to have the shadow effect all over the board so to say, on both sides and under the footer as well as above the header.

[billstelling]

This will help..

#Example_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}

or

#Example_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
box-shadow: 0 0 5px 5px #888;
}

http://www.css3.info/preview/box-shadow/

[DreadsUK]

Originally Posted by billstelling

This will help..

#Example_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}

or

#Example_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
box-shadow: 0 0 5px 5px #888;
}

http://www.css3.info/preview/box-shadow/

Hope you guys dont mind me jumping in (dont mean to hijack) just interested in this also

just tried the code but it doesn't cover the top of the page

[billstelling]

Because those elements are above the body. You will have to add it for the header and nav, as well as getting the shadow code correct to pull off the effect.

[DreadsUK]

The code is for box which puts the shadow all around the nav bar. How to i add it to just the sides of it?

[EliasAlucard]

Originally Posted by billstelling

Because those elements are above the body. You will have to add it for the header and nav, as well as getting the shadow code correct to pull off the effect.

Where do I place the shadow code in the header and nav elements?

[billstelling]

Any css style element can be change via Additional CSS. So most times anything you don't change using the stylevars gets added to it.

for the header it would be:

.header {
-moz-box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
-webkit-box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
}

for the navbar it would be:

.navbar {
-moz-box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
-webkit-box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
}

It should be something like that..

[DreadsUK]

Originally Posted by billstelling

Any css style element can be change via Additional CSS. So most times anything you don't change using the stylevars gets added to it.

for the header it would be:

.header {
-moz-box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
-webkit-box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
}

for the navbar it would be:

.navbar {
-moz-box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
-webkit-box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
box-shadow: 0 2px 5px 5px #888, -0 -2px 5px 5px #888;
}

It should be something like that..

neither of those worked

--------------- Added [DATE]1399206015[/DATE] at [TIME]1399206015[/TIME] ---------------

This is what i've got so for working



resulting in this