Understanding the CSS Rollup

[brandondrury]

I'm approaching this from a performance standpoint. I'm trying to reduce my http requests.

Using Firebug I see that sidebar.css, widget.css, and tagcloud.css use up a combined < 1Kb but cause quite a bit of latency.

I'd love to merge these in a way that makes unmerging possible in the event of an edit. (Best of both worlds. ) So far none of the mods I've found have been helpful.

It's my understanding that the css rollup options are simply a rendering down of multiple CSS files (and the stylevars variable system, I presume). It seems like it would be super straight forward to say, "Hey rollup, why don't you toss in sidebar.css, widget.css, and tagcloud.css".

Anyone know how this works?

Brandon

[kh99]

The file includes/xml/cssrollup_vbulletin.xml determines which css templates go in each rollup, so you could probably just modify that.

[squidsk]

You might not want to edit the default vbulletin files though in case they get changed. Just create a new file call cssrollup_myrollups and put the following content :

<?xml version="1.0" encoding="ISO-8859-1"?>
<css product="product_name_here">
  <rollup name="my-rollup.css">
    <template>sidebar.css</template>
    <template>widget.css</template>
    <template>tagcloud.css</template>
  </rollup>
</css>

This will create the rollup file, you'd then need to change the default behaviour for the rollup to be used instead of the individual css files. This would require a plugin that both removes the three css files in question and adds the rollup file.

EDIT: You can use existing rollup files if there's one that suits your needs, just use the name of the existing rollup file and the css will be added to it. Also don't forget you'll need to rebuild the styles for the changes to occur.

[kh99]

Originally Posted by squidsk

You might not want to edit the default vbulletin files though in case they get changed.

That's a good point. And I think if you create a new xml file but use the name of an existing rollup (like "main-rollup.css") you can add to that rollup without needing to modify the existing file.

[nhawk]

Also be careful with the size in bytes and the number of rules in the rolled up CSS.

If it is too big, Internet Explorer will ignore anything beyond it's CSS file size limit.