Integrating HTML into vBulletin style/skin

[sparklywater]

I have recently installed the 'Webtemplates' modification ( [vbulletin.org...] ) for my vBulletin forum. This mod allows integration of HTML code directly into a vBulletin style / skin's layout.

After I edit the HTML page in Microsoft Frontpage and then incorporate the HTML code into the 'webtemplate' (vBulletin skin + HTML code), the resulting page should show the same HTML page as in Frontpage within the layout of the vBulletin skin (ie. with the vBulletin header / footer, colours etc.).

Although the skin's layout is correctly inherited by the webtemplate, in the actual HTML content there are some inaccurate font colours, sizes, spacing between lines, etc. which are different from the page shown in Frontpage with the raw HTML code.

I know that this could be due to a clash between the CSS of the HTML page and the CSS of the vBulletin skin / style. I can't use the '!important' rule to override the vBulletin CSS because apparently this rule does not work in some versions of Internet Explorer. I don't know how else to fix this clash, so I would be grateful if someone can please give me some guidance on how to get the code to work properly.

[edited by: tedster at 1:32 am (utc) on July 3, 2008]

[tedster]

Helloo sparklywater, and welcome to the forums.

Have you looked into this (I found it on your vbulletin.org link, in the Advanced area):

Conditionals : Webtemplates supports VB3 template conditionals so you can design webtemplates which change their display under different conditions.

[rocknbil]

I think sparklywater is creating the effect in FrontPage and hoping to just paste it in and have it work.

There's a couple problems with this, if I'm getting it right. As tedster mentioned, vBulletin has a rich conditional and variable substitution system, for example,

<meta http-equiv="Content-Type" content="text/html; charset=$stylevar[charset]">

Where $stylevar[charset] is replaced with a value that is set in Language and Settings. No matter what template you use, this will always be the correct value.

Another is the if constructs they use, based on a perversion of XML syntax:

<if condition="$show['threadinfo']">
[specific output]
<else />
[other specific output
</if>

My point is, if you unanimously drop Front Page code into your templates, you're going to kill a lot of this functionality.

The way to do this is to go find the relevant templates and "bits" you want that represent that chunk in your design and edit them with the variables in place. You can locate these by going to

Vbulletin Options -> General Settings

And set "Add Template Name in HTML Comments" to ON. Now when you view source, you will see a comment for the begin and end of a template part.

As to your CSS problem, examine

Styles & Templates -> Style Manager -> edit your template copy for "All Styles and Options"

You can modify EXISTING VB styles to fit your needs, and under "Additional CSS Styles" add any that you need to support your template.