vBulletin CMS Widgets - Add drop shadow and shading to vBAdvanced modules like vBCMS widgets

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.

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

Originally Posted by too_cool_3

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]

Originally Posted by 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

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]

Originally Posted by zascok

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?