Javascript Color Picker boxes in a wiki

Javascript color pickers seem to be rampant around the web, some free with restrictive licenses. Some for purchase, dot dot dot I found this one based on a tutorial teaching one how to build a javascript color picker. It has both a streamline and advanced view. http://www.webreference.com/programming/javascript/mk/column3/index.html.

There is an available contrib in TWiki for color picking but it seems a bit outdate for a look and feel. More importantly not setup in a way so I can associate it to changing colors of something on the screen.

I created this contrib by

• creating page[twiki]/TWiki/ColorPicker.
• add attachments
  
• edit the page and add ColorPickerPageContents

You know have a Color picker. The color picker works by using includes in your page.

Includes this ONCE on your page %INCLUDE{"TWiki.ColorPicker" section="javascript" }%

Include this after each component you would like to change color for. %INCLUDE{"TWiki.ColorPicker" section="colorpicker" CLICKER="" CHANGER="" }%

Where

• section=colorpicker is the part that generates the goodness.
• clicker is the object used to bring up the selection box
• change is the object background you are trying to change

If the object is an input type with value attribute, its value will be set to hex color value.
Examples below or see the examples in a TWiki

Examples

Text Box :

Click on Fuzzy.

Hi!

Fuzzy

Change Color

Some text that

needs a new color

don't you think

Adding Google Ads to your Twiki

Pretty Simple.

I wanted to setup up the wiki so each page would have ad's in top, bottom and left banners. I am trying to setup defaults for the site and ability to customize for any given 'Web'. In this post I achieve in the standard 'pattern' template.

Footer

1. The footer was cut and paste. ExampleWebBottomBar

Page to Edit {your twiki}/bin/view.pl/TWiki/WebBottomBar

Ad to use : I use the minimalistic link adds for the footer as it seems to fit well.

Changes to make,

[ADSENSE SCRIPT]

%WEBCOPYRIGHT%

Header

2. The header was easy, but did have to tweak a little more. ExampleWebTopBar

Page to Edit {your twiki}/bin/view.pl/TWiki/WebTopBar

Ad to use : 728x90_as

Changes to make,

A. Add a section in the middle. [AD SCRIPT]

B. I had to change the margin setting for the table to "margin-top: -5px;"

Side Bar

3. The sidebar (leftbar) is easy to change but must be done for each web. ExampleWebLeftBar

Page to Edit {your twiki}/bin/view.pl/[WEB]/WebLeftBar

Ad to use : 120 x 600 image

Changes to make,

And add the adsense script to the left side.

[ADSENSE SCRIPT]

What's Next.

Next... Customizing Top and Bottom bars for each Web.

My TwikiWikiMe Playground