Miscellaneous Hacks - Add additional_css.css to all your pages

Instead of finding the template.css file to edit the .css properties for your pages, just put them all in this additional_css.css template. The additional_css.css file is linked right before the </head> in your page. This is for use until this is made standard in the vb product (I put in a bug report requesting this be included - Please consider adding user defined Additional CSS to pages).


Version History:
1.0 2009-11-22: - initial release by Lynne at vbulletin.org
1.1 2009-12-08: - fixed issue with style dateline not showing up. Fixed & issue (changes to &amp. added additional2_css.css file so the first additional_css file can be used in the parent style and then additional2_css used in the child styles.

Notes - if you only want this included on certain pages, then you may open the plugin "Add addition_css.css file to pages" and put a condition around it, such as (this is for just the index page and the showthread page):

PHP Code:

if (in_array(THIS_SCRIPT,array('index','showthread'))) {
all the code currently in the plugin
} 


.
.
To install:

1. Import product-product-lynne_add_css.xml
2. Add any additional css you want to add to the page in your additional_css.css template.

To uninstall:

1. Uninstall "Add additional css to your style"

Please mark Installed if you use this.

[mtha]

now the new version 1.1 doesnt have that problem anymore. it works great now, with langid. thanks

[Lynne]

Originally Posted by mtha

when i install this, and my default language is 2, i have

/forum/css.php?styleid=24&langid=2&d=&sheet=additional_cs s.css

And yet the other stylesheets in the page also have langid=2 and they are fine?

I can't think of why it wouldn't work. I checked my file and the template is set to templatetype="template" just like the other .css templates in the style. I really don't know anything about the language system in vbulletin since I've never used it before. If someone has any suggestions on what to look at here, I'm welcome to listen.

edit: Oh, just read your last comment that it is now working fine. Perhaps it was the missing style date that was causing the problems? Not really sure, but if it's working, then I'm glad.

[anthony parsons]

It seems that a custom css is actually not needed, because you can enter custom css directly into the existing css templates, and when you upgrade between versions, the merge system takes any custom coding and merges it into the newer template being replaced with, hence why no current custom CSS solution is available within the templating / stylevars system.

[Lynne]

Yes, you can do that, but I find it easier to have all my changes in one place instead of having to search out the template to change things there.

[anthony parsons]

Hmmm... thanks Lynne. I asked Wayne about this also and he suggested to stick with this concept as well... being all custom css in the one place and not relying upon the merge ability of the system to get it right.

[Deniz AKCANTAŞ]

thanks

[sam12345]

Lynne you are genius..:up:

[pneo]

Thank you for the fantastic (and much needed!) Mod Lynne.

Please could you clarify the syntax needed in the additional CSS please?

If for example I want to edit width of the search area that is under the '.navbar_search' selector in vbulletin.css...

Originally Posted by vbulletin-chrome.css

.navbar_search {
position:relative;
width:180px;
bottom: 1px;
{vb:stylevar right}: -{vb:math {vb:stylevar padding}*2};
display:block;
}

Do I need to 'call' the specific css file to overwrite it in additional.css or simply place...

Originally Posted by additional.css

.navbar_search {
position:relative;
width:200px;
bottom: 1px;
{vb:stylevar right}: -{vb:math {vb:stylevar padding}*2};
display:block;
}

...and it should automatically overwrite the original (when I inspect the page after making this alteration there is no change it is only using vbulletin-chrome.css)?

This clarification may help others so I look forward to hearing your response - perhaps you could provide an example of the structure of the additional.css?

Thank you in advance.

[Darkimmortal]

As long as you use the same or a higher priority selector (more specific) than the original then you can simply overwrite properties.

[Lynne]

Originally Posted by pneo

Do I need to 'call' the specific css file to overwrite it in additional.css or simply place...

.navbar_search {
	position:relative;
	width:200px;
	bottom: 1px;
	{vb:stylevar right}: -{vb:math {vb:stylevar padding}*2};
	display:block;
}

...and it should automatically overwrite the original (when I inspect the page after making this alteration there is no change it is only using vbulletin-chrome.css)?

You do not need to 'call' the file, just place the css in the template. In this particular case, since all you want to do is override the width property and leave the others alone, just add this to the .css template:

.navbar_search {
	width:200px;
}