Different CSS styles for vB vs rest of site

[AndyN]

Hi there,

I have a fairly complex site CSS style-wise and am trying to integrate vB into one of the pages. I am successful with modifying vB's header / headinclude / footer to get the forum to display in a "div" but am now running into CSS style conflicts - things just don't look right.

Is there a way to have the vB CSS styles active only in the vB "div" (and vice versa - have the site's CSS styles active for rest-of-site)?

PS - i have searched these forums quite a bit and have come up dry - i am a little surprised that this isn't a newb tutorial somewhere - unless it is so easy I am missing something ...

TIA ...

[Lynne]

I don't get what you mean. If you only include the vbulletin css in the vbulletin portion of your site, then it shouldn't interfere with the css on other pages of your site.

[ProSkinner.com]

If you could add "html " before all vBulletin classes, it would get the job done and successful override your custom CSS. (e.g. changing .tcat { } to html .tcat { } would force override any inherited CSS, which is the problem you're facing. Because vBulletin's existing CSS definitions can't be renamed, you won't be able to do that.

My suggestion is to edit your custom CSS and remove any conflicting tags. For example, if you have a definition called div#header or div.header, you should remove the "div" part or anything before the # or dot.

[AndyN]

Lynne, the conflict happens when i need to include the CSS style definitions of the current site in order to display the header / footer of the forums page and maintain the site look & feel, then include the vBulletin CSS definitions for the forums themselves. The two sets of CSS definitions have names that overlap/conflict.

ProSkinner is right - i was looking for a way out exactly as he first stated - the ability to globally change the names of the vBulletin classes would do what i need. I am very surprised this issue has not come up before thus forcing the ability to re-name vBulletin CSS definitions.

So i am stuck in a fairly ugly position. Since I cannot re-name vBulletin CSS definitions, then i need to re-name the definitions for the rest of the site (which i also cannot do). SO i will have to maintain a variant of the rest-of-site style sheet with any conflicts removed. Thus if the style sheet for rest-of-site is updated, the custom sheet will have to be manually updated as well. OH and i will have to manually identify the conflicts as well - something i don't look forward to (does anyone enjoy reading style sheets?).

It would be nice if vBulletin had the option to define a unique set of CSS definitions for integration purposes by adding a prefix as ProSkinner recommends.

[Lynne]

Hmmm, I can see where that is messy. Is it the actual css that is used in the header/footer that is causing the problems or the extra css brought in that is causing the problems? I'm wondering if you could put a condition around the css in the headerinclude template and not include it on your extra pages and instead include another css page (one you create by taking the original and deleting all the css you don't need).

Any solution is going to be a bit messy.

[EnIgMa1234]

You could just copy the CSS of the header and footer into the vbulletin CSS and give them unique names.