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

[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: * Below it, on a new line, add the following code: * Now find the following code: * Below it, on a new line, add the following code: * 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: (and translate it if needed) And >> Don't forget to replace the styleid! (four times)

* And finally click on the 'Save' button

# Done!

thats awesome, thank u!

very cool idea! thanks for sharing it with us.

thanks