[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:
HTML 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:
HTML Code:
<br />$vbphrase[increase_font]
* Now find the following code:
HTML Code:
<!-- / login form -->
* Below it, on a new line, add the following code:
HTML 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:
Code:
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!
Reply With Quote
Bookmarks