Add color pickers to your website

Add as many color pickers to your website as you want.

color-picker-teaser.jpg
Last tested on: CMSMS 1.11.6
Used modules:
- CGSimplesmarty 1.6.1
- CGExtensions 1.32.6
- ECB 1.5

1. Create a new template: "Layout page template"

Since the color pickers are content blocks and don't want the color pickers to appear on all pages we need a separate template for the "Layout page".
In this otherwise virtually empty and useless template, you can call as much ECB color pickers as you need.
Make sure you call them before the content tag to have them appear above the wysiwyg when editing the page.
(the wysiwyg is useless since we won't be using it but we can't disable it)
{content_module module="ECB" field="color_picker" block="site_bg" label="Website background color - Default value = 697890" default_value="#697890"}
{content_module module="ECB" field="color_picker" block="site_shadow" label="Website dropshadow color - Default value = 666666" default_value="#666666"}
{content_module module="ECB" field="color_picker" block="head_bg" label="<br><br>Header background color - Default value = BCD9B9" default_value="#BCD9B9"}

2. Create a new page: "Layout page"

This is the page where we (or the clients) will be able to pick the various colors.
Make sure you select the "Layout page template", uncheck the "This page is searchable", "Show in Menu" & "Cachable".
Note: the page has to remain "Active".

3. Edit the (regular) website template

Now we will make sure the values are available in the "other" template's CSS file.
To achieve this, call the page contents (in your "regular" template) and assign them to a variable using CGSimpleSmarty.

{$cgsimple->get_page_content('website-layout','site_bg','site_bg')}
{$cgsimple->get_page_content('website-layout','site_shadow','site_shadow')}
{$cgsimple->get_page_content('website-layout','head_bg','head_bg')}
...

4. Use the colors in your stylesheets

Now that your "regular" template grabs the values of the colorpickers, you can use them in any stylesheet associated to your "regular" template:
("[[...]]" replaces "{ldelim}...{rdelim}" in the stylesheets)

[[$site_bg]]
[[$site_shadow]]
[[$head_bg]]
...

5. Add a UDT to clear the cache

Since the stylesheets are cached, we need to clear the cache after the "Website Layout" page changes.
First let's create the UDT that will take care of this for us and call it ... "clear_cache" hehe :)
Since we don't want to clear the cache every time someone changes some page, inside the UDT, we verify the change was made to the "Website Layout" page.
(So make sure the alias in the UDT eaquals the alias for the "Website Layout" you created!)

$post = $_POST;
if ($post["alias"] == "website-layout") {
    cmsms()->GetContentOperations()->ClearCache();
}

6. Add and "Event" that triggers the clear_cache UDT

Navigate to "Extensions > Event manager"
Search for "ContentEditPost" in the list and open it.
Now select the "clear_cache" UDT from the dropdown menu and click Add.

7. Done!

As usual... a shout in the comments if you like it is appreciated!

Greetings,
Manuel

ALL-INKL.COM - Webhosting Server Hosting Domain Provider

Comments