Add drop shadow and shading to vBAdvanced modules like vBCMS widgets

[benstillman]

View the screenshots to see what it does. One is a before, the other is an after, aptly named.


Edit the CSS Template adv_portal.css

Change this:
.vba_module {
border: {vb:stylevar threadbit_border};
border-top: 1px solid {vb:stylevar body_background.backgroundColor};
}

To this:
.vba_module {
border: {vb:stylevar threadbit_border};
border-top: 1px solid {vb:stylevar body_background.backgroundColor};
-moz-border-radius:{vb:stylevar border_radius};
-webkit-border-radius: {vb:stylevar border_radius};
-moz-box-shadow:-2px 2px 2px {vb:stylevar vbcms_widget_shadow_color};
}

Save. Enjoy. Screenshots attached.

[TheLastSuperman]

It doesn't work in Internet Explorer???

(I'm kidding :p)

[benstillman]

It doesn't work in Internet Explorer???

(I'm kidding :p)

I just spit coffee out. Thanks for the laugh. LOL

[TheLastSuperman]

I just spit coffee out. Thanks for the laugh. LOL

No problem - I still make my wife laugh so all is good in my world ;)

Disclaimer: TheLastSuperman is not responsible for damages to personal or business property resulting from actions taken when reading his comedic whit.

[GONUMBER6]

Thanks I tagged for install :)

[benstillman]

Still works after the 4.0.5 update.

[Alfa1]

Does this work on vb 3.8.5?

[benstillman]

Does this work on vb 3.8.5?

I don't know. Try it?

[too_cool_3]

I tried this on vB 4.1.10 and vBa 4.2.0 but it doesn't do anything.

[too_cool_3]

Does anyone know how to make this work with vBa 4.2.0 on vB 4.1.10 ??

This is a good looking mod, just wish I could get it to work.

[curriertech]

There's no vbcms_widget_shadow_color stylevar in the 4.1.10 CMS Suite. Set it manually or add a stylevar for it, and remember this isn't going to work in IE.

[too_cool_3]

Good to know, thanks curriertech.

vBadvanced should include this by default to spruce up their look to match vB4.

[curriertech]

Good to know, thanks curriertech.

vBadvanced should include this by default to spruce up their look to match vB4.

I agree...vb4 has drop shadows on blocks by default (even in IE!) so it shouldn't be too hard to integrate it into vBa.

[fookaa]

Hi all,

Can anyone tell me how to use this code but adapt it so it works in FF14 ?

Works perfectly in FF12 but after that it stops working :(

[zascok]

Hi all,

Can anyone tell me how to use this code but adapt it so it works in FF14 ?

Works perfectly in FF12 but after that it stops working :(


Try this for shadow

.vba_module {
border: {vb:stylevar threadbit_border};
-moz-box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};
-webkit-box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};
box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};

}

and to be more precise

change the blockhead as well

.blockhead
{

-moz-box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};
-webkit-box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};
box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};

}

I'm not using roud corners but if someone wants to use

add this into blockhead

-moz-border-radius: 5;

[Spangle]

Try this for shadow

.vba_module {
border: {vb:stylevar threadbit_border};
-moz-box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};
-webkit-box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};
box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};

}

and to be more precise

change the blockhead as well

.blockhead
{

-moz-box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};
-webkit-box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};
box-shadow: -2px 2px 2px {vb:stylevar footer_moz_shadow_color};

}

I'm not using roud corners but if someone wants to use

add this into blockhead

-moz-border-radius: 5;


This works for 4.2.1 and FF15 if anyone is interested

[ckgb]

Screenshots look identical to me. Where should I look for difference?