StyleVars + Definitions [Full List]

[Mark.B]

5.1.4 is not very far off, don't have an exact date though.

RC1 is already on this site.

[jdj]

With 5.14, you'll be able to do:

#widget_XXX {background-color: transparent';}

So bearing in mind that I'm on vB 5.1.3 PL1 I'm guessing this means I cannot 'target this widget's code' either on my live site or my test site at present.

When is 5.1.4 likely to come out?

[jdj]

Thank you. :-)

[Wayne Luke]

With 5.14, you'll be able to do:

#widget_XXX {background-color: transparent';}

[jdj]

OK, so you put the code in css_additional.css template. So what do you put into the css_additional.css template to change the background colour? Currently the colour that this ad widget is appearing against is white, but the colour immediately surrounding the advert itself (i.e. what appears to be in the ad widget itself) is grey; that's what I want to change. So the code is below, what code do you have to put into css_additional.css to change this colour from grey to white? And supposing you want it to change the background colour of all ad widgets displayed on your site? Rather than just the single "instance"?

<div class="canvas-layout-row no-columns h-clearfix l-row"> <div class="canvas-widget-list section-2 h-clearfix l-col__large-12 l-col__small--full"> <div class="canvas-widget default-widget axd-widget axd-container" data-widget-id="217" data-widget-instance-id="152"> <div class="widget-header h-clearfix"> <div class="module-title h-left"> <h1 class="main-title hide-on-editmode">Ad Widget Forum Page</h1> <span class="admin-only">Ad Widget Forum Page Module</span> </div> <div class="module-buttons"> <span class="admin-only"> <span class="move-icon module-button-item" title="Move module"><span>Move</span></span> <span class="edit-button module-button-item" title="Edit module"><span>Edit</span></span> <span class="close-button module-button-item" title="Remove module"><span>Remove</span></span> </span> <span class="toggle-button module-button-item collapse" title="Collapse" data-toggle-title="Expand"><span class="vb-icon vb-icon-toggle">Collapse</span></span> </div> </div> <div class="widget-content restore axd axd_152">

[Wayne Luke]

You should put all your custom CSS in the css_additional.css template. This will prevent any possible issues from occurring during an upgrade.

[jdj]

You need to add the module and save the page before you can view its ID.

So again, from your previous post you said "You can change the background color for an Ad module by targeting the unique CSS ID assigned to all modules in current versions."

Where do you put this code? Additional.css or somewhere else?

[Wayne Luke]

You need to add the module and save the page before you can view its ID.

[jdj]

Having looked at wrapper_background it's white which is what I want. However the advert I have up has a grey surround so I'm guessing that must be something to do with the module.

[jdj]

You can change the background color for an Ad module by targeting the unique CSS ID assigned to all modules in current versions. To get this ID, you have to add the module and they view its generated source code it would look like id="widget_XXX" where XXX is the unique ID.

I think by this you mean view the site with the ad module in place, right-click and view source? When I do this I can locate something called widget_xxx. Or do you mean go into site builder, add the module then click view source?

Also when you say targeting the unique CSS where do I do this? The additional.css template? If so, what do I put into it? widget_xxx what?

[Wayne Luke]

Which is the stylevar that controls the background colour of the area behind an advert when you add a banner to the site?

Since all modules are placed on the Wrapper, it would be the wrapper_background. That is the white background in the default style here.

You can change the background color for an Ad module by targeting the unique CSS ID assigned to all modules in current versions. To get this ID, you have to add the module and they view its generated source code it would look like id="widget_XXX" where XXX is the unique ID.

[jdj]

Big thanks to Wayne Luke for providing them. Now all you vbulletin 5 users have documentation for proper styling until it's added to the site.

Which is the stylevar that controls the background colour of the area behind an advert when you add a banner to the site?

[Wayne Luke]

Unfortunately, the only way currently is to override the style in the css_additional.css templates. Right-click on the element and get the classes assigned to it via inspect element and then assign CSS to that.

[mgurain]

Sorry I did not explain my problem well, I did not mean that, I mean :

The problem with default Arabic style is the font is small every where !
How could I change font & size in different parts of the forums ?

[Wayne Luke]

I could not find these, which variables are for :
1. in Forum Home : Forum Name ?
2. in Forum Home : Widget Thread Title ?
3. in Thread : Member Name ?
4. in Thread : Member Info (Title, register date ..)
5. in Thread : Tools under each post (Edit, Like ..)

None of these are style variables or even relevant to the look and feel of a site.

1) You set this when you install the software. Afterwards, you can change it in the Admin CP under Settings -> Options -> Site Name / URL / Contact Details.

2) You change the titles of modules by editing the module. Each one has its own option for this.

3) This is a language phrase so you would have to search in Languages and Phrases and update all relevant phrases.

4) See #3.

5) See #3