Adding a Color picker to a Theme admin form

Prev | Next

(This feature requires at least Web Store 3.1)

Theme designers now have the ability to add a color picker control to a theme admin form and use this value within their theme.

Here are the steps to use this new feature:

1. Using Admin Panel, go to Themes and create a Copy of the Brooklyn template. In our example below, we will refer to this as brooklyncopy since this is the folder name that will be created.
2. Using FTP, access your site files and navigate to the /themes/brooklyncopy folder to view the theme files.
3. Go to the /models folder and open brooklyncopyAdminForm.php
4. The next steps are to add a new configuration variable to the theme admin. Find the block of $public variables and add a new line that reads

public $backgroundColor;

1. We need to add this to the rules() section so the user option is saved. The simplest way is to add it to the line that already exists, so make the line

array('CHILD_THEME','required'),

now read

array('CHILD_THEME,backgroundColor','required'),

Or you can add your own line, so you have two that read

array('CHILD_THEME','required'),
array('backgroundColor','required'),

Either of these methods will work

1. Add the actual field to the getAdminForm() function, add a section in the elements section that reads:

'backgroundColor' => array(
         'type' => 'ext.SMiniColors.SActiveColorPicker',
), 

This extension has been added as of 3.1.

Save your form and view the results by going to Admin Panel->Themes->Configure Brooklyn Copy click within the Background Color entry blank and the color picker will pop up. Scroll around to pick any color and the resulting RGB code will appear in the text entry blank. Click Save.

To use this value in the Theme, edit the file, we can modify the _head file to add the style to the Meta Data. Because PHP is required to process this, we cannot add it as a static value to a .css file.

Open the file /themes/brooklyncopy/views/site/_head.php

1. Below the other CSS lines, but above </head> insert the lines

<style type="text/css">
    body { background-color:<?= Yii::app()->theme->config->backgroundColor; ?>; }
</style>

Save the file. This should now be fully operational. Change to a color within the theme admin panel, Save, and then refresh the public home page to see the color change.

Previous | Next