vb.org Archive - Create overwriting CSS file

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)

- - Create overwriting CSS file (https://vborg.vbsupport.ru/showthread.php?t=315460)

TheRealso0sick

11-16-2014 08:38 PM

Create overwriting CSS file

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

11-16-2014 08:51 PM

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

11-16-2014 09:43 PM

Quote:

Originally Posted by Lynne (Post 2523036)

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

11-16-2014 09:46 PM

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

TheRealso0sick

11-16-2014 09:56 PM

Quote:

Originally Posted by ozzy47 (Post 2523052)

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

11-16-2014 10:31 PM

Make a plugin for this:

AdminCP > Plugins & Products > Add New Plugin

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

Code:

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

11-16-2014 10:34 PM

Quote:

Originally Posted by ozzy47 (Post 2523054)

Make a plugin for this:

Awesome, thanks.
Gonna try this out

ozzy47

11-16-2014 10:36 PM

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

TheRealso0sick

11-17-2014 01:25 PM

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

11-17-2014 01:43 PM

Are you setting your css elements to !important ?

TheRealso0sick

11-17-2014 02:04 PM

Quote:

Originally Posted by ozzy47 (Post 2523117)

Are you setting your css elements to !important ?

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

--------------- Added [DATE]1416240528[/DATE] at [TIME]1416240528[/TIME] ---------------

Code:

<!-- 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=additional.css" />

</head>

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

ozzy47

11-17-2014 02:10 PM

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

TheRealso0sick

11-17-2014 02:11 PM

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

ozzy47

11-17-2014 02:15 PM

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

11-17-2014 02:18 PM

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

11-17-2014 02:25 PM

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

TheRealso0sick

11-17-2014 02:32 PM

That works!
Thanks for your help ozzy

ozzy47

11-17-2014 02:48 PM

Excellent, glad to hear all is good. :)

Lynne

11-17-2014 04:34 PM

Quote:

Originally Posted by TheRealso0sick (Post 2523051)

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

11-18-2014 01:25 PM

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

11-18-2014 01:30 PM

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

All times are GMT. The time now is 03:28 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01194 seconds Memory Usage 1,759KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (2)bbcode_code_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (21)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: