Reduce the CSS file size?

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
Locked
Danielx64
Registered User
Posts: 1369
Joined: Wed Nov 04, 2009 5:51 am
Location: In a server room in Australia
Name: Daniel
Contact:

Reduce the CSS file size?

Post by Danielx64 »

Hello, I'm looking at setting up a forum based on PHPBB, but I do have a question.

I was checking the file size of the css files, and it like 70KB+ for the default theme (pro silver). Is it possable to compress any of that? I tried to combine all the different css files, then use CSStidy to clean it up a little (Convert FFFFFF to FFF, ect). but now I'm getting layout issues.

I looked at subsilver, but it all based on tables, and that a bad thing. The thing I like about subsilver, it light and fast. Anyone got any idea on how I can make the css file small?

Sorry about my bad english.
Please note that I will not be porting any of my mods to phpBB 3.1. Sorry for the inconvenience this may cause.
Image

User avatar
Balint
Registered User
Posts: 952
Joined: Tue Aug 06, 2002 2:19 pm
Location: Germany
Contact:

Re: Reduce the CSS file size?

Post by Balint »

Hi,

I made a small change to shrink the CSS file:

Open style.php and find

Code: Select all

echo $theme['theme_data'];
insert before that

Code: Select all

$theme['theme_data'] = preg_replace('!/\*.*\*/!Us', '', $theme['theme_data']);
$theme['theme_data'] = str_replace(array("\r\n", "\r", "\n", "\t"), '', $theme['theme_data']);
This deletes all comments in the files and removes whitespace - without loosing functionality.

Tests on my live-board:

Without Fix:
Filesize style.php: 77,8KB

With Fix:
Filesize style.php: 60,4 KB


Regards,
Bálint

Danielx64
Registered User
Posts: 1369
Joined: Wed Nov 04, 2009 5:51 am
Location: In a server room in Australia
Name: Daniel
Contact:

Re: Reduce the CSS file size?

Post by Danielx64 »

Balint,

Thankyou for your helpful tip. I will give a a shot when I get home tonight. Also looking at the CSS files, I found that there are some css selectors that are the same.

Example: In one CSS file, you got (This is for the ProNight theme)

Code: Select all

h3 {
	/* Sub-headers (also used as post headers, but defined later) */
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 3px;
	padding-bottom: 2px;
	font-size: 1.05em;
	color: #989898;
	margin-top: 20px;
}
and in another CSS file, you got

Code: Select all

h3 {
	border-bottom-color: #CCCCCC;
	color: #000000;
}
Can someone please explain how this work? To me, it just wasting space, and like I said before, I like to cut the sizes of my webpages as much as possable.

Thanks
Please note that I will not be porting any of my mods to phpBB 3.1. Sorry for the inconvenience this may cause.
Image

Locked

Return to “[3.0.x] Styles Support & Discussion”