.. You may want to use the usual include line. Uncomment and adjust the path. 
.. include:: ../Includes.txt


=======================
Searchbar: Color Picker
=======================

:Author:
      Christopher

:Created:
      2010-12-18T19:57:23

:Changed:
      2012-07-15T19:59:54.080000000

:Classification:
      searchbar_colorpicker

:Description:
      The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) ----

:Keywords:
      searchbar, searchbar_colorpicker

:Author:
      Sven Jürgens

:Email:
      t3@blue-side.de

:Language:
      en


.. _img-1-img-2-Searchbar-Color-Picker:

|img-1| |img-2| Searchbar: Color Picker
=======================================

Extension Key: searchbar\_colorpicker

Language: en

Version: 1.1.0

Keywords: searchbar, searchbar\_colorpicker

Copyright 2006-2012, Sven Jürgens, <t3@blue-side.de>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

\- a GNU/GPL CMS/Framework available from www.typo3.org

.. _Table-of-Contents:

Table of Contents
-----------------

**`Searchbar: Color Picker 1 <#__RefHeading__5708_1738894311>`_**

**`Introduction 3 <#__RefHeading__5710_1738894311>`_**

`What does it do? 3 <#__RefHeading__463_413120346>`_

`Credits 3 <#__RefHeading__159_1320334024>`_

`Screenshots 3 <#__RefHeading__465_413120346>`_

**`Users manual 5 <#__RefHeading__467_413120346>`_**

**`Administration 6 <#__RefHeading__31511_818911409>`_**


.. _Introduction:

Introduction
------------


.. _What-does-it-do:

What does it do?
^^^^^^^^^^^^^^^^

This is an additional function for ext:searchbar and integrate a HTML5
Color Picker for a given image URL.

Example at `http://search.blue-side.de <http://search.blue-side.de/>`_
(Add the Search Bar to your browser or try it with the search on the
site, have a look at the table for available HotKeys)


.. _Credits:

Credits
^^^^^^^

Thanks go to the following projects:

Color Picker

`http://www.script-tutorials.com/creating-an-html5-canvas-image-color-
picker/ <http://www.script-tutorials.com/creating-an-html5-canvas-
image-color-picker/>`_

Button CSS

http://www.yaml.de

Drag JS

http://threedubmedia.com/code/event/drag/

Color Thief

`http://lokeshdhakar.com/color-thief/ <http://lokeshdhakar.com/color-
thief/>`_

“Drop Zone”

http://www.html5rocks.com/en/tutorials/file/dndfiles/


.. _Screenshots:

Screenshots
^^^^^^^^^^^

Here you see what the extension does: (it's the default image)

|img-3| 
Users manual
------------

Install the extension searchbar and create a new searchbar-Item.

For example like this:

|img-4| Save your item and use it in your Search Bar: f.e: “cp
http://typo3.org/typo3conf/ext/t3org\_template/i/typo3-logo.png”

Now choose your color :)


.. _Administration:

Administration
--------------

There is no administration part.


.. ######CUTTER_MARK_IMAGES######

.. |img-1| image:: img-1.png
.. :align: left
.. :border: 0
.. :height: 44
.. :id: graphics5
.. :name: graphics5
.. :vspace: 57
.. :width: 161

.. |img-2| image:: img-2.png
.. :align: left

.. |img-3| image:: img-3.png
.. :align: left
.. :border: 0
.. :height: 446
.. :id: Grafik1
.. :name: Grafik1
.. :width: 631

.. |img-4| image:: img-4.png
.. :align: left
.. :border: 0
.. :height: 420
.. :id: Grafik2
.. :name: Grafik2
.. :width: 454