Color Chooser

The popular return of the color chooser in Refraction makes a third appearance, in a more conservative and complimentary format. There are several options to choose from to supplement the elegance and ease of use with the template. Simply go to the template manager to change a variety of styles and colours.

Color Chooser

The options are as follows, and the areas that they control are indicative in their name:-

  • Body Overlay Style
  • Background Style
  • Showcase Title
  • Showcase Text Colour
  • Showcase Link Colour
  • Body Text Colour
  • Body Link Colour
[clear]

Creating your own presets

With Refraction, we provide a series of preset configurations for the color chooser which you and your visitors can select from. However, if you wish to set or change these yourself, the process is extremely simple.

  1. Login into the Joomla Administrator
  2. Go to Extensions > Template Manager > rt_refraction_j15
  3. Set Preset Styles to Custom
  4. Now, choose all the options you wish from the several options available
  5. Hit the Custom Styles button in the Button menu, located in the upper right of the template manager
  6. This will output all the values into the Custom Style Output box, situated below the options. Copy the outputted code from this box
  7. Open the file styles.php which is located within the /templates/rt_refraction_j15/ directory
  8. Locate the following code block.
    $stylesList = array(
    	'style1'  => array('dark', 'bgstyle1', '#d2de00', '#dddddd', '#A4AD2B', '#aaaaaa', "#A4AD2B"),
    	'style2'  => array('light', 'bgstyle2', '#000000', '#000000', '#000000', '#4D4D4D', "#7e8407"),
    	'style3'  => array('dark', 'bgstyle3', '#ffffff', '#dddddd', '#21bddf', '#999999', "#21bddf"),
    	'style4'  => array('dark', 'bgstyle4', '#f8d000', '#dddddd', '#F3D104', '#aaaaaa', "#F3D104"),
    	'style5'  => array('dark', 'bgstyle5', '#ffffff', '#ffffff', '#9ac615', '#aaaaaa', "#9ac615"),
    	'style6'  => array('dark', 'bgstyle6', '#ffa715', '#dddddd', '#FFB028', '#aaaaaa', "#FFB028"),
    	'style7'  => array('dark', 'bgstyle7', '#ffffff', '#dddddd', '#3c9be6', '#999999', "#3c9be6"),
    	'style8'  => array('dark', 'bgstyle8', '#fe8529', '#dddddd', '#e13f00', '#aaaaaa', "#e13f00"),
    	'style9'  => array('dark', 'bgstyle9', '#ffffff', '#dddddd', '#e6003d', '#aaaaaa', "#e6003d"),
    	'style10' => array('light', 'bgstyle10', '#000000', '#333333', '#0087aa', '#444444', "#0087aa")
    );
    
  9. Edit that block to meet your needs, either by remove the code between $stylesList = array( and ); and copying in the code directly, or adding the new style code to the list of current styles or whatever method you prefer.
    Ensure that you only edit the code in between $stylesList = array( and ); and ensure it is the right format otherwise you will receive errors
  10. Save, and upload the file to your site.
Demo Information NOTE: This demo is purely for demonstration purposes and all the content relating to products, services and events are fictional and are designed to showcase a live site. All images are copyrighted to their respective owners.
Contact Information +44 (0) 000 000 000
+44 (0) 001 001 001
info@somepany.com
www.ourwebsite.com
Location 369 Lexington Avenue
11th Floor
New York, NY 10017
United States of America
Staff Details CEO: John Smith
Marketing: Carol Burn
Finance: Steve Thomas
Personel: Jenny Chui