change in one widget style

[fariborz khan]

hi:
when I change border of widget all widget's border change, I want change border of one widget that I created in Static HTML can I do this?
in other hand I want create a widget in admincp that has own style

[DemOnstar]

I have been trying to do just this also..

I would like to make the html widget (for example) invisible i.e remove borders and colours etc but leave the contents of the widget visible..

[DemOnstar]

Anybody able to point us in the right direction? Thanks...

[tbworld]

Yes it can be done. Whats the widget type/template and I will post an example.

[DemOnstar]

Marvelous!

It is a static html widget..

I would like it to appear on the front page but it has the borders, the styles and colours etc of all the others widgets..
If I change that one, the change affects the others..

EDIT: The template looks to be called vbcms_widget_static_page but all other static html widgets use the same template..
If it is possible, I would just want it to affect only one static html widget..

Ideally, nothing would be seen other than the html within the widget, i.e. it will appear to be part of the page and not surrounded by a box with a title..

I also tried the <iframe> option within the first article but it doesn't work so well..
Having it as a widget would mean it could be used in other places..

Thanks...

[tbworld]

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

[DemOnstar]

Well Mr tbworld, that has removed most of my headache...I would have never worked that out...
I do have one issue which I can't seem to pinpoint.. There is some kind of box shadow remnant lingering in the widget. Getting rid of that would be the icing on the cake..

I did all the editing in your snippet and not in additional.css.

Quite honestly, you guys should be rewriting the entire software range...

Thanks for your time and I hope that many people will benefit from this exchange..I saw the unanswered question so many times today during my SIFT..

Now, thanks to you, there is a remedy that works... Great stuff....

[tbworld]

Originally Posted by DemOnstar

Quite honestly, you guys should be rewriting the entire software range...

I do not work for vbulletin or represent them. I just help out here, working around my busy schedule -- as many of us do.

Thanks for your time and I hope that many people will benefit from this exchange..I saw the unanswered question so many times today during my SIFT..
Now, thanks to you, there is a remedy that works... Great stuff....

You are welcome.

I will post the other method after I test it on a virgin copy of vbulletin --mine is highly modified and I need to make sure I didn't change any core code to make it work. The 'widgetID' adds some real convenience especially when you have many widgets.

[DemOnstar]

Originally Posted by tbworld

I will post the other method after I test it on a virgin copy of vbulletin --mine is highly modified and I need to make sure I didn't change any core code to make it work. The 'widgetID' adds some real convenience especially when you have many widgets.

Thank you for your time and effort..I will look forward to learning more things...

BTW, I cleared the box shadow by adding

box-shadow: none; to your .widgetwrapper {

:up:

[tbworld]

Originally Posted by DemOnstar

Thank you for your time and effort..I will look forward to learning more things...

BTW, I cleared the box shadow by adding

box-shadow: none; to your .widgetwrapper {

:up:

If you remove the other 'class' selector names from the new template you created, they will not inherit the default style. In many cases it will make the styling a bit easier since you do not have to inherit the CSS properties already set. You will not have to remove the shadowing, since it will not exist.