Chapter 2. Creating a Theme
Prev		Next

Creating a Theme

Table of Contents

The Global Theme Section
The Header Theme Section
The Widget Theme Section
Using the Custom Theme

Creating a theme is simply a matter of creating a new PHP class that extends the Application_Cp_Theme_Default class.

This class has the name Theme_themename, and belongs in ./lib/themes/themename/theme.php.

The only method that must be defined is the __toString(). This method must return a title for your theme. This value is used when selecting the theme.

The following listing shows the skeleton of a theme which is called sample internally.

Example 2.1. A sample theme skeleton (theme.php)

<?php
    class Theme_sample extends Application_Cp_Theme_Default
    {
        public function __toString()
        {
            return 'Sample Theme';
        }
    }
?>

When you create a custom theme, it extends from the default Recite CMS theme. This means you can choose to override whichever values you want to. There are three main sections for defining the theme, each of which is defined using a separate method in the class.

The Global Theme Section

This section defines colours that are used everywhere within the Control Panel. You can define the colours in the getGlobalTheme() method. You can use the default theme's colours by initially calling the same method on the parent object.

The following listing shows the values that are available. All of the colours must be an RGB hex string preceded by a hash. You can specify either 3 or 6 digits. That is, you could specify #336699 as a colour, or you could shorthand this to #369.

Example 2.2. Specifying the global theme

<?php
    class Theme_sample extends Application_Cp_Theme_Default
    {
        public function getGlobalTheme()
        {
            $ret = parent::getGlobalTheme();

            //$ret->linkTextColor('#');
            //$ret->linkHoverTextColor('#');

            //$ret->stateHoverBgColor('#');
            //$ret->stateHoverBorderColor('#');
            //$ret->stateHoverTextColor('#');
            //$ret->stateHoverLinkTextColor('#');
            //$ret->stateHoverButtonBorderColor('#');
            //$ret->stateHoverButtonBgColor('#');
            //$ret->stateHoverButtonTextColor('#');

            //$ret->stateActiveBgColor('#');
            //$ret->stateActiveBorderColor('#');
            //$ret->stateActiveTextColor('#');
            //$ret->stateActiveLinkTextColor('#');
            //$ret->stateActiveButtonBorderColor('#');
            //$ret->stateActiveButtonBgColor('#');
            //$ret->stateActiveButtonTextColor('#');

            //$ret->stateDefaultBgColor('#');
            //$ret->stateDefaultBorderColor('#');
            //$ret->stateDefaultTextColor('#');
            //$ret->stateDefaultLinkTextColor('#');
            //$ret->stateDefaultButtonBorderColor('#');
            //$ret->stateDefaultButtonBgColor('#');
            //$ret->stateDefaultButtonTextColor('#');

            return $ret;
        }
    }
?>