New portlet with a custom color picker for sections background color

Plone Support Customizing Plone
,
1

how can i add a color picker to the static text portlet creation form, to let user create porlets with custom colors. how can i start?

edit: I must add the option to change the background color of header/footer/content independent for each portlet created

2

What do you want to colorize ?

Individual words?
All the text?
The portlet border?
The portlet background?

3

Hi, thanks for passing by. I must add the option to change the background color of header/footer/content.

4

Unless there is an add-on already doing this, you need to do some programming.

This is what I think you need to do:

  1. Subclass or make a new portlet type.
  2. Add the 'color fields' to it
  3. Install the colorpicker add on (note: this add-on is not working on Python 3, I think my fork does: https://github.com/espenmn/collective.z3cform.colorpicker )

Another option could be to define some colours to use and use a select field. (in other words, a select field with values like 'green', 'blue', 'red' etc. This approach is probably easier and you can just add the selection as a class in you browser view.

5

i thought about using the colorpicker, but how can i associate the field with the color of the background of the portlet? i have made changes to theme css for global styles, but i need that the new portlet type use the color selected this is here were i get lost.

6

I would read the entered values and apply style attributes at template level.

Here is the original one as an inspiration:

1 Like
7

If you use the color selections you can use that, if you use the colorpicker, I think it will be something like this:

      <div tal:define="color view/data/color;
         style python:'bgcolor: #' + color;
         tal:attributes="style style"> 
         ....
     </div>
1 Like
8

Perfect, i'll go with this!, thanks!