create new tag
, view all tags

Point and Click: Color Picker / Color Code Generator

2011-01-05 - 07:56:54 by PeterThoeny in General
What is TWiki?
A leading open source enterprise wiki and web application platform used by 50,000 small businesses, many Fortune 500 companies, and millions of people.
MOVED TO... Learn more.
Do you need to pick a color for your web pages? Use the color picker to the left; point and click, then copy the hexadecimal color code to your website or TWiki. The color picker uses the intuitive HSL (hue, saturation, and lightness) color space rather than the more common HSB (hue, saturation, and brightness), which means it's easy to make a color brighter without touching its saturation, or vice versa. This is a jQuery-based widget called Farbtastic, developed by Steven Wittens of Acko.net.

TWiki has a ColorPickerPlugin that makes this color picker widget available to TWiki users. Application developers can add color pickers to TWiki applications. Once the ColorPickerPlugin is installed and enabled, it is easy to use the color picker in an HTML form. Example:

<form action="...">
Color: %COLORPICKER{ name="color_demo" size="12" value="#123456" class="twikiInputField" }%
This will show an HTML input field named "color_demo" and a color picker tied to it. The size, value and class parameters are optional.

The ColorPickerPlugin also adds a new type color to TWikiForms. Example form definition:

Name: Type: Size Values: Tooltip message:
Color demo color 12   Select color

Any TWiki topic that uses this form will have the color picker accessible when editing the topic. See details in TWikiForms.

It is also possible to use the color picker in HTML forms on your website, outside of TWiki:

1. Download jQuery library and put the css and js files in your html enabled directory, such as into a jquery subdirectory.

2. Download the ColorPickerPlugin, unpack it and put the content of the pub/TWiki/ColorPickerPlugin directory into the jquery subdirectory. You do not need any other directories. Alternatively, download Farbtastic from acko.net.

3. Add the color picker to your HTML form. Example, assuming jQuery is located at /jquery:

<link rel="stylesheet" href="/jquery/jquery-all.css" type="text/css" media="all" />
<script type="text/javascript" src="/jquery/jquery-all.js"></script>
<script type="text/javascript" src="/jquery/farbtastic.js"></script>
<link rel="stylesheet" href="/jquery/farbtastic.css" type="text/css" />
<form action="...">
Color: <input type="text" id="color_demo" name="color_demo" value="#808080" size="12" />
<div id="color_demo_picker"></div>
<script type="text/javascript">
  $(document).ready(function() {

This will show an HTML input field named "color_demo" and a color picker tied to it.




Edit | Attach | Watch | Print version | History: r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r2 - 2011-05-22 - PeterThoeny

Twitter Delicious Facebook Digg Google Bookmarks E-mail LinkedIn Reddit StumbleUpon    
  • Help
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.