[HowTo] [3.0.3] Add 'Increase Font Size' box to the forums!

[Floris]

[HowTo] [3.0.3] Add 'Increase Font Size' option to the forums!

By: Floris - http://www.vBulletin-Fans.com/

Description: With this tutorial you will learn how to set up additional child-styles to provide your members with a bigger font-sized style. Selectable through the navigation bar, on each page. (for guests & members)


Installation Instructions


* Goto the Admin Control Panel > vBulletin Options > vBulletin Options > Style & Language Settings > Allow Users to Change Styles?, and make sure this option is set to 'Yes'. A few options lower set Use 'vBMenu' DHTML Popup Menus? to 'Yes'. And save the options to apply the changes.

* Goto the Admin Control Panel > Styles & Templates > Style Manager > From your default (or any) style select to open the drop down menu and click on 'Add Child Style'.

* The 'Parent Style' will automaticly be set, you can skip this. The 'Title' will look like "Child of <style name>", replace this with: "<style name> Bigger 10%". The 'Allow User Selectable' should be 'Yes'. Set 'Display Order' to '100'. And finally click on the 'Save' button to save this new child style.

* Again, goto the Admin Control Panel > Styles & Templates > Style Manager > From your default (or any) style select to open the drop down menu and click on 'Add Child Style'.

* The 'Parent Style' will automaticly be set, you can skip this. The 'Title' will look like "Child of <style name>", replace this with: "<style name> Bigger 25%". The 'Allow User Selectable' should be 'Yes'. Set 'Display Order' to '200'. And finally click on the 'Save' button to save this new child style.

* And again, goto the Admin Control Panel > Styles & Templates > Style Manager > From your default (or any) style select to open the drop down menu and click on 'Add Child Style'.

* The 'Parent Style' will automaticly be set, you can skip this. The 'Title' will look like "Child of <style name>", replace this with: "<style name> Bigger 50%". The 'Allow User Selectable' should be 'Yes'. Set 'Display Order' to '300'. And finally click on the 'Save' button to save this new child style.

* Goto the Admin Control Panel > Styles & Templates > Style Manager > From your Bigger 10% style select to open the drop down menu and click on 'Main CSS'.

* Change the following values, press the 'Save' button when done.

Class: Body
Font Size: 12pt

Class: <td>, <th>, <p>, <li>
Font Size: 12pt

Class: Category Strips
Font Size: 12pt

Class: Table Header
Font Size: 12px

Class: WYSIWYG Editor
Font Size: 12pt

Class: Input Fields
Font Size: 12pt

Class: Buttons
Font Size: 12px

Class: <select> menus
Font Size: 12px

Class: Small Font
Font Size: 12px

Class: Navbar Text
Font Size: 12px

Class: <legend>
Font Size: 12px

Class: Popup Menu Controls
Font Size: 12px

Class: Popup Menu Options Row
Font Size: 12px

Class: Popup Menu Highlighted Option
Font Size: 12px

Class: Additional CSS Definitions
.bigusername { font-size: 15pt; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 12px; }

##########

* Goto the Admin Control Panel > Styles & Templates > Style Manager > From your Bigger 25% style select to open the drop down menu and click on 'Main CSS'.

* Change the following values, press the 'Save' button when done.

Class: Body
Font Size: 14pt

Class: <td>, <th>, <p>, <li>
Font Size: 14pt

Class: Category Strips
Font Size: 14pt

Class: Table Header
Font Size: 14px

Class: WYSIWYG Editor
Font Size: 14pt

Class: Input Fields
Font Size: 14pt

Class: Buttons
Font Size: 14px

Class: <select> menus
Font Size: 14px

Class: Small Font
Font Size: 14px

Class: Navbar Text
Font Size: 14px

Class: <legend>
Font Size: 14px

Class: Popup Menu Controls
Font Size: 14px

Class: Popup Menu Options Row
Font Size: 14px

Class: Popup Menu Highlighted Option
Font Size: 12px

Class: Additional CSS Definitions
.bigusername { font-size: 16pt; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 14px; }

##########

* Goto the Admin Control Panel > Styles & Templates > Style Manager > From your Bigger 50% style select to open the drop down menu and click on 'Main CSS'.

* Change the following values, press the 'Save' button when done.

Class: Body
Font Size: 16pt

Class: <td>, <th>, <p>, <li>
Font Size: 16pt

Class: Category Strips
Font Size: 16pt

Class: Table Header
Font Size: 16px

Class: WYSIWYG Editor
Font Size: 16pt

Class: Input Fields
Font Size: 16pt

Class: Buttons
Font Size: 16px

Class: <select> menus
Font Size: 16px

Class: Small Font
Font Size: 16px

Class: Navbar Text
Font Size: 16px

Class: <legend>
Font Size: 16px

Class: Popup Menu Controls
Font Size: 16px

Class: Popup Menu Options Row
Font Size: 16px

Class: Popup Menu Highlighted Option
Font Size: 16px

Class: Additional CSS Definitions
.bigusername { font-size: 18pt; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 16px; }

######

* Goto the Admin Control Panel > Styles & Templates > Style Manager > From your default (parent) style expand the template groups. Then expand the template group 'Navigation / Breadcrumb Templates'. Select the 'navbar'template and click on 'customize' or 'edit'.

* Find the following code:

<if condition="$show['pmstats']"><br /><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl]">$vbphrase[private_messages_nav]</phrase></if>

* Below it, on a new line, add the following code:

<br />$vbphrase[increase_font]

* Now find the following code:

<!-- / login form -->

* Below it, on a new line, add the following code:

<br />$vbphrase[increase_font]

* And save the navbar template.

* Now goto the Admin Control Panel > Languages & Phrases > Phrase manager > Add new phrase > phrase variable name 'increase_font' and set as content:

Increase font size: <a href="index.php?styleid=1">0</a>, <a href="index.php?styleid=10">10</a>, <a href="index.php?styleid=20">25</a>, <a href="index.php?styleid=30">50</a>%

(and translate it if needed) And >> Don't forget to replace the styleid! (four times)

* And finally click on the 'Save' button

# Done!

[Floris]

Attached you will find 3 .xml styles for bigger 10%, 25% and 50%.

If you use the vBulletin default blue style you can add these 3 .xml files as child styles.

If you don't use it, try it, and it if doesn't look right, delete the child style and do it manually.

Note: you will still need to apply the other changes from the template mod. This does not modify the navbar, etc. It will only have the 12,14,16 pt/px font-size set through Main CSS.