Adding user preset theme selection to your Gantry template is really easy to achieve, and allows your Website users to select a color scheme of their own choice!  Allowing users to customize their experience when using your Website is quickly becoming a popular add-on that we’re beginning to see a lot.  Adding this feature to your Gantry template is a simple procedure I’ll outline below.

The default Gantry template comes with four default presets. Let’s add an additional preset and allow our Website users to choose their preferred color scheme with a selector in the footer of our page.

Before we go on I’ll briefly explain how to add more presets to your Gantry template, it’s these presets a Website user will select from.  Login to your Joomla administration pages and select Extensions > Template Manager, then click Gantry to open the template configuration page. 

Select the “Style” tab as displayed above and make some changes.  To keep it simple let’s set a new link color and change the font to something other than what has been defined by default.

In this case we’ve opted for a light blue link and the Racing Sans One font from Google which is my favorite, check it out.  If you would like to, feel free to make any additional changes you would like stored in your preset.  When everything is set, locate the save button in the top right of your template manager, select the buttons drop down arrow and click ‘Save Preset’; this will open a modal dialog where you will be required to set a preset name and a preset key name.

 Gantry already comes with four default presets, let’s name this additional preset “Preset 5”, set the key name as displayed above and click save.

Now we’re ready to add the theme selection block for our users to choose from.  Let’s face it, no matter how your Website appears, there will always be someone who prefers the opposite.  The same applies with link colors, layouts and features.  Providing a selection will make your Website more ‘user friendly’ and hey, who knows, it may help some people with disabilities to both read your website text clearly and use your site without any problems :)

Defining the custom style selection

Gantry uses LESS CSS which extends your Websites stylesheets with dynamic behavior such as variables, mixins, operations and functions. LESS files are compiled into temporary, browser-readable CSS files the first time the website is loaded. Once you clear the Joomla Cache or edit the LESS files these temporary CSS files are deleted and re-generated. The LESS files are the ones that hold all the style information for your template. In Gantry 4, you can create both custom LESS file (template-custom.less) and custom CSS file (TemplateName-custom.css) and their content will be included in the main CSS. You can find more information regarding the Custom Stylesheets here.

For our purposes we will create a new template-custom.less file (or edit the current one if it exists). The file should be located/created in the “root/templates/gantry/less” folder. Open it and add the following code at the bottom:

a.btn-preset {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 100%;
}

a.btn-preset.preset1 {
    background: none repeat scroll 0% 0% #2698de;
}

a.btn-preset.preset2 {
    background: none repeat scroll 0% 0% #de3526;
}

a.btn-preset.preset3 {
    background: none repeat scroll 0% 0% #8cc414;
}

a.btn-preset.preset4 {
    background: none repeat scroll 0% 0% #ff5e00;
}

a.btn-preset.preset5 {
    background: none repeat scroll 0% 0% #a426de;
}

Please note, the colors I have defined above, e.g. “background: none repeat scroll 0% 0% #ff5e00;” correspond with the preset link colors in Gantry’s template administration relative to each preset style you have defined. It might be an idea to cut and paste them to notepad initially so you can easily refer to it when you define the styles above. These style definitions will produce the colored dots people will be able to use to select their desired preset, once that’s done click save.

Gantry’s "Features" (I’m talking about the "Features" tab in Gantry’s template administration) like the Copyright and Font Sizer etc. are generated by the PHP files located in "root/libraries/gantry/features".  Gantry allows features to be overridden by either copying a feature directly or by creating a new feature.php file in the "root/templates/gantry/features" directory.  For our purposes, copy the file "root/libraries/gantry/features/resetsettings.php" into the "root/templates/gantry/features" directory.

Once the "root/templates/gantry/features/resetsettings.php" feature file is in place open it with your favorite text editor, scroll down to line 32 and replace the line of text:

[ <a href='<?php echo JROUTE::_($gantry->addQueryStringParams($gantry->getCurrentUrl($gantry->_setbyurl), array('reset-settings'=> ''))); ?>' rel="nofollow"><?php echo $this->get('text'); ?></a> ]

With this code:

[ <a href='<?php echo JROUTE::_($gantry->addQueryStringParams($gantry->getCurrentUrl($gantry->_setbyurl), array('reset-settings'=> ''))); ?>' rel="nofollow"><?php echo $this->get('text'); ?></a> ]<br><div><a class="btn-preset preset1" href="/index.php/?presets=preset1"></a> <a class="btn-preset preset2" href="/index.php/?presets=preset2"></a> <a class="btn-preset preset3" href="/index.php/?presets=preset3"></a> <a class="btn-preset preset4" href="/index.php/?presets=preset4"></a> <a class="btn-preset preset5" href="/index.php/?presets=preset5"></a></div>

Don’t forget to enable the Reset Settings feature in Gantry’s template administration on the features page.

Note: You may need to clear the Joomla Cache, and in some instances perhaps even your browsers too.  Joomla’s cache can be cleared easily - in Joomla administration select System > Clear Cache.