Create overwriting CSS file

[TheRealso0sick]

Hi,
I want to add a CSS file to my theme which is able to overwrites ALL of the existing stylesheets in a theme.
The css file will be hosted on my server, but i want to have the ability to edit it locally and then just upload it, not using the templates editor in vbulletin.

Is this possible and how do i make sure that it's overwriting all the other css?

Please help me out here, thanks!

[Lynne]

You'd need to remove all links to the vbulletin css (in the headinclude template, I believe, but there may be some other calls the in the main templates like FORUMHOME, SHOWTHREAD, etc) and then put in a link to your file on your server.

[TheRealso0sick]

You'd need to remove all links to the vbulletin css (in the headinclude template, I believe, but there may be some other calls the in the main templates like FORUMHOME, SHOWTHREAD, etc) and then put in a link to your file on your server.

But wouldn't that completly remove all other stylesheets? I don't want them to be gone.

What i want to do is to create a css file that is on top of all other stylesheets,
so i can overwrite them, instead of going in each of the template files and look for the
specific css code everytime.

Thanks for the help so far Lynne

[ozzy47]

Why not just add the css to the additional.css template, that will override the other css templates.

[TheRealso0sick]

Why not just add the css to the additional.css template, that will override the other css templates.

Because it's way easier to edit css on your local machine in a real text editor then
opening, saving & reloading the css template all the time.

I do a lot of work in the templates and it would save so much time if i were able to do it that way.
:/

Also, not all of the css is in the additional.css template, if you just have 1 file that is able to overwrite all other stylesheets, you could just check out which class or id you need via dev tools
and write it in your own css file.

[ozzy47]

Make a plugin for this:

AdminCP > Plugins & Products > Add New Plugin

Product: vBulletin
Hook location: parse_templates
Title: Custom Style Changes
Execution Order: 5

if (STYLEID == 1)
{
$template_hook['headinclude_bottom_css'] .= '<link type="text/css" rel="stylesheet" href="aaa.css' . '?d=' . $style['dateline'] . '" />';
}

1 is the style you are trying to do this to, aaa.css is the name of your stylesheet.

[TheRealso0sick]

Make a plugin for this:


Awesome, thanks.
Gonna try this out

[ozzy47]

Now that is not 100% tested with all the css in there, that was just some quick tests. :)

[TheRealso0sick]

Thanks for your help, but this doesn't seem to work.
Wherever i put my css file, theres always a additional.css underneath it that overwrites my edits :/

[ozzy47]

Are you setting your css elements to !important ?

[TheRealso0sick]

Are you setting your css elements to !important ?

No. Is that necessary if I do it this way?

--------------- Added 1416240528 at 1416240528 ---------------

<!-- BEGIN TEMPLATE: headinclude_bottom -->
<link rel="stylesheet" type="text/css" href="clientscript/vbulletin_css/style00079l/additional.css?d=1412187223" />
<link type="text/css" rel="stylesheet" href="https://code.google.com/p/my_project841924/source/browse/trunk/my_style.css?d=1412187223" />
<!-- END TEMPLATE: headinclude_bottom -->
<link rel="stylesheet" type="text/css" href="css.php?styleid=79&amp;langid=1&amp;d=1412187223&amp;sheet=add itional.css" />
</head>


This is how the file is included when I use your plugin.
Theres still a additional.css below my css file..

[ozzy47]

Yeah, the additional.css is the last thing loaded, so it will overwrite any css that is not set as important.

[TheRealso0sick]

But there must be a way to get around it? :/
And also, why are there 2 additional.css files loaded?

[ozzy47]

The way around it is like I said, set your CSS elements to important. Or you can remove the call for the additional.css from the templates.

I only see one additional.css in the code you posted above.

[TheRealso0sick]

What if i just cut all the css from the original additional.css file, leave it empty and then copy all of it to my css file, then include it via the plugin?

If you check the code above, theres 1 additional.css on line 2 and another at line 5.

[ozzy47]

Yeah you could cut it out of the additional.css or just comment everything out in the file.

[TheRealso0sick]

That works!
Thanks for your help ozzy

[ozzy47]

Excellent, glad to hear all is good. :)

[Lynne]

But wouldn't that completly remove all other stylesheets? I don't want them to be gone.

What i want to do is to create a css file that is on top of all other stylesheets,
so i can overwrite them, instead of going in each of the template files and look for the
specific css code everytime.

Thanks for the help so far Lynne
Ah, I misunderstood. I read your post and thought you wanted to completely get rid of ALL the CSS and then only have your own stylesheet.

[TheRealso0sick]

Np, Lynne.
And ozzy:

I actually found a much simpler way to get this to work.
All you do is just use the @import-rule and put it on top of your additional.css file.
(like @import url("screen.css"); )

That way all the external css from that file will be imported in your additional.css file..
You can overwrite existing css with the !important tag
and your good to go.

[ozzy47]

That sounds like a good way also, thanks for sharing. :)