Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [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:
    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!
    Attached Files

  • #2
    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.
    Attached Files
    Last edited by Floris; Tue 19 Oct '04, 11:22am.

    Comment


    • #3
      great addon floris I was wondering how-to implement the same.

      Regards,
      TechArena - TechArena Community - News - Download - Video - Guide - Review

      Comment


      • #4
        WOW! Floris you have done it again! Great job this will come in handy for someone I am sure.

        Got a Boxer?
        BoxerTalk

        Comment

        widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
        Working...
        X