How push css of template to that use by widget?

[fariborz khan]

i want create a widget and put a picture in it
i read forum an i see that i must create a template like this :

PHP Code:

<div class="block">
<div class="cms_widget_header"> </div>
<div class="cms_widget_content widget_content">
<div style="text-align:center">
<a href="http://www.vbhispano.com/foros/sendmessage.php?subject=0" rel="nofollow">
<img alt="Publicidad Disponible" src="http://imagenes.chevereto.net/images/qnZaF.png" title="Publicidad Disponible">
</a>
</div>
</div> 


and create a widget and put created template name to load that template for me
but i see that template use default vbulletin css.
Now:
i want push css of template to this widget that i can customize only this widget
in other hand i want push below item to my created template(i think i must use complete html code but i don't know what i must write it that contain style variable on it)

PHP Code:

.widget_content {
    background: none repeat-x scroll 0 0 #FFFFFF;
    border: 1px solid #DADADA;
    border-radius: 0 0 0 0;
    color: #424242;
    padding: 10px 6px;
} 


that when i change this item change apply only to this widget.

what is the best way that i can do it easily i must say that i see blow links but i want easy way that i can do this.

[HOW TO - vB4] Rendering templates and registering variables - a short guide



[HOW-TO vB4] Create a Widget using Plugins and Templates

and see this beautiful guide from kh99

Originally Posted by kh99

If you go to vbulletin CMS -> Widgets and click on "configure" next to your widget, at the bottom there's a Template Name field that probably says 'vbcms_widget_static_page'. You could copy the vbcms_widget_static_page template code to a new template, enter that new template name on the widget config page, then edit that template to look the way you want.

[kh99]

Are you asking how to create CSS so that it will only apply to that specific widget?

[fariborz khan]

Originally Posted by kh99

Are you asking how to create CSS so that it will only apply to that specific widget?

yes i want posh css criteria to my template
for example i want when create template i use

PHP Code:

    background-color: #F1F1F1;
    border: 1px solid #C1C1C1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: -2px 2px 2px #C8C8C8;
    clear: both;
    display: block;
    overflow: hidden;
    width: 100%; 


code in it

[Lynne]

Then you will either need to style your template inline, ie:

<div style="background: red;">...

Or you will need to give the template divs their own class and then write css for it, ie:

<div class="myown1">

then in additional.css:
div.myown1 {background: red;}

[fariborz khan]

thanks Lynne
i use your second advise and it work perfectly and i create this

now how put another to white area
so in one column of grid i can use 2 widget in one row

[fariborz khan]

thanks lynne i do this

[tbworld]

I have been working on extending the "widget_id" to the CMS widget, preview, article templates. This would allow us to target an individual view or widget template, without having to modify the actual template. You could then change the "relative" look via CSS on an individual basis -- obviously it doesn't change the html. It would be possible, now that we have a "widget_id" to change the HTML via JavaScript dynamically.

For example in CMS templates:

<div id="cms_wrapper_{vb:var widget_id}">

     normal widget code here...

</div>

I have this working, but I am trying to figure out how to package it. Very few hooks in the CMS code.

Then in your additional CSS, taken from @Lynne's post, in your CSS:

   div.cms_wrapper_12 {background: red;}

This would target widget 12. One problem is that the widget id's are not displayed in the admincp like the forum id's so a patch has to be installed in there as well -- so the widget id's can be easily discovered.

[fariborz khan]

thanks for your attention
I omitted h3 code in this widget because I like use it as link to advertisement or where I want like Home,Forum, or another and create a metro like template.
thanks again