Here is the code to enable the user to easily use a drop down menu to quickly and easily change the theme of their website and enable you the designer/developer to create make use of multiple stylesheet and navigation themes.

Insert the following code in between the <head></head> tag of the webpage/template(s) you want to be switchable:

Code: Select all
    <link rel="stylesheet" type="text/css" media="screen" href="<cms:show k_site_link />css/<cms:get_custom_field 'website_navigation_type_stylesheet' masterpage='globals.php' />"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<cms:show k_site_link />css/colors/<cms:get_custom_field 'website_style_color_stylesheet' masterpage='globals.php' />"/>


Insert the following code in the GLOBALS.PHP File for the CMS OPTIONS:

Code: Select all
      <cms:editable name='website_schemas' label='Website Themes and Style' type='group' /> 
         <cms:editable name='website_style_color_stylesheet' label='What Color scheme would you like?' desc='Please select an option from the dropdown menu' opt_values="<cms:embed 'layouts/color-stylesheets.php'/>" type='dropdown' group='website_schemas' masterpage='globals.php'>navigation-STYLESHEETNAME.css</cms:editable>
         <cms:editable name='website_navigation_type_stylesheet' label='What Navigation Scheme would you like?' desc='Please select an option from the dropdown menu' opt_values="<cms:embed 'layouts/nav-style.php'/>" type='dropdown' group='website_schemas' masterpage='globals.php'>color-STYYLESHEETNAME.css</cms:editable>


TAKE NOTE: The pathing that is used in calling the sheets before the CMS calls the file name.

Insert the following code in a new file file name "color-stylesheets.php"(you will have to create this file) in the websites /snippets/layouts/" (you may have to create the layouts folder) folder:

Code: Select all
Blue Theme (Default)=color-blue.css|
Gray Theme=color-gray.css|
Green Theme=color-green.css|
Red Theme=color-red.css|
Yellow Theme=color-yellow.css|


TAKE NOTE: that the phrase to the left of the equals sign is what the user will see in the drop down menu and the file name to the right is the name of the css file linking to the name, always end the line with the pipe ( | ) operator.


Insert the following code in a new file file name "nav-style.php"(you will have to create this file) in the websites /snippets/layouts/" (you may have to create the layouts folder) folder:

Code: Select all
Navigation Style 1=navigation-style-1.css |
Navigation Style 2=navigation-style-2.css |
Navigation Style 3=navigation-style-3.css |
Navigation Style 4 (Default)=navigation-style-4.css |


TAKE NOTE: that the phrase to the left of the equals sign is what the user will see in the drop down menu and the file name to the right is the name of the css file linking to the name, always end the line with the pipe ( | ) operator.

Your user will love that they can change the website theme with just a couple of clicks :)

- Developernator