vBulletin CMS Widgets - Make vBadvance Widget look like vBulletin CMS

This mod will alter the default look of your vBadvanced Widget and give it a similar look to that of your vBulletin CMS . All colors can be customized trough the CSS code given.
This is my fist mod ,so please feel free to improve upon the code if you wish and give your input .

Support Forums:
http://www.skinion.net/

INSTRUCTIONS

1. Edit template the "adv_portal_module_wrapper" located within your vBadvanced CMPS templates


2. Replace all with the following code:

{vb:raw mods.formcode}
<div class="adv_portal_widget">
<div class="adv_portal_widget_block">       
    <div class="collapse"  {vb:raw vba_style.portal_vspace}px;">
    <h2> 
        <strong>{vb:raw vba_style.portal_blockbullet} <vb:if condition="$mods['link']"><a href="{vb:raw mods.link}">{vb:raw mods.title}</a><vb:else /> {vb:raw mods.title}  </vb:if></strong >
    <vb:if condition="$vba_style['portal_collapsemods']">
            <a class="collapse" id="collapse_module{vb:raw mods.collapse}" href="{vb:raw relpath}#top" style="top: 0px ;right: 2px "><img src="{vb:stylevar imgdir_button}/collapse{vb:raw mods.collapseimg}.png" alt="" /></a>
        </vb:if>
    </h2>
    <div class="adv_portal_widget_content" id="module{vb:raw mods.collapse}"<vb:if condition="($mods['useshell'] & $vba_shellint['collapse'])"> style="display: none"</vb:if>>
        <vb:if condition="$show['table']">
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="blockbody" width="100%">
                {vb:raw modulehtml}
            </table>
        <vb:elseif condition="$mods['inctype'] == 'bb_code'" />
            <blockquote class="postcontent restore">
                <div class="bbcode_container">
                    {vb:raw modulehtml}
                </div>
            </blockquote>
        <vb:elseif condition="$show['divrow']" />
            <div class="blockrow">
                {vb:raw modulehtml}
            </div>
        <vb:else />
            {vb:raw modulehtml}
        </vb:if>
    </div>

</div>
</div>
</div>

<vb:if condition="$show['endform']"></form></vb:if>

3. Edit template the "additional.css" located in your "CSS Templates" and paste the following code:

/* VBADVANCED WIDGETS -START */
.adv_portal_widget { 
	_padding:0;
	overflow: hidden;
	display:block;
	width: 100%;
	clear:both;
	background-color:#f1f1f1;
	border:1px solid #C4C4C4;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow:-2px 2px 2px #C8C8C8;
margin-bottom:10px;
font:  bold 13px Tahoma,Calibri,Verdana,Geneva,sans-serif;
color: #000000;	
}
.adv_portal_widget a:hover {color:#417394;}
.adv_portal_widget a {color:#417394; }
.adv_portal_widget_block {
	_margin-bottom:6px;
	padding:6px;
	background:transparent url(images/misc/blog/top-highlight.png) repeat-x left top;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
padding-top:6;
}
.adv_portal_widget_content {
	color: #424242;
	border:1px solid #DADADA;
	border-top:1px solid #FFFFFF;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	background:#FFFFFF url(images/misc/blog/gradient-black-down.png) repeat-x 0 0;
	_background-image: none;
	padding:10px 6px 10px 6px;
font:   13px Tahoma,Calibri,Verdana,Geneva,sans-serif;

}
/* VBADVANCED WIDGETS -END */

PREVIEWS
-----------------------------------------------------------------

-----------------------------------------------------------------

DOWNLOADABLE VERSION

[Juggernaut]

How to make the modules have rounded corners in Explorer 9?
Edit: Nevermind, got it.

[zonaenlinea]

wow very good

[zascok]

works like a charm only the images address

images/gradients

and

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

Cheerz fot this!!!

[xxEarluxx]

Thanks , will try to fix when I get a break

[zascok]

one more for colapsi on 4.2

<img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_info_options}_40b.png" alt="" />