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

https://vborg.vbsupport.ru/external/2014/05/70.png

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

This will help..

https://vborg.vbsupport.ru/external/2014/05/70.png

#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

https://vborg.vbsupport.ru/external/2014/05/71.png

[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]

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]

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 1399206015 at 1399206015 ---------------

This is what i've got so for working

https://vborg.vbsupport.ru/external/2014/05/63.png

resulting in this

https://vborg.vbsupport.ru/external/2014/05/64.png

[billstelling]

Try

.above_body {
-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;
}

[Phillip]

That should work, I did the same thing before posting on here.

[DreadsUK]

Try

.above_body {
-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;
}

Where do i post that, additional css?

[Phillip]

Anywhere in that after } of the last one.

[DreadsUK]

Got It! it worked :D

[Phillip]

Awesome! Well done.

[EliasAlucard]

Excellent. Thanks for all the help guys!