There are other articles on vbulletin.org that will explain how to make a widget. This is just a quick explanation on how to attach a custom template and custom CSS to a widget. In this example the default style is used for the widget and we override it using CSS specificity.
After you have created your HTML static widget, go back into: AdminCP -> vBulletin CMS -> Widgets: Configure
Configure Widget Page
In this window or box look for "Template Name" on the bottom of the 'configuration widget window'. Enter the name of your template you plan to create for use with this widget.
AdminCP > Styles & Templates > Style Manager
Find the style you want this widget to appear with, then from the drop down select "Add New Template".
The template name must exactly match the name you inserted into the 'configuration widget window' (at the bottom).
Create new template: "vbcms_widget_static_page_test".
Insert the following code:
<vb:comment>
Create a new template, call it "vbcms_widget_static_page_test".
Insert the template name in the configuring widget window (located
at the bottom of the window) for the new widget you created.
It must exactly match the template name.
</vb:comment>
<style>
/* Verbose example CSS - Add to additional.css
template. I used a style element for simplicity.
*/
.widgetwrapper {
background: rgba(20,20,20,0.7);
border: none;
}
.widgetwrapper .cms_widget_header {
background: darkgreen;
border: none;
}
.widgetwrapper .block {
background: rgba(20,20,20,0.7);
border: none;
}
.widgetwrapper h3{
background: rgba(20,20,20,0.7);
color: lightgreen;
}
.widgetwrapper .cms_widget_content{
background: rgba(20,20,20,0.7);
border: none;
color: gold;
}
</style>
<vb:comment>
Standard static widget - Added "widgetwrapper" Class Only!
</vb:comment> <div class="cms_widget widgetwrapper">
<div class="block">
<div class="cms_widget_header">
<h3><img src="{vb:stylevar imgdir_siteicons}/html.png" alt="" /> {vb:raw widget_title}</h3>
</div>
<div class="cms_widget_content widget_content ">
{vb:raw static_html}
</div>
</div>
</div>
--------------- Added 11 Nov 2013 at 07:17 ---------------
On my daughters board I use a different method where I make public the "widgetId" property. Then you use that ID to modify your CSS or conditionally control your HTML for the default widget template. I will post something on this later.
I hope it helps. I though it together late last night so I hope it is readable :)