Make vBadvance Widget look like vBulletin CMS

[xxEarluxx]

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
-----------------------------------------------------------------
http://img208.imageshack.us/img208/2852/wegit.jpg (http://img208.imageshack.us/i/wegit.jpg/)
-----------------------------------------------------------------

DOWNLOADABLE VERSION

[ALBCODERS]

Great ! Thanks .

[Daniel_HBK]

WoW !! very nice , thanks ,
5 stars + Installed

[Daniel_HBK]

uninstalled , please fix it ,

before :- http://img819.imageshack.us/img819/5061/beforeb.jpg

After :- http://img819.imageshack.us/img819/5797/13383029.jpg

lost fonts colors & headlines back ground

[xxEarluxx]

uninstalled , please fix it ,

before :- http://img819.imageshack.us/img819/5061/beforeb.jpg

After :- http://img819.imageshack.us/img819/5797/13383029.jpg

lost fonts colors & headlines back ground

All colors will have to be manually edited in the codes giving here:/* 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 */

I'm working on next version which should fix the problem of having to edit manually :)

[Webrunner]

does this work with vba dynamics?

[Alfa1]

I'd really love a vb3.8 version.

[Da-Vinci]

Looks like this may be slightly outdated with the new version of VBA released in January.

[Teascu Dorin]

This could be made to work with any style not only the default, I believe...

[digitaldome]

how to make block title in bold type and make it center like vb block. thanks

[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="" />