How to Change bbcode font sizes in vBulletin

kpmedia · #1 10-14-2012, 03:30 PM

As many people know, The Digital FAQ will rescue forums in danger of disappearing, and generally upgrades them to vBulletin as part of the takeover process. Most also get a complete facelift/redesign. All of the sites we rescue have good content -- but maybe didn't have the best design or design-oriented moderation considerations. On some of the sites we've taken over, users and mods/admins alike would commonly use ridiculous large font sizes on posts, which was really nothing more than hard-to-read digital screaming.

In this example, we'll be replacing font sizes 4,5,6,7 with font size 3, which is the max size we need.
For example, the headings below are bolded blue size 3. Plenty large to get the point across (i.e., headings for sections).

Step 1 - Add Replacement Variables

This takes care of the display/editing of all existing font bbcode on the forum.

In the vBulletin admin (aka "admincp", which you've hopefully changed), under the Styles & Templates, is the Replacement Variable Manager. You'll want to add replacements for each font size.

In the "search for text" box, add the old size. For example, [size=7]
In the "replace with text" box, add the new size. For example, [size=3]

Repeat this for each size that you would like to limit/replace:

[size=4]
[size=5]
[size=6]
[size=7]

That takes care of the editor replacements. However, for the display replacement, you'll need to add more variables:

In the "search for text" box, add the old size. For example,
In the "replace with text" box, add the new size. For example,

Repeat this for each size that you would like to limit/replace:

Optional: On the site being worked on today, I've added a margin to the headings font size as well. (Font size 3 is what we consider "heading fonts" in our forums. And in fact, font size 3 itself was replaced with the version that added spacing.)

Replacement text:

Code:

<div style="margin-top:8px;"></div>
<font size="3">

There's actually quite a few ways replacements can be altered -- all more advanced than the basic example shown here -- and savvy users can probably figure them out on their own. If you wouldlike to try more complex replacements, and need help, feel free to post here.

Step 2 - Edit vbulletin_textedit.js

This takes care of any new posts made on the forum, by editing what font sizes are available in the post editor.

In the /forum/clientscript/ folder, edit vbulletin_textedit.js with a plain text editor. Some versions of this file are minified (on a single line), so use the find/search function in the editor. Locate the code this.translate_fontsize=function(csssize), which is the beginning of the full font script section:

Code:

this.translate_fontsize=function(csssize)
{switch(csssize)
{
case"7.5pt":case"10px":return 1;
case"10pt":return 2;
case"12pt":return 3;
case"12pt":return 4;
case"12pt":return 5;
case"12pt":return 6;
case"12pt":return 7;
default:return""
}
};

^ Notice that this code snippet is already altered for "12pt" for sizes 4-7, to match size 3.

You can simply delete unwanted sizes. In this example, I chose to merely change the size. Both methods work perfectly.

And that's it.

_____________________

Need a good web host? — Read our 2018 Review of the Best Web Hosts

Quite often, problems with web sites are caused by having a rotten web host. Worse yet, many hosts try to blame you (the customer) for the problems! So dump that lousy company. Say goodbye to slow sites, unresponsive support techs, and downtime. Find yourself a new host today. Whether you need shared, reseller, VPS, semi-dedicated, cloud, or dedicated hosting, something on our list should be a good upgrade for you.