Board Optimization - Digital Point Better CSS

About
This is something we use on digitalpoint.com to make the CSS better and more efficient.

Installation

• Upload the contents of the upload folder to your installation
• Install the product-digitalpoint_css.xml product under AdminCP -> Plugins & Products -> Manage Products -> Add/Import Product

You can see a live version in action here (on any page really): http://forums.digitalpoint.com/

Details
Rounded Corners
vBulletin 4 only supports rounded corners for Firefox, Chrome and Safari. This plug-in makes rounded corners also work in Opera and Internet Explorer.

Gradients
It appends some CSS markup to your primary CSS file that makes use of CSS3 gradients (gradients defined right in the CSS file itself). vBulletin uses 5-7 gradient images per page view normally, and this eliminates the need for the browser to download those images. CSS3 gradients are supported in Safari, Firefox, Opera and Chrome. For browsers that don't support CSS3 gradients, they will simply fall back to the normal image-based CSS gradients that vBulletin uses by default.

Notes
This plug-in is useful for sites that use vBulletin 4 default styles, or at least styles that utilize the same classes and methods for doing things within the CSS files.

This plug-in does NOT add any extra CSS files, nor does it edit your existing ones. Instead it appends some new info to the end of your main CSS file that comes from it's own template. It also adds an attribution link.

You can find more info here: http://products.digitalpoint.com/vbulletin-css.php

Changes
1.0.2

• CSS3 Gradient support for IE10 (early, I know... but it's there)
• Handles gradients in vB Suite Blog and CMS
• Works properly for CSS stored as files

Uninstallation: Automatic uninstallation is a bit of a catch 22... you need to compile templates to uninstall it, but vBulletin has no function built in to compile a group of templates. So uninstalling it removes the code needed to uninstall before the uninstall code is executed. So in order to uninstall this, disable just the one plug-in that is part of this product at the template_compile location, and then run Compile CSS Templates option under AdminCP -> Maintenance -> Update Counters. Once you do that, you can uninstall the whole product without any problems.

[Taurus1]

Really want to check this out. However I get this when installing:

Fatal error: Maximum execution time of 60 seconds exceeded in /home/windows/public_html/includes/vb_template.php on line 51

Edit:

Tried it again, overwriting, but got this now:

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 161575271 bytes) in /home/windows/public_html/includes/vb_template.php on line 51

[Kolbi]

Will definitly have a look on it

[digitalpoint]

Originally Posted by Taurus1

Really want to check this out. However I get this when installing:

Fatal error: Maximum execution time of 60 seconds exceeded in /home/windows/public_html/includes/vb_template.php on line 51

Edit:

Tried it again, overwriting, but got this now:

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 161575271 bytes) in /home/windows/public_html/includes/vb_template.php on line 51

How many styles do you have installed? Curing installation, it does go through your *.css templates and recompiles them, but it should be fairly quick unless you have just a ton of styles I would think.

[giorgino]

I installed this, but non rounded corners in IE7
Thank you

[digitalpoint]

Only IE9 supports border-radius CSS, sorry.

[Kolbi]

Shawn, a little question on your product site you tell us something about traffic which is produced by the original css.

Do you know with possitive effect your modification can have in regarding loading times?

30-40kb can be saved on each page? Are you sure that it is so much?

[digitalpoint]

It certainly will make load times slightly faster on the front-end since there's less files to load, but it's not going to be a huge amount. If you are having speed issues, you should be looking more at backend stuff I would suspect.

It's not 30-40kb saved per page, but it's the equivalent of a 30-40kb document since a document can be compressed, and HTTP headers can't, so there is about 500% more network traffic for HTTP headers vs. the document itself.

[CK]

Hey DP,

This is great, I'm using HTC border radius to get the rounded corners. In your mind which would be better to use, your method of the one I'm using at the moment?

[digitalpoint]

HTC border raidus will work for some older versions of IE... personally I opt for not supporting old browsers and adding overhead of the HTC file itself. The newest version of IE supports border-radius, so if a user wants to use an outdated browser, I let them (they just won't get any of the new stuff that newer versions support)... {shrug}

But entirely up to you... but I don't personally cater to outdated browsers.