Colorpicker in Administration

[uniqu3]

Hi all,

unfortunately i haven't found anything similar in forums or plugin repository so i am asking here.
I would like to add option in the Admin area of "Edit Page" with a color picker like "Farbtastic" http://acko.net/dev/farbtastic
its a jquery driven color picker that overrides style based on id.

Why?
Well there are those types of users that are never happy with their color scheme or just want to play around with their website and to save my time and hassle with this type of people i would love to add an option like this in the admin area.
There would be option with adding different Templates or Stylesheets or Smarty Stylesheet plugin but then i would still have to predefine the color schemes.

Has anyone done anything similar or is there already a similar plugin that i overlooked?
Has anyone an idea how to do it with UDT or how?

I am designer not programmer so please be gentle

Thanks

[Peciura]

EDIT: This stuff kills Apply button in content edit page. It can happen because jQuery is included in content and not in head.

Well i am not sure if this is what you want - look screenshot first.
Here is what have to do:
1. download latest jQuery library (it is 'jquery-1.4.2.min.js' ATM)
2. create folder '/lib/jquery/farbtastic'
3. paste all files to it
4. add style

Code: Select all

.colorpicker{
	float:left
}

to '/lib/jquery/farbtastic/farbtastic.css' (see attached 'farbtastic.css.txt')
5. Include color picker instead of 3 shortcuts:
  I. a. write '#' to URL filed of first Shortcut
      b. copy-paste to Title field

Code: Select all

</a>1<script type='text/javascript' src='/lib/jquery/jquery-1.4.2.min.js'></__script><a>

  II. a. write '#' to URL filed of second Shortcut
      b. copy-paste to Title field

Code: Select all

</a>2<script type='text/javascript' src='/lib/jquery/farbtastic/farbtastic.js'></__script> <link rel='stylesheet' href='/lib/jquery/farbtastic/farbtastic.css' type='text/css'/><a>

  III. a. write '#' to URL filed of third Shortcut
       b. copy-paste to Title field

Code: Select all

</a>3<script type="text/javascript">$(document).ready(function(){$('#colorpicker').farbtastic('#color');}); </__script> <form><input type="text" id="color" name="color" value="#123456" /></form><div id="colorpicker"></div><a>

6. (optional) remove transparency of

EDIT: it is important not to include jQuery library more than once. It can happen if you are using jQueryTools module

[uniqu3]

Hi Peciura,

thank you for the fast reply and example.
I didn't try your example yet, but if i am not worng this wouldn't take any affect in frontend of the website/design.
What i was aiming at is to give users the ability to choose the background color for predefined css ids.

For example some standard template with wrapper, header, sidebar, content and footer, these have ids defined already and in the backend of the CMSMS there would somewhere be the colorpicker with fields like "Choose #wrapper color:" etc.

Anyway when i think better, a jquery solution isn't so ideal if the visitor has js deactivated but at least it would be a start.

[Peciura]

ScriptDeploy is able to use smarty in CSS. Create FEU properties to store colors for divs and try using them in CSS. If it works - create pretty colorpicker.

[uniqu3]

Ok i understand the reason for scriptdeploy but not for FEU Module, since i this should only be available to Admin in the backend. Something like content Block function without wysiwyg.
Maybe i am thinking to complicated but probably i would Need a UDT that connects to farbtastic which is somehow being displayed in the backend "edit Template" or "edit page" , after choosing the color there, this color Code would be passed to the UDT which passes this to scriptdeploy or Smarty stylesheet Plugin and so the according style/color in the frontend is changed.

If anyone knows how this could Be accomplished and done userfriendly without changing Template Code or any Core Files i am willing to Pay for this function.
This would Be very helpfull since from Time to Time i do some pro-bono work and don't want to spend to much Time on changing these Designs or i can simply setup the Cmsms and the Admin can do with the color scheme of the Template whatever He wants.
Or there are customers that expect a rolex but paying for a noname watch.

[Peciura]

In addition i have created  very minimal template ('background_control_panel') for special page (not active page) that serves as background control panel (also call it 'background_control_panel'). There are 5 textfields to enter background-colors.
For next step you need working modue CGSimpleSmarty. In working template i included small style sheet , that takes values from blocks of page 'background_control_panel'.

template 'background_control_panel'

{content oneline='true'  block='wrapper_background_color'}
{content oneline='true'  block='header_background_color'}
{content oneline='true'  block='sidebar_background_color'}
{content oneline='true'  block='content_background_color'}
{content oneline='true'  block='footer_background_color'}

style in the head of working template

{literal}
#wrapper_background_color{
background-color:{/literal}{$cgsimple->get_page_content('background_control_panel','wrapper_background_color_en')}{literal};
}
#header_background_color{
background-color:{/literal}{$cgsimple->get_page_content('background_control_panel','header_background_color_en')}{literal};
}
#sidebar_background_color{
background-color:{/literal}{$cgsimple->get_page_content('background_control_panel','sidebar_background_color_en')}{literal};
}
#content_background_color{
background-color:{/literal}{$cgsimple->get_page_content('background_control_panel','content_background_color_en')}{literal};
}
#footer_background_color{
background-color:{/literal}{$cgsimple->get_page_content('background_control_panel','footer_background_color_en')}{literal};
}
{/literal}

Look to picture to see if that is smth similar what you need.

[uniqu3]

Yes this looks good and as you explain it here it looks easy now and i was thinking to complicated again.
Probably it could be even combined with the "smarty stylesheet" plugin?
Mail me your PayPal address.

[Peciura]

It simply adds a style sheet like this to the template.

Code: Select all

<style type="text/css">
#wrapper_background_color{
background-color:#123456;
}
#header_background_color{
background-color:#461256;
}
#sidebar_background_color{
background-color:#ed0727;
}
#content_background_color{
background-color:#78ed07;
}
#footer_background_color{
background-color:#07eda5;
}
</style>

To make your site working you should use {stylesheet} as well.

[uniqu3]

Yes i did understand that, i just wondered if this could be combined with any plugin like "smarty stylesheet" so i don't have to use in template, i always try not to use inline css and keep everything together in my css.

Edit: ok like PMed

[Peciura]

As far as i know it should be extra syle in template or ScriptDeploy sice you need smarty in it.

[Jeff]

A project I am working on requires a module for doing this I will let you know when it is done.

[uniqu3]

@Peciura, ok i will have a play with it.

@ajprog, oh ok it wasn't only me thinking like this curious about the module