A new Extension, “Color Chooser Field” is now available for download. Comments and feedback can be left here but if you discover any issues, please post it on the issue tracker.

I have a text field where I add a hex code for a color and I’d like to create a simple text field extension to add a color chooser, like this one to make things easier for clients. I don’t want to add functionality to the field, just a handy js in the admin area to help them populate it.

How would I start with this? Would I look at the TinyMCE editor extension and it’s modifyTextarea function or is that not the right way to go about it?

It’s not really critical to my work, I really just want to try and make a simple extension.

UPDATE: I created it. You can download it here:

Symphony Extension: Color Chooser Field (finished!) from Josh Nichols on Vimeo.

Change log


  • Now uses the jQuery Tools Tooltip plugin so the color picker will not extend outside the browser window.


  • Updated to use Symphony core’s jQuery file (no longer works with versions earlier than 2.0.5).

  • Now uses compatibility mode so it will work with other frameworks.

  • Color chooser is now hidden until field is in focus, taking up less screen real estate – and looking cooler.


  • Fixed duplicate links to JavaScript files.

  • Fixed bug in Safari 4.

It depends on what you’re trying to achieve. Check out Rowan’s Calendar Overlay or my jQuery Date Picker to get you started.

I’d probably use a JavaScript-only implementation that tied the colour picker to the input field based on the name attribute. Something like: $('input[name="colourpicker"]'). ...

Thanks. That makes sense. As I’ve been poking around, I realized I don’t want it to be an option on every text field, like a text formatter. I need to make a custom field for using in a data source.

I realized I don’t want it to be an option on every text field, like a text formatter.

You don’t want a text formatter, definitely a field. I think it would be as simple as duplicating the text input field and modifying it to have a class for the JavaScript to act on. The extension’s driver would just need to add the appropriate JavaScript file to the header.

The alternative is to make the extension JavaScript-only — no field type. You could take a convention-over-configuration approach and assume that you only want to apply the jQuery plugin to fields with a name of “colour” (or “color” for our trans-Atlantically-challenged friends :-P).


The Extension would then simply write the jQuery plugin to the head, and an apply JavaScript file with the appropriate selector.

That said, a Field approach would be cool too and would allow for more flexibility. For example a “Colour Picker” field type (which would be a very basic field that extends the Input class) could have options to store hex but output both Hex and RGB in the Data Source XML.

I have a new field and it creates tables in the database, applies the js in the edit screen and saves data to the database. I can also add it to a data source.

Now, I have to figure out how to make it output as XML. I think my problem is that I used the Hash field extension as a base and it doesn’t output in the XML. Any ideas on where to start with that bit?

Never mind, it’s all working fine. I was looking at the XML of an entry that had no color value. :-/

I have a working extension. Woot!

Symphnoy Extension: Color Chooser Field from Josh Nichols on Vimeo.

I have a few more things I want to do with it and I might use a different color picker, but it’s a start.

That is rather win :-)

Love the live-update of the input background colour. One finishing touch could be to highlight the colour in the Publish table (prepareTableValue()). This could be really useful on an upcoming project I have, so thank you!

@MrBlank This is awesome! Thanks so much for pulling this together! Very nice!

I found another color picker I think I like better: Really Simple Color Picker in jQuery

It’s a lot smaller and simpler. The best part is it allows me to predefine a series of colors, which is good for sites with a predetermined color scheme.

Anyone else have an opinion about which to use? I’d like to get an idea on what would be the most useful.

I think they both serve a different purpose. I can think of two websites where I’d want to use one or the other.

Depending on how the plugins work, could this be an option when adding the field to a section? A select box “Choose jQuery Plugin”.

Depending on how the plugins work, could this be an option when adding the field to a section? A select box “Choose jQuery Plugin”.

Is there another extension that has on option like this that I could use as an example? Without documentation, I’d need some help. :-)

So how do you insert the chosen colour in your page? css in the head or inline? Or did you succeed in having it create a css file as page?

It’s a value like any other that you can pull with a data source. Use it any way you want in your XSLT.

I know, but I wonder how you used it, because I used something similar before (manual hex) and found it unelegent to have css in the header of my page. I would have liked to have a css file created for it, but am not sure on how to do that.

@newnomad I’m not sure how to create a css file with XSLT, but I think it can be done. Right now I don’t really have a use for it, but I’m sure someone will.

So far, I have it working with multiple fields, but I haven’t figured out how to make sure a valid Hex value has been entered. I also want to make the column view have a matching colored background. These things require a bit more PHP and JavaScript knowledge than I have. It might take a while for me to sort it out.

I may just release it as it is since I’m going to be a dad any day now. I won’t have much time to work on it then! :-)

Generating CSS files dynamically? Actually it took me a while… They must be Symphony pages, of course. Here is the basic XSL you may use:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"

<xsl:output method="text"

<xsl:template match="data">
    (...some CSS goes in here...)
    (...some XSL goes in here...)
    (...again some CSS...)


The second thing is to have the page send a text/css header. If you are on latest Symphony dev code, you may use Alistair’s Content Type Mappings extension. If you are on Symphony 2.0.2 stable (or before), you will have to hack a bit:

In /symphony/lib/toolkit/class.frontendpage.php add these lines in line 48:

elseif(@in_array('CSS', $this->_pageData['type']) || @in_array('css', $this->_pageData['type'])){
    $this->addHeaderToPage('Content-Type', 'text/css; charset=utf-8');

And maybe (just in case you want to create JavaScript files dynamically as well):

elseif(@in_array('JS', $this->_pageData['type']) || @in_array('js', $this->_pageData['type'])){
    $this->addHeaderToPage('Content-Type', 'application/x-javascript; charset=utf-8');

(These lines of PHP will allow to set the page type to “CSS” or “JS” and thus have the correct content type header generated by Symphony.)

That’s about it. Keep in mind that Symhony pages are not cached in the browser – this actually means that dynamically generated CSS or JS files will be loaded on every page load! So you better keep ‘em small.

Well, it’s almost done.

Symphony Extension: Color Chooser Field (pre-release) from Josh Nichols on Vimeo.

You can now have more than one color field per entry and the entry list page in the admin will display a matching color swatch.

I need to add some Hex value validation and it’ll be ready to release.

I finally figured out Git! Here’s the extension on Github. I’m almost done. It currently works fine, but doesn’t do any error checking – you can add a value to the field that is not a valid hex value. Feel free to use it or adapt it as you need.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details