In many web sites is common to find buttons that increase or decrease the size of the text. Online newspapers are a good example of application for these buttons.

While there is already a module in Drupal that creates a block with the resize buttons, I'll give an example of how to implement this functionality from within the theme.

The implementation steps would be:

1.  Create a js file to be responsible for resizing the text.
2. Create an interface fo enabling/disabling the buttons from the theme setting page.
3. Locate the buttons within the page of the theme. In this example this is done from the preprocess_page function in the template.php file.
4. Create the CSS file for the style of the buttons.

1. JQuery Code.

In this example, I use the code created by Drew Douglas(http://dev-tips.com), with just a few touches. This is the code:

Drupal.behaviors.fontSize = function (context) {
        $ ('A.font-size-button'). Click (function (event) {
            ourText var = $ ('. content-output');
            var currFontSize = ourText.css ('fontSize');
            var finalNum = parseFloat (currFontSize, 10);
            var currFontSize.slice stringEnding = (-2);
            if (this.id == 'large') {
                finalNum *= 1.2;
            }
            else if (this.id == 'small') {
                finalNum / = 1.2;
            }
            ourText.css ('fontSize', finalNum + stringEnding)
            event.preventDefault ();
        });
}


In this case the text resize is applied inside the div with class "content-output".

2. Theme Settings Code.

In the theme_settings.php file is added the code that creates the checkbox that shows/hides the box for the buttons.

  $ Form ['godwritting_settings'] = array (
    '# Type' => 'markup',
    '# Value' => '<h3>'. t ('Settings Godwrtitng.'). '</ h3>',
  )
  $ Form ['font_size_control'] = array (
    '# Type' => 'fieldset',
    '# Title' => t ('Font Size Buttons'),
    '# Collapsible' => true,
    '# Collapse' => true,
  )
  $ Form ['font_size_control'] ['font_size_buttons'] = array (
    '# Type' => 'checkbox',
    '# Title' => t ('Add Font Size Buttons'),
    '# Default_value' => $ settings ['font_size_buttons']
  )


3. Code template.php file.
 
Trough the preprocess_page function(inside the template.php) the butons are added inside the theme.

/*************************************************
 * Hook to preprocess Page
************************************************** /
your_theme_name_preprocess_page function ($ vars) {
  / / Font Size control buttons
  if (theme_get_setting ('font_size_buttons')) {
    $ Current_theme = variable_get ('theme_default', 'none');
    drupal_add_js (drupal_get_path ("theme", $ current_theme). '/ js / fontSize', 'theme');
    $ Vars ['js'] = drupal_add_js ();
    $ Vars ['scripts'] = drupal_get_js ();
    $ Font_large = l (t ('Large'),'#', array (' attributes '=> array (' class '=>' font-size-button ',' id '=>' large')));
    $ Font_small = l (t ('Small'),'#', array (' attributes '=> array (' class '=>' font-size-button ',' id '=>' small')));
    $ Vars ['font_size'] = '<div class="font-size-box">'. $ Font_large. " '. $ Font_small. "</ Div> \ n";
    $ Vars ['content'] = $ vars ['font_size']. $ Vars ['content'];
  }
}


In this example the js file is located in a folder named js, it is important to check that file path is correct for your theme (after not say I did not notice you).

4. CSS Code.

Style at your discretion

Finally, save the changes and clear the cache of the site.