Drupal Theming - Adding Text Resize Buttons to Your Theme

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.

Conversation

Permalink

Great article. The author provided a step by step instruction on how to change the font size inside the theme using drupal technology. Really helpful write up. More power to you

An internet-based casino ought to give the top bonus offer pokies online gambling available, along with the most effective winnings and deposit bonuses and this specific online casino gives all of it.