An easy way to save loads of bandwidth ( Font tags >> Style Sheets )

[Kier]

Saving bandwidth is good for everyone, so here is a little tip to save absolutely buckets of it.

You may have noticed in your styles CP that there is an option to specify a 'class' for the various font sizes. This is what it's for :)

Normally, if you use the default settings, every single piece of text on a vBulletin page will be surrounded by <font> tags, each of which contain this sort of information (view the source of this page and you'll see)
<font face="verdana, arial, helvetica, sans-serif" size="2">
You'll see that code repeated hundreds of times all over the pages. Wouldn't if be good if we could somehow take that formatting information and store it centrally in the HTML, then have all the <font> tags reference that single source?

Well you can.

Let's try it for the most common tag - <normalfont>.

Normally, <normalfont> is replaced with this sort of thing: <font face="verdana, arial, helvetica, sans-serif" size="2"> because your settings for <normalfont> look like this:

http://kier.3dfrontier.com/images/normalfont01.gif

Let's get rid of all that superfluous information, and simply replace it with a CSS style definition:

http://kier.3dfrontier.com/images/normalfont02.gif

<normalfont> will now be replaced with <font class="nf">This is much, much smaller than that long definition we had before, but how do we tell it what font and size we want it to use?

Look up at the top of your styles control panel, and you will see an area where you can edit the headinclude template. By default, your headinclude will look like this:<meta http-equiv="MSThemeCompatible" content="Yes">
<style type="text/css">
BODY {
SCROLLBAR-BASE-COLOR: {categorybackcolor};
SCROLLBAR-ARROW-COLOR: {categoryfontcolor};
}
SELECT {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 11px;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
TEXTAREA, .bginput {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
#all A:link, #all A:visited, #all A:active {
COLOR: {linkcolor};
}
#all A:hover {
COLOR: {hovercolor};
}
#cat A:link, #cat A:visited, #cat A:active {
COLOR: {categoryfontcolor};
TEXT-DECORATION: none;
}
#cat A:hover {
COLOR: {categoryfontcolor};
TEXT-DECORATION: underline;
}
#ltlink A:link, #ltlink A:visited, #ltlink A:active {
COLOR: {linkcolor};
TEXT-DECORATION: none;
}
#ltlink A:hover {
COLOR: {hovercolor};
TEXT-DECORATION: underline;
}
.thtcolor {
COLOR: {tableheadtextcolor};
}
</style>

$headnewpm
Just before the closing </style> tag, we will now add our central definition for how <normalfont> will be formatted. Add this: .nf {
FONT-FAMILY: verdana, arial, helvetica, sans-serif;
FONT-SIZE: 13px;
}
This CSS class definition will now be called for ALL the <normalfont> tags, so your resulting HTML pages will be much smaller. Repeat this for <smallfont> and <largefont> and you're laughing :)

[eva2000]

always wondered why there was so many font tags in the html code - but thought the stylesheet covered that.. guess you didn't before ..

thanks kier :)

[Kier]

We use the full font tags for the default templates/replacements because we have to make sure that vB works half-decently in all possible browsers... by using this CSS you are cutting out those users whose browsers don't support CSS (IE3, NS3), but quite frankly (and this is my opinion, not that of vBulletin), if a user can't be bothered to upgrade from those browsers to something new, then I'm not going to put loads of extra code into my pages to make it work for them alone.

[wajones]

Thanks for the tip

[TommyBALL]

That tip shaved 10KB away from my forumhome-page :eek:. That's a 16% reduction.

Thanks! :)

[Kier]

I've done some browser experimentation, and found that Nutscrape 4 messes that up (surprise surprise), so I've come up with these, which fix the problem.

The class for normalfont and largefont is 'nf' and the class for smallfont is 'sf'.

Plonk these in your headinclude:.nf { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt }
.sf { font-family: verdana,arial,helvetica,sans-serif; font-size: 10px }

[eva2000]

yup shaved off 15kb on my front page if you view it uncompressed - compressed it saved only 700 bytes hehe

[cdaveb]

Originally posted by Kier
We use the full font tags for the default templates/replacements because we have to make sure that vB works half-decently in all possible browsers... by using this CSS you are cutting out those users whose browsers don't support CSS (IE3, NS3), but quite frankly (and this is my opinion, not that of vBulletin), if a user can't be bothered to upgrade from those browsers to something new, then I'm not going to put loads of extra code into my pages to make it work for them alone.

Personally I think that if someone doesn't use a CSS browser, that shouldn't make the page not work- I know of one vBulletin site which is targeted towards Dreamcast users, many of which are using the Dreamcast to browse the board with HTML 3.2 and no CSS support. Additionally, those folks who browse in Netscape (4 at least, don't know about 6) and disable Javascript have CSS disabled too. But I also think there's really no harm done if users without CSS browsers can't see things in the font and size intended- these are enhancements, hardly requirements for readability. CSS is perfect for things like font and size settings, which are enhancements only and not vital to the content of the page.

One thing I would like to see is to have the image pixel sizes also stored in variables or in some other way set such that you could put the image widths and heights in wherever possible without making it difficult to replace them. The lack of image sizes on most of the images in the tables make the page jump around like crazy when loading in my browser, and will cause slowness in loading in browsers which need that data to render the tables in the first place. I've gone through and put them in most of my templates, but it will be a pain when I change the images if their sizes change, so it would be better to be in a variable somewhere.

[eva2000]

One thing I would like to see is to have the image pixel sizes also stored in variables or in some other way set such that you could put the image widths and heights in wherever possible without making it difficult to replace them. The lack of image sizes on most of the images in the tables make the page jump around like crazy when loading in my browser, and will cause slowness in loading in browsers which need that data to render the tables in the first place. I've gone through and put them in most of my templates, but it will be a pain when I change the images if their sizes change, so it would be better to be in a variable somewhere. that would be great... i haven't done the hard coding of image sizings on my forum yet since i haven't settled on new graphics/dimensions yet but this would be nice :)

[nuno]

thanks Kier ;)

[Kier]

forumdisplay is the page that will benefit most from this little tweak - compare the sizes before and after the alteration for a page with lots of threads displayed ;)

[eva2000]

Originally posted by Kier
forumdisplay is the page that will benefit most from this little tweak - compare the sizes before and after the alteration for a page with lots of threads displayed ;) saved 1.5kb compressed :D

[Fquist]

I agree with you, cdaveb, altough I go a bit further in my css-ness, by totally disabling table things for css-incapable users. css-incapable users will just see transperent tables with images.. all those table/tr/td tag attributes gone make for much easier writing of html and also reduce the bandwidth used a lot..

[jucs]

Wasn't something like this factored or optioned from the start? This confuses me a bit when I read this thread as to why that is?

[lichtflits]

is Head Insert the same as HeadInclude?

[Kier]

Originally posted by jucs
Wasn't something like this factored or optioned from the start? This confuses me a bit when I read this thread as to why that is? Have you read this thread? I have already explained why this is not set as the default for vBulletin.

[Kier]

Originally posted by lichtflits
is Head Insert the same as HeadInclude? Yes it is. Head Insert was renamed to headinclude for vBulletin 2.0

[lichtflits]

thx kier.

now I can make it :D

[jucs]

Netscape Sucks! :D

As a webmaster, I HATE Netscape.:p

[julius]

Thanks Kier.
Do you have any more suggestions to save bandwidt?

[ipf]

i will save this tip at once!

shoot, would be cool if i had a vb folder "favorite posts" or some such where i could store this!

ipf.

[Vinnie]

I realized it early on and it was one of the first things I changed (using styles instead of embedded font tags)

I took it one step further and moved the style out of the headinclude and into a separate .css file.

This has the drawback of not supporting the replacements (PHP variables) so all of the colors are hard coded in the .css file.

My question is, does a browser usualy cache the .css file?

My thinking is that the browser will cache the .css file, and this saves you the entire size of the embedded STYLE area on each page after the initial load.

???

[eva2000]

Originally posted by julius
Thanks Kier.
Do you have any more suggestions to save bandwidt? yeah install mod_gzip for server wide compression of pages other than php, i.e. html, cgi, shtml, pl etc

http://www.i4net.tv/marticle/get.php?action=getarticle&articleid=12

[Wayne Luke]

Originally posted by Vinnie
I realized it early on and it was one of the first things I changed (using styles instead of embedded font tags)

I took it one step further and moved the style out of the headinclude and into a separate .css file.

This has the drawback of not supporting the replacements (PHP variables) so all of the colors are hard coded in the .css file.

My question is, does a browser usualy cache the .css file?

My thinking is that the browser will cache the .css file, and this saves you the entire size of the embedded STYLE area on each page after the initial load.

???

Yes, the browser will cache the .css file unless:
1. Nocache headers are sent in the requesting page.
2. There is a syntax error in the CSS file.

[CdoG]

Wow, this is awesome...

Thanks Kier

[julius]

But I'm on a shared server and I don't think the owner can let me do that. :rolleyes:

[Nicholas Brown]

Originally posted by julius
But I'm on a shared server and I don't think the owner can let me do that. :rolleyes:

Just email them and ask - it doesnt hurt to ask :)

[Nicholas Brown]

thanks Kier - You know me - Mr Skinflint - I'll do things like this to save a bit of ca$h :)

[eva2000]

Originally posted by Nicholas Brown


Just email them and ask - it doesnt hurt to ask :) yeah ask nicely and see what they say :)

[julius]

.... and post here the answer.:)

[eva2000]

Originally posted by julius
.... and post here the answer.:) good luck :)

[Jujubee]

Another problem with the pt and px system is that the fonts are fixed at those sizes. They will not change when a user changes the font size on their browser (in IE: View -> Text Size).

You'd have to use the name system:

xx-small
x-small
small
medium
large
.
.
.
etc

[mjames]

I just did this little tweak, Kier. It made my vB even more quick. You the man!

[robertusss]

bandwidth....
...did anybody here move all those gifs etc to another server?

[tubedogg]

What gifs?

[robertusss]

erm... "what gifs?!?"

simply everything around here that is not ABCDEF...Z0123..9 or tables is gfs : the logos, icons, buttons, avantars and smilies.
Would be nice to store all those images on another server than the php-engine.

Because: the php/mysql engine is a dedicated server we pay for each gig - and the images we could put on any "free" webspace-provider...

[tubedogg]

You didn't mention that you were talking about moving your images to another server, you just said "did someone move the gifs".

Anyway it's been done, where one dedicated server is the MySQL server and the other server is the PHP/web server. However in these cases the admin owns both machines.

It is specifically against the TOSes of 99% of the free hosts (including GeoCities, AngelFire, Lycos Tripod, etc.) to hotlink images, and accounts that are pulling images like that will be deleted without warning in most cases. I would not recommend it unless you find it fun to upload your images to a new server every day.

[robertusss]

OK, but it is possible... is there already more info on that somewhere around here? I think it must be quite complicated...

[Kier]

Actually, it's extremely easy - you would just upload the images to http://www.myfreeserver.com and then set your {imagesfolder} replacement variable to point to that address.

That said, expect to have your free account shut down within days of doing this, as most hosts will be very upset by your actions.

[robertusss]

OK, I thought maybe I end up having http://www.myphpserver.com/forum/http://www.myfreeserver.com/-urls ...

I don't know how the paths are being handled by all templates...

[RobAC]

Kier,

This is awesome!!! I've been trying to trim my forums down the last week as a couple critical members who access my forums via slow dialup have complained about vBulletin being too bulky in comparison to other forums such as phpBB. Your .css changes shaved another 6.5 KB off my uncompressed forum home page. Thanks!

[BluSmurf]

excellent tweak :)

[Thomas P]

Thanks Kier,
amazing!
-Tom

[julius]

He wants to know if it is a Perl Module or an Apache Module and what is it for?

I think it is an Apache module and it compresses files to about 50%, saving bandwidt.

Is it correct? What more technical details can I tell him and convince him?

Thanks :)

[tubedogg]

It compresses files up to 80% or 90%.

PHP has to be recompiled with it, if I'm not mistaken.

You can find out more at http://www.gzip.org/zlib/

[julius]

My hosting installed ZLIB and now my forum is really more speedy.
He doesn't install gzip, but only ZLIB 1.1.3 on php 4.0.5. It's enough or I need Gzip too?
Hon can I use ZLIB for my home page (php) too?
:)

[Wayne Luke]

Originally posted by julius
My hosting installed ZLIB and now my forum is really more speedy.
He doesn't install gzip, but only ZLIB 1.1.3 on php 4.0.5. It's enough or I need Gzip too?
Hon can I use ZLIB for my home page (php) too?
:)

zLIB allows you to create gzipped compressed documents in PHP. It stands for Zip LIBrary.

[Lapo Luchini]

Is there an easy way to see IF page was compressed and how much?
I find noting, even if ultra.comprehensive Netscape4.75 info page...
(not talking abuont Mozilla or IE that says almost nothing, neither the actual size of the page ^_^)

[julius]

I've not let member use avatar until now, because I was afraid that my forum would be too slow.
Now, with Zlib, I want to set avatar on, but I would know if the avatar will be compressed with zlib and if the forum will slow too much.
What is the right bytes and pixels dimension of avatars to don't slow down the forum and, at the same time, don't restrict members too much ? :)

[robertusss]

avantars are GIF or JPEG - those are already compressed by format...

[Wayne Luke]

Originally posted by julius
I've not let member use avatar until now, because I was afraid that my forum would be too slow.
Now, with Zlib, I want to set avatar on, but I would know if the avatar will be compressed with zlib and if the forum will slow too much.
What is the right bytes and pixels dimension of avatars to don't slow down the forum and, at the same time, don't restrict members too much ? :)

If you set your avatars to between 50X50 or 65X65 and less than 4K they won't slow down your board. They also tend to load after everything else so they won't slow down your users.

[julius]

Thanks very much. :)

[julius]

I am on a shared server. About 20 members on line.
What is the best setting of Gzip between 1 and 9? It seems to me there is not much difference.

What Add Standard headers in admin CP is for? It's better to set it to YES or NO to save bandwidth? :confused:

[Kier]

Only use Gzip level 1. Anything more is a waste of CPU resources for a tiny gain in compression.

The ability to set a level other than 1 will probably be removed in a future version of vBulletin.

[Wayne Luke]

Originally posted by julius
What Add Standard headers in admin CP is for? It's better to set it to YES or NO to save bandwidth? :confused:

If your forums are working correctly then you should leave this setting alone. It will not help whatsoever with bandwidth usage.

[julius]

Thanks :)

[Thomas P]

Hi there,

great hint, works in 2.0.3.

BUT: you have to add $headinclude in between the <head>-tags in the standardredirect template, unless you like weird font settings ;)

cu,
-Tom

[centris]

Originally posted by ThomasP
Hi there,

great hint, works in 2.0.3.

BUT: you have to add $headinclude in between the <head>-tags in the standardredirect template, unless you like weird font settings ;)

cu,
-Tom

What do you mean weird font settings? Kier never mentioned anything about 2.03?

[VirtueTech]

Originally posted by wluke


Yes, the browser will cache the .css file unless:
1. Nocache headers are sent in the requesting page.
2. There is a syntax error in the CSS file.

Does this go for Javascript includes as well Example:

<script language=Javascript src="my.js" type="text/javascript"></script>

[Thomas P]

Originally posted by centris
What do you mean weird font settings?

The standard redirect pages won't show the changes done in css unless you include the simple line "$headinclude" into the redirect template...

This seems to have changed in 2.0.3


Kier never mentioned anything about 2.03?


That's why I mentioned this.

Use it or leave it - it works fine for me.
-Tom

[pran]

Originally posted by julius
He wants to know if it is a Perl Module or an Apache Module and what is it for?

I think it is an Apache module and it compresses files to about 50%, saving bandwidt.

Is it correct? What more technical details can I tell him and convince him?

Thanks :)

Check the logfiles. I've enabled mod_gzip on my server but I could not see any performance improvement (from the logfiles, that is). The mod_gzip web has some tools to let you analyze your logfiles.

[pran]

Originally posted by Thomas P


The standard redirect pages won't show the changes done in css unless you include the simple line "$headinclude" into the redirect template...

This seems to have changed in 2.0.3



That's why I mentioned this.

Use it or leave it - it works fine for me.
-Tom

My board is an upgrade from 2.0.1 to 2.0.3 and $headinclude seems to be missing from the default template.

[mjames]

Originally posted by pran


My board is an upgrade from 2.0.1 to 2.0.3 and $headinclude seems to be missing from the default template.
Yes, I experienced that problem in all my redirection templates when I upgraded from 2.0.0 to 2.0.3. All you have to do is add the $headinclude in the header of your standardredirect template.

[pran]

Thanks for the tip! I thought I had to edit each and every one of the redirect templates. Why isn't standardredirect part of the redirect template group? Confusing...

[Thomas P]

Yes, perfectly right.

redirect template, not redirect templates :D

cu,
-Tom

[centris]

I only noticed this to-night, but the fonts on my old Lite Forum look better than my main 2.03 forum. Looking closer I found that 2.03 lists sans-serif as a font, where VB Lite does not. Which font by default does Lite use? and 2.03? I have all three on my system. Finally I use the hack in this thread but never knew what values to use for large font? Anyone.

[reveltaion456]

Well, I did it and everything looks the same. I don't know how much bandwidth I saved but it's got to be worth it since I can see in the "view source" document that its shorter

[JamesUS]

I believe vB Lite (and vB 1.1.x) uses Arial as default, whereas vB 2.x uses Verdana. The other fonts are specified in case the user doesn't have the main fonts installed (unlikely, I know, but it does happen).

pran: Grouping is done alphabetically, so standardredirect doesn't fit into the rest of the redirect_xxx group alphabetically, therefore it can't be included in that group.

[reveltaion456]

Question: Besides what it does to conserving bandwidth, does this do anything to save diskspace?

[JamesUS]

Nope :)
Just bandwith.

[redrat]

If using this tip you also should add $headinclude between <head> and </head> in standardredirect template so that your redirect pages shows correct font.
;)

[Reno of Shinra]

Originally posted by Kier
[B]You'll see that code repeated hundreds of times all over the pages. Wouldn't if be good if we could somehow take that formatting information and store it centrally in the HTML, then have all the <font> tags reference that single source?

Well you can.

Let's try it for the most common tag - <normalfont>.

Normally, <normalfont> is replaced with this sort of thing: <font face="verdana, arial, helvetica, sans-serif" size="2"> because your settings for <normalfont> look like this:

http://kier.3dfrontier.com/images/normalfont01.gif

Let's get rid of all that superfluous information, and simply replace it with a CSS style definition:

http://kier.3dfrontier.com/images/normalfont02.gif

hmmm the two image is down....

where exactly do i have to change this act?

[drumsy]

Has anything changed as far as how do this, with the current version of vBulletin?

I did this in Head Insert: and my code looks like this:


<style type="text/css">
BODY {
SCROLLBAR-BASE-COLOR: {categorybackcolor};
SCROLLBAR-ARROW-COLOR: {categoryfontcolor};
}
SELECT {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 11px;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
TEXTAREA, .bginput {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
A:link, A:visited, A:active {
COLOR: {linkcolor};
}
A:hover {
COLOR: {hovercolor};
}
#cat A:link, #cat A:visited, #cat A:active {
COLOR: {categoryfontcolor};
TEXT-DECORATION: none;
}
#cat A:hover {
COLOR: {categoryfontcolor};
TEXT-DECORATION: underline;
}
#ltlink A:link, #ltlink A:visited, #ltlink A:active {
COLOR: {linkcolor};
TEXT-DECORATION: none;
}
#ltlink A:hover {
COLOR: {hovercolor};
TEXT-DECORATION: underline;
}
.thtcolor {
COLOR: {tableheadtextcolor};
}
.nf { font-family: verdana, arial, helvetica, sans-serif; font-size: 10pt }
.sf { font-family: verdana, arial, helvetica, sans-serif; font-size: 10px }</style>


Please tell me I did this right.....and is this ALL I need to do to maximize the effectiveness of this tweak?

[fury]

Add this to the style sheet:.lf { font-family: verdana, arial, helvetica, sans-serif; font-size: 10pt; font-weight:bold }

and make sure you set your replacement variables to this:

<smallfont replaces with <font class=sf
<normalfont replaces with <font class=nf
<largefont replaces with <font class=lf
</smallfont> replaces with </font>
</normalfont> replaces with </font>
</largefont> replaces with </font>

This will ensure the tweak works to the maximum efficiency possible.

The one problem with it is that setting the fonts to px/pt, like it was already said in this thread, will disable font size changing since the fonts are a fixed size. But if you use the naming system (xx-small, x-small, small, normal, medium, large, etc), the font sizes will vary from browser to browser, for instance the fonts are half the size in Netscape as they are in IE (how's that for damned if you do, damned if you don't?)

I love this tweak because it puts a lot less download time on those who don't have gzip uncompression in their browsers. I just wish there was a way to standardize text sizes between browsers

[drumsy]

Originally posted by fury
Add this to the style sheet:.lf { font-family: verdana, arial, helvetica, sans-serif; font-size: 10pt; font-weight:bold }

and make sure you set your replacement variables to this:

<smallfont replaces with <font class=sf
<normalfont replaces with <font class=nf
<largefont replaces with <font class=lf
</smallfont> replaces with </font>
</normalfont> replaces with </font>
</largefont> replaces with </font>

This will ensure the tweak works to the maximum efficiency possible.



The first suggestion was done. Now, since I'm a virtual newbie when it comes to editing the admin panel, where do I change the above variables at?

And do you have the adjusted code to reflect the "xx-small, x-small, etc.." format??

Also, do I need to make any changes to the Large Font (customized), Main Font (customized), and Small Font (customized) categories, that are further down the page?

[fury]

Originally posted by drumsy


The first suggestion was done. Now, since I'm a virtual newbie when it comes to editing the admin panel, where do I change the above variables at?

And do you have the adjusted code to reflect the "xx-small, x-small, etc.." format??

Also, do I need to make any changes to the Large Font (customized), Main Font (customized), and Small Font (customized) categories, that are further down the page? The variables I listed are changed in the "Replacement Variables" section. You will need to know which set of replacement variables your style uses if there is more than one set. You can find this out by going into the Modify link under Styles, and then selecting the properties for the style you use. It will show the name of the replacement set that that style uses, and then you simply edit the <smallfont <normalfont and <largefont variables in that replacement set in the Modify section of Replacement Variables. Make sure </largefont> contains just a </font> and not a </b> (When you edit these replacement variables, the Small Font, Normal Font, and Large Font sections of the style wizard are what are changed, so you're good on that)

The named font size setting can be done by changing all 3 of those styles you just added in the Head Insert ("headinclude" if you want to do it in the templates section) to this: .nf { font-family: verdana, arial, helvetica, sans-serif; font-size: x-small }
.sf { font-family: verdana, arial, helvetica, sans-serif; font-size: xx-small }
.lf { font-family: verdana, arial, helvetica, sans-serif; font-size: x-small; font-weight:bold } However, beware that some browsers will see very tiny fonts while others will see the fonts just fine (Blame non-standardizing of CSS by certain companies for that)

[drumsy]

Originally posted by fury
The variables I listed are changed in the "Replacement Variables" section. You will need to know which set of replacement variables your style uses if there is more than one set. You can find this out by going into the Modify link under Styles, and then selecting the properties for the style you use. It will show the name of the replacement set that that style uses, and then you simply edit the <smallfont <normalfont and <largefont variables in that replacement set in the Modify section of Replacement Variables. Make sure </largefont> contains just a </font> and not a </b> (When you edit these replacement variables, the Small Font, Normal Font, and Large Font sections of the style wizard are what are changed, so you're good on that)

The named font size setting can be done by changing all 3 of those styles you just added in the Head Insert ("headinclude" if you want to do it in the templates section) to this: .nf { font-family: verdana, arial, helvetica, sans-serif; font-size: x-small }
.sf { font-family: verdana, arial, helvetica, sans-serif; font-size: xx-small }
.lf { font-family: verdana, arial, helvetica, sans-serif; font-size: x-small; font-weight:bold } However, beware that some browsers will see very tiny fonts while others will see the fonts just fine (Blame non-standardizing of CSS by certain companies for that)

Ok, I'm at the screen, and it says the following:

Title - Default
Replacement Set - Default
Old replacements
Template Set- Default
Old templates
User selectable? No

The name of my current style is Default, and I'll click "Save Changes," but there's nothing to edit after that. No place to do all the <smallfont, <normalfont, <largefont editing you speak off. I apologize if I'm annoying in ignorance. :(

[drumsy]

Wait a minute, your post suddenly became clearer after I posted mine..........let me try this, as I see where you're going now!:)

[drumsy]

Well, after much screwing around, and messing up the forums once tonight, I have successfully achieved my goal!! THANK YOU FURY!!!!!!!!!!!!!!!!!!!!!!:)

[drumsy]

Originally posted by Thomas P
Hi there,

great hint, works in 2.0.3.

BUT: you have to add $headinclude in between the <head>-tags in the standardredirect template, unless you like weird font settings ;)

cu,
-Tom

Ok, new problem. I had to do this, because my redirect page was pitch black, since the background is black. I did the above, but now the link is completely white, and when I hover over the link, it's yellow. How can I change that link to it's regular color (grey) and remove the yellow hover?

[Paul J]

Some of my members are saying that they cannot see the thread titles (IE 5.5).

They report that the font in the titles is the same as the background color.

http://forums.pentameter.org

I tweaked some of the templates according to this thread.

[Kamran]

Hi,

My headinclude looks like this:

<meta name="MSSmartTagsPreventParsing" content="TRUE">
<meta http-equiv="MSThemeCompatible" content="Yes">
<style type="text/css">
BODY {
SCROLLBAR-BASE-COLOR: {categorybackcolor};
SCROLLBAR-ARROW-COLOR: {categoryfontcolor};
}
SELECT {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 11px;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
TEXTAREA, .bginput {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
A:link, A:visited, A:active {
COLOR: {linkcolor};
}
A:hover {
COLOR: {hovercolor};
}
#cat A:link, #cat A:visited, #cat A:active {
COLOR: {categoryfontcolor};
TEXT-DECORATION: none;
}
#cat A:hover {
COLOR: {categoryfontcolor};
TEXT-DECORATION: underline;
}
#ltlink A:link, #ltlink A:visited, #ltlink A:active {
COLOR: {linkcolor};
TEXT-DECORATION: none;
}
#ltlink A:hover {
COLOR: {hovercolor};
TEXT-DECORATION: underline;
}
.thtcolor {
COLOR: {tableheadtextcolor};
}
.nf {
FONT-FAMILY: verdana, arial, helvetica, sans-serif;
FONT-SIZE: 13px;
}
</style>

$headnewpm

Is that all I have to do? I'm using the 2.03 version (this is my first VB).

thx

Kam

[huythuy]

i think this's the lastest version of CSS line :D ,more shorter :



.nf{ font: x-small verdana; }
.sf{ font: x-small verdana; }

works in external css file

[Spinball]

The two images in the very first post in this thread are broken.
It results in me not understanding what it's all on about.
Can somebody please fix the broken images or explain it all again as I'm stumped.
Thanks

[Jake Bunce]

i just did this. it's works well. :)

[Joss]

Me too ... can anyone describe what to do?

Originally posted by Spinball
The two images in the very first post in this thread are broken.
It results in me not understanding what it's all on about.
Can somebody please fix the broken images or explain it all again as I'm stumped.
Thanks

Thanks

- Joss

[Joss]

It should say.. for "Main Font"

make sure these three fields are blankk

Main Font: face
Main Font: size
Main Font: color

enter nf in the field for

Main Font: class

Then insert the css definition for nf (and sf, etc) in the "Head Insert:" section at the top of the styles CP.

Cheers

[ibeblunt]

I added a javascript that disables the form button after pressing it.

First I added this code to the 'headinclude' template:


<script language="JavaScript" type="text/javascript">
<!--
function disableForm(theform) {
if (document.all || document.getElementById) {
for (i = 0; i < theform.length; i++) {
var tempobj = theform.elements[i];
if (tempobj.type.toLowerCase() == "submit" || tempobj.type.toLowerCase() == "reset")
tempobj.disabled = true;
}
}
}
//-->
</script>


Then in my 'newthread' template I change the following javascript function:


function validate(theform) {

if (theform.message.value=="" || theform.subject.value=="") {

alert("Please complete the subject and message fields.");

return false;

}

if (postmaxchars != 0) {

if (theform.message.value.length > $postmaxchars) {

alert("Your message is too long.\n\nReduce your message to $postmaxchars characters.\nIt is currently "+theform.message.value.length+" characters long.");

return false;

} else {

disableForm(theform);

return true;

}

} else {

disableForm(theform);

return true;

}

}


Hope this helps someone.

[Gutspiller]

Could somebody help me to get this work with all sized fonts in a 2.0.3 board? I am confused with the first post being older than 2.0.3 and then other people trying to patch what Kier said. Can somebody please help me on this? I have 2.0.3 because I have so many hacks and if somebody could help me save "buckets" of bandwidth I would greatly appreciate it.

Thanks.

[ubbuser]

How does the style sheet definition work with Nutscrape?? I ask coz stupid thing requires +1 for every Xpt of a font style def. in CSS. That's what I hvae seen.

So I might be able to change to CSS but then Nutscrape won't like it at all or at least that is what I have seen with style sheets.

[ubbuser]

Hi I added this line to the main font class: text box:

<font class="nf">


HOwever when I hit submit to save changes to the style, the page that shows up again (style page) shows that it has stripped the settings to this! :

<font class=

This screws up the display.

What's going on here ? Why is this settings being stripped? Thanks!

[Sn2]

the images in the first post arent working:rolleyes:

[Koss]

Originally posted by Kier
Saving bandwidth is good for everyone, so here is a little tip to save absolutely buckets of it.

You may have noticed in your styles CP that there is an option to specify a 'class' for the various font sizes. This is what it's for :)

Normally, if you use the default settings, every single piece of text on a vBulletin page will be surrounded by <font> tags, each of which contain this sort of information (view the source of this page and you'll see)
<font face="verdana, arial, helvetica, sans-serif" size="2">
You'll see that code repeated hundreds of times all over the pages. Wouldn't if be good if we could somehow take that formatting information and store it centrally in the HTML, then have all the <font> tags reference that single source?

Well you can.

Let's try it for the most common tag - <normalfont>.

Normally, <normalfont> is replaced with this sort of thing: <font face="verdana, arial, helvetica, sans-serif" size="2"> because your settings for <normalfont> look like this:

http://kier.3dfrontier.com/images/normalfont01.gif


could someone please upload the images....i'm having difficulties, I did everything I had to do, but now my font is bigger than it used to be.

thanks!

[Nafae]

yes kier that would be much appreciated, please update this great guide!

[vdinh]

Originally posted by ubbuser
Hi I added this line to the main font class: text box:

<font class="nf">


HOwever when I hit submit to save changes to the style, the page that shows up again (style page) shows that it has stripped the settings to this! :

<font class=

This screws up the display.

What's going on here ? Why is this settings being stripped? Thanks!


Hi friend,
I believe you only have to put nf in the textbox, not the whole font class tag :)

Thanks Kier, this tip is extremely helpful :)

[WebGuru]

.. I would like to see the images too; it's hard to figure out what to do exactly without seeing them :(

[Joss]

Go to ... Styles | modify | [fonts/colors/etc]

Here's the addition to Head Insert (you scroll to the bottom)

[Joss]

here's the bit for the fonts:-

[Gutspiller]

Thanks Joss, that worked.

[Kayla]

It works great!

[Erwin]

Now, why would this not work for me...

I took out the font face tags, and placed the class tags in, but when I view my website all the fonts were default.

I placed the style bits in the headinclude section - I did it many ways, including using "replacement", then using "style", even going at it via "templates" - no go.

My browser is IE 5.5 - you would think that it would work! :)

[tribedude]

Originally posted by Kier
Saving bandwidth is good for everyone, so here is a little tip to save absolutely buckets of it.

You may have noticed in your styles CP that there is an option to specify a 'class' for the various font sizes. This is what it's for :)

Normally, if you use the default settings, every single piece of text on a vBulletin page will be surrounded by <font> tags, each of which contain this sort of information (view the source of this page and you'll see)
<font face="verdana, arial, helvetica, sans-serif" size="2">
You'll see that code repeated hundreds of times all over the pages. Wouldn't if be good if we could somehow take that formatting information and store it centrally in the HTML, then have all the <font> tags reference that single source?

Well you can.

Let's try it for the most common tag - <normalfont>.

Normally, <normalfont> is replaced with this sort of thing: <font face="verdana, arial, helvetica, sans-serif" size="2"> because your settings for <normalfont> look like this:

http://kier.3dfrontier.com/images/normalfont01.gif

Let's get rid of all that superfluous information, and simply replace it with a CSS style definition:

http://kier.3dfrontier.com/images/normalfont02.gif

<normalfont> will now be replaced with <font class="nf">This is much, much smaller than that long definition we had before, but how do we tell it what font and size we want it to use?

Look up at the top of your styles control panel, and you will see an area where you can edit the headinclude template. By default, your headinclude will look like this:<meta http-equiv="MSThemeCompatible" content="Yes">
<style type="text/css">
BODY {
SCROLLBAR-BASE-COLOR: {categorybackcolor};
SCROLLBAR-ARROW-COLOR: {categoryfontcolor};
}
SELECT {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 11px;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
TEXTAREA, .bginput {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
#all A:link, #all A:visited, #all A:active {
COLOR: {linkcolor};
}
#all A:hover {
COLOR: {hovercolor};
}
#cat A:link, #cat A:visited, #cat A:active {
COLOR: {categoryfontcolor};
TEXT-DECORATION: none;
}
#cat A:hover {
COLOR: {categoryfontcolor};
TEXT-DECORATION: underline;
}
#ltlink A:link, #ltlink A:visited, #ltlink A:active {
COLOR: {linkcolor};
TEXT-DECORATION: none;
}
#ltlink A:hover {
COLOR: {hovercolor};
TEXT-DECORATION: underline;
}
.thtcolor {
COLOR: {tableheadtextcolor};
}
</style>

$headnewpm
Just before the closing </style> tag, we will now add our central definition for how <normalfont> will be formatted. Add this: .nf {
FONT-FAMILY: verdana, arial, helvetica, sans-serif;
FONT-SIZE: 13px;
}
This CSS class definition will now be called for ALL the <normalfont> tags, so your resulting HTML pages will be much smaller. Repeat this for <smallfont> and <largefont> and you're laughing :)

There are some broken icons in your post. Can you please fix them so I can see what I should replace..

[Erwin]

Ha! Made it work!!! :D

[Aviation Forum]

The images in the original message are now "X's...can you put them back so I can use this tweak, please?

[Joss]

see my two posts above (7 posts above this one dated 3-1-2002)

I've recreated the original images.

- Joss

[bahbah]

hmm without the images anymore in the original starting post can someone explain how you replace <normalfont> with a CSS style definition ?

Thanks :)

[bahbah]

doh n/m *slaps himself* This works great :)

[Dylan Leblanc]

Works nicely guys, saves 10% off of my forumdisplay pages. :)

[Doug Nelson]

1) has anybody set this up in an external stylesheet that works? Can you zip it up and attach it?

2) is this similar to a hack, in that it needs to be redone with each vBB upgrade?

3) any news on how vBB3 will handle this? Any differently?

[jediguy]

This absolutely rules.

Thanks. :)

[James Cridland]

You can use styles to mimic buttons, too.

I played with this to replace the "POST NEW TOPIC" and "POST A REPLY" buttons that appear at the top and bottom of each page in my forums. This means at least two less graphic requests per page load.

The style is:

.textbut { FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 70%; height: 20px; background-color: #CCCCCC; COLOR: #000000; letter-spacing:-1px; white-space: nowrap; border-width: 2px; border-style: solid; border-color:#DDDDDD #BBBBBB #BBBBBB #DDDDDD; padding: 3px; margin: 5px;}
.textbut:link {COLOR: #000000; text-decoration: none;}
.textbut:visited {COLOR: #000000; text-decoration: none;}
.textbut:hover {COLOR: #000000; text-decoration: none;}

You'd then use this like this:

<a href='post.php' class=textbut>POST A REPLY</a>

If you use access keys or something similar, you can then underline the access key when you use this button - so you can even try something like POST A REPLY.

[Lorddraco98]

the images are gone, I'm having trouble setting this up, can someone show me how theirs is setup?

[poolking]

Originally posted by Lorddraco98
the images are gone, I'm having trouble setting this up, can someone show me how theirs is setup?

Same here. :)

[binkley]

My experience with this tweak is as follows (vb 2.2.9).

I added:

.nf { FONT-FAMILY: verdana, arial, helvetica, sans-serif; FONT-SIZE: 13px; }
.sf { FONT-FAMILY: verdana, arial, helvetica, sans-serif; FONT-SIZE: 10px; }

To the "head insert" template above "</style>".

I delete the "face" and "size" entries for both "main font" and "small font" and added a "class" of "nf" and "sf" respectively. (Quote overdose)

This resulted in a decrease of about 10% (10k) from my main forum page. Of course I run mod_gzip so the end result is probably closer to 400 bytes, but I'll take what I can get.

Someone should do a better job of describing how to install this now that the images are gone.. I hope I've helped a little bit. I found I could actually drop the "helvetica" and "sans-serif" entries in the ".nf" line, but the gain was marginal so I played it safe.

[Polinco]

Has anyone actually bothered to ask for those images?

They are real close to releasing VB3 now so I doubt if he will let us have them at this late time. I will email them.


Pol

[Robink]

I did what binkley has said and it worked fine.

[DannyITR]

ok I did exactly what was required and my index page gained 2k.

Mabye I'm not checking the size correctly. in my browser I did File>Properties and it shows me that index.php is 69k.

I changed all 3 fonts in the replacement set templates and added the 3 lines of code for each font in the head include template.

Here is a pic of my replacement template:

http://quebecdiscussion.com/images/fontchange.jpg

and the code at the end of the head inlcude template:

}

.nf { FONT-FAMILY: verdana, arial, helvetica, sans-serif; FONT-SIZE: 13px; }
.sf { FONT-FAMILY: verdana, arial, helvetica, sans-serif; FONT-SIZE: 10px; }
.lf { font-family: verdana, arial, helvetica, sans-serif; font-size: x-small; font-weight:bold }
</style>


Help

[DannyITR]

ttt

[HostCom]

nm..

[Polinco]

DannyITR...

I think you might have messed up your templates... There was no need to do a 'search and replace' at all.

By changing the <normalfont>, <smallfont> and <largefont> declarations in the html templates to read <font class= you curtailed the functionality of the vbulletin php software. It already automatically converted the contents of those tags to what is defined in your css header before. Now you have hardcoded plain html in those places where there was dynamic html before.

If ever you decided to use the html version of the font tags you would have to reinstate all of them manually now.

In the picture attached you can see where you would specify the font face, size and color. But when you specify a style sheet class just leave them blank and the VB software will take care of your style as you have already provided that in your header.

regards.

Pol

[Polinco]

http://www.polinco.net/images/fontpty.png

This picture comes from the Administrator pages, specifically Styles | Modify. You can see where you would specify the font face, size and color. But when you specify a style sheet class just leave them blank and the VB software will take care of your style as you have already provided that in your header as shown hereunder:

http://www.polinco.net/images/headinsert.png

I have scrunched it up a bit so it wouldn't be overly long, but this is more than clear I would say.

So, specify your font sizes here and in conjunction with the image above you should not yield any problems.

regards.

Pol

[Sun Boy]

is it avaleble in 2.3.0 ?

[Bane]

is it avaleble in 2.3.0 ?

Yes it is, follow the directions above.

[DannyITR]

DannyITR...

I think you might have messed up your templates... There was no need to do a 'search and replace' at all.

By changing the <normalfont>, <smallfont> and <largefont> declarations in the html templates to read <font class= you curtailed the functionality of the vbulletin php software. It already automatically converted the contents of those tags to what is defined in your css header before. Now you have hardcoded plain html in those places where there was dynamic html before.

If ever you decided to use the html version of the font tags you would have to reinstate all of them manually now.

In the picture attached you can see where you would specify the font face, size and color. But when you specify a style sheet class just leave them blank and the VB software will take care of your style as you have already provided that in your header.

regards.


Thanks for responding. I don't understand though. I did exactly what Kier told me to do in the first post of this thread. Are you saying this whole thread is bogus or did I make some kind of mistake?

[Polinco]

I'm afraid you did make a mistake Danny and no, this is not a bogus thread or I wouldn't have bothered putting up the missing images from the first post.

Kier said: Let's get rid of all that superfluous information, and simply replace it with a CSS style definitionIt looks like you did take that quite literally and went ahead and physically deleted the <normalfont> and the <smallfont> tags from all the templates.
These tags are dynamic pseudo html and will be replaced during the rendering of the pages in the browser with real html like so:

For smallfont: <font face="Verdana,arial,helvetica,sans-serif" size = "2" color = "#xxxxxx"> (whatever color you had set in the admin page)

and normalfont: <font face="Verdana,arial,helvetica,sans-serif" size = "3" color = "#xxxxxx">

If you had specified the stylesheet version as shown in the images then the tags <smallfont></smallfont> and <normalfont></normalfont> would have been replaced after rendering with: class = "sf" and class = "nf" respectively, thus significantly reducing the amount of text that would need to be loaded from the server every time a page is requested by the browser.

The first image Kier placed in his opening post most likely was the same as my first image the difference being that his image showed the first three fields containing the font face, the font size and the font color and nothing in the class field. What he alluded to when he suggested to get rid of all this superfluous data was the emptying of those three fields and replace them with the simple 2 character sf or nf in the class field of that picture and the addition of the two class declarations in the style sheet which is why he included that stylesheet segment in his post. So, with that knowledge you should be able to get that right although I am afraid you will have to either manually repair the templates you mutilated or reinstall your Vbulletin.

Best of luck.

Pol

[Polinco]

Refreshed hence bumped, for image update.
Old server was down which resulted in missing images, Thanks to Vampier for showing this to me (probably unintentional :D )

[OGT]

seems that all images are down atm. would like to make this change but i don't want to ruina nything. any anyone host hte images or simply give a pointer to where htis editting is being done at?

[Polinco]

seems that all images are down atm. The images are up. They WERE down at one time because of a hard drive crash. But they are up now. save the page when you come back again.

Pointers have been given throughout this article especially on the first page and again on this page. Please read it all.

[fiber]

If this still a viable trick for VB 3.0.3?

I would really like to know if it is!

Thanks,

Fiber

[Neocorteqz]

If this still a viable trick for VB 3.0.3?

I would really like to know if it is!

Thanks,

Fiber

ALthough I'm sure it has most likely been implimented, I too would like to know, and how for vBull 3.0.3 if it has not been implimented yet.

[hollyboy]

How can I apply the tip written in the 1st post to my vb3?
I think the tip was posted originally for vb2 right?

[Tradjick]

I didn´t succeed in doing this. Did someone do this on vB. 3.0.3?

[frage]

How can I apply the tip written in the 1st post to my vb3?
I think the tip was posted originally for vb2 right?
yes
you can't apply the trick to vb3,
take a look at the quellcode and you will have the answer

have a nice time
frage

[hollyboy]

yes
you can't apply the trick to vb3,
take a look at the quellcode and you will have the answer

have a nice time
frage
quellcode?

[Tradjick]

quellcode == sourcecode

[Loyalty4Life]

fasd s