Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 03 Oct 2013, 21:15
fariborz khan's Avatar
fariborz khan fariborz khan is offline
 
Join Date: Jul 2007
change in one widget style

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

Last edited by fariborz khan; 03 Oct 2013 at 22:01.
Reply With Quote
  #2  
Old 07 Oct 2013, 15:55
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
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..
Reply With Quote
  #3  
Old 11 Nov 2013, 04:42
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
Anybody able to point us in the right direction? Thanks...
Reply With Quote
  #4  
Old 11 Nov 2013, 07:12
tbworld tbworld is offline
 
Join Date: Oct 2008
Yes it can be done. Whats the widget type/template and I will post an example.
Reply With Quote
  #5  
Old 11 Nov 2013, 07:20
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
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...

Last edited by DemOnstar; 11 Nov 2013 at 08:45.
Reply With Quote
  #6  
Old 11 Nov 2013, 14:09
tbworld tbworld is offline
 
Join Date: Oct 2008
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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Last edited by tbworld; 11 Nov 2013 at 14:30.
Reply With Quote
  #7  
Old 11 Nov 2013, 16:12
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
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....
Reply With Quote
  #8  
Old 12 Nov 2013, 02:13
tbworld tbworld is offline
 
Join Date: Oct 2008
Originally Posted by DemOnstar View Post
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.
Reply With Quote
  #9  
Old 12 Nov 2013, 06:10
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
Originally Posted by tbworld View Post
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 {

Reply With Quote
  #10  
Old 12 Nov 2013, 06:51
tbworld tbworld is offline
 
Join Date: Oct 2008
Originally Posted by DemOnstar View Post
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 {

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.
Reply With Quote
  #11  
Old 12 Nov 2013, 07:02
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
A class is defined as


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

?

So you mean like this?


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

It is important to remember that I am retarded...
All guidance gratefully received..
Reply With Quote
  #12  
Old 12 Nov 2013, 07:28
tbworld tbworld is offline
 
Join Date: Oct 2008
Originally Posted by DemOnstar View Post
A class is defined as

So you mean like this?

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.
Essentially yes, but for example sake leave in the "widgewrapper" class. You would have to experiment to find what classes you want to leave out. I would recommend using your browser in develop mode, there you can see what class selectors are attached to your template's HTML . There is a bit of a learning curve there for you, but well worth your time.

It is important to remember that I am retarded...
All guidance gratefully received..
With technology moving as fast as it does, we are all idiots. You're not alone!
Reply With Quote
  #13  
Old 12 Nov 2013, 07:57
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
Splendid work!

I am mucking around with it now..
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 11:54.

Layout Options | Width: Wide Color: