dynamicColorChange - Example website
The important button is on the bottom of the screen on the right handside!!

Typography example


Examples of the usage of "dcl" class

This element is colored by adding the class "dcl-100"
This element is colored by adding the class "dcl-90"
This element is colored by adding the class "dcl-80"
This element is colored by adding the class "dcl-70"
This element is colored by adding the class "dcl-60"
This element is colored by adding the class "dcl-50"
This element is colored by adding the class "dcl-40"
This element is colored by adding the class "dcl-30"
This element is colored by adding the class "dcl-20"
This element is colored by adding the class "dcl-10"
This element is colored by adding the class "dcl"
This element is colored by adding the class "dcl10"
This element is colored by adding the class "dcl20"
This element is colored by adding the class "dcl30"
This element is colored by adding the class "dcl40"
This element is colored by adding the class "dcl50"
This element is colored by adding the class "dcl60"
This element is colored by adding the class "dcl70"
This element is colored by adding the class "dcl80"
This element is colored by adding the class "dcl90"
This element is colored by adding the class "dcl100"

Examples of the usage of "dclHover" class

This element is colored by adding the class "dclHover-100"
This element is colored by adding the class "dclHover-90"
This element is colored by adding the class "dclHover-80"
This element is colored by adding the class "dclHover-70"
This element is colored by adding the class "dclHover-60"
This element is colored by adding the class "dclHover-50"
This element is colored by adding the class "dclHover-40"
This element is colored by adding the class "dclHover-30"
This element is colored by adding the class "dclHover-20"
This element is colored by adding the class "dclHover-10"
This element is colored by adding the class "dclHover"
This element is colored by adding the class "dclHover10"
This element is colored by adding the class "dclHover20"
This element is colored by adding the class "dclHover30"
This element is colored by adding the class "dclHover40"
This element is colored by adding the class "dclHover50"
This element is colored by adding the class "dclHover60"
This element is colored by adding the class "dclHover70"
This element is colored by adding the class "dclHover80"
This element is colored by adding the class "dclHover90"
This element is colored by adding the class "dclHover100"

Examples of the usage of "dbg" class

This element is colored by adding the class "dbg-100"
This element is colored by adding the class "dbg-90"
This element is colored by adding the class "dbg-80"
This element is colored by adding the class "dbg-70"
This element is colored by adding the class "dbg-60"
This element is colored by adding the class "dbg-50"
This element is colored by adding the class "dbg-40"
This element is colored by adding the class "dbg-30"
This element is colored by adding the class "dbg-20"
This element is colored by adding the class "dbg-10"
This element is colored by adding the class "dbg"
This element is colored by adding the class "dbg10"
This element is colored by adding the class "dbg20"
This element is colored by adding the class "dbg30"
This element is colored by adding the class "dbg40"
This element is colored by adding the class "dbg50"
This element is colored by adding the class "dbg60"
This element is colored by adding the class "dbg70"
This element is colored by adding the class "dbg80"
This element is colored by adding the class "dbg90"
This element is colored by adding the class "dbg100"

About


dynamicColorChange is a small jQuery plugin to give your users the opportunity to style your page as they want. All you have to do, is, to define a couple of selectable colors and include a button with the class "color_changer-toggle" to toggle the color changer.

Now you just add the class "dcl" to dynamically color the text color of the element with the user-chosen color. The class "dbg" does the same with the background-color property of the element.

A small special feature enables you to use the class "dcl" with a number from -100 to 100 after the class name (e.g. "dcl-50" or "dcl80"). This will apply the color lightened or dankened with the given percentage number.