Fixed Color Chooser
color-wheel-pencils.jpg

These are just the @font-face files with the code for the "Color Chooser"

P.S. Bryce, you may post this in your blog if you'd like to :)

The CSS code:

/* Angelina Font by Font Squirrel (http://www.fontsquirrel.com) Downloaded on January 9, 2011 12:08:32 PM America/New_York */
 
@font-face {
    font-family: 'Angelina';
    src: url('http://www.icondeposit.com/local--files/dev:fixed-color-chooser/angelina-webfont.eot');
    src: local('☺'), url('http://www.icondeposit.com/local--files/dev:fixed-color-chooser/angelina-webfont.woff') format('woff'), url('http://www.icondeposit.com/local--files/dev:fixed-color-chooser/angelina-webfont.ttf') format('truetype'), url('http://www.icondeposit.com/local--files/dev:fixed-color-chooser/angelina-webfont.svg#webfontlC3a4dkA') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/* ******Site Color Chooser code Designed and Created by MDesign****** */
.colorpicker-container {
    position: fixed;
    float: left;
    top: 140px;
    left: 0px;
    hight: 135px;
    width: 36px;
    padding-left: 0;
    margin: 0;
    font-size: 19px;
    z-index: 80;
}
.colorpicker-1 {
    margin: 0;
    padding: 3px;
    width: 30px;
    height: 30px;
}
.colorpicker-1 a {
    -webkit-transition: opacity 250ms ease-out;
    -moz-transition: opacity 250ms ease-out;
    border: 1px solid #444;
    background-color: #f5f5f5;
    opacity: .9;
    color: transparent !important;
    text-shadow: none !important;
}
.colorpicker-1 a:hover {
    opacity: 1;
    color: transparent !important;
}
.colorpicker-1 span {
    visibility: hidden;
    display: inline;
    font-size: 28px;
    font-family: 'Angelina';
    text-shadow: 1px 1px 1px #fff;
    background-color: #transparent;
    color: #2191D1;
    width: 125px;
    white-space: nowrap;
    padding: 5px 5px;
    height: 30px;
    text-align: center;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    top: 0px;
    left: 3px;
    opacity: 0;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    vertical-align: middle;
    z-index: 999;
    font-weight: normal;
    font-style: normal;
}
 
.colorpicker-1:hover span{
    visibility: visible;
    opacity: 1 !important;
}
.colorpicker-1.overlay {
    display: none;
}
.colorpicker-2 {
    margin: 0;
    padding: 3px;
    width: 30px;
    height: 30px;
}
.colorpicker-2 a {
    border: 1px solid #444;
    background-color: #fefefe;
    -webkit-transition: opacity 250ms ease-out;
    -moz-transition: opacity 250ms ease-out;
    opacity: .9;
    color: transparent !important;
    text-shadow: none !important;
}
.colorpicker-2 a:hover {
    opacity: 1;
    color: transparent !important;
}
.colorpicker-2 span {
    visibility: hidden;
    display: inline;
    font-size: 28px;
    font-family: 'Angelina';
    text-shadow: 1px 1px 1px #fff;
    background-color: #transparent;
    color: #2191D1;
    width: 125px;
    white-space: nowrap;
    padding: 5px 5px;
    height: 30px;
    text-align: center;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    top: 0px;
    left: 3px;
    opacity: 0;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    vertical-align: middle;
    z-index: 999;
    font-weight: normal;
    font-style: normal;
}
 
.colorpicker-2:hover span{
    visibility: visible;
    opacity: 1 !important;
}
.colorpicker-2.overlay {
    display: none;
}
.colorpicker-3 {
    margin: 0;
    padding: 3px;
    width: 30px;
    height: 30px;
}
.colorpicker-3 a {
    border: 1px solid #444;
    background-color: #eaeaea;
    -webkit-transition: opacity 250ms ease-out;
    -moz-transition: opacity 250ms ease-out;
    opacity: .9;
    color: transparent !important;
    text-shadow: none !important;
}
.colorpicker-3 a:hover {
    opacity: 1;
    color: transparent !important;
}
.colorpicker-3 span {
    visibility: hidden;
    display: inline;
    font-size: 28px;
    font-family: 'Angelina';
    text-shadow: 1px 1px 1px #fff;
    background-color: #transparent;
    color: #2191D1;
    width: 125px;
    white-space: nowrap;
    padding: 5px 5px;
    height: 30px;
    text-align: center;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    top: 0px;
    left: 3px;
    opacity: 0;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    vertical-align: middle;
    z-index: 999;
    font-weight: normal;
    font-style: normal;
}
 
.colorpicker-3:hover span{
    visibility: visible;
    opacity: 1 !important;
}
.colorpicker-3.overlay {
    display: none;
}
.colorpicker-4 {
    margin: 0;
    padding: 3px;
    width: 30px;
    height: 30px;
}
.colorpicker-4 a {
    border: 1px solid #444;
    background-color: #e5f6ff;
    opacity: .9;
    -webkit-transition: opacity 250ms ease-out;
    -moz-transition: opacity 250ms ease-out;
    color: transparent !important;
    text-shadow: none !important;
}
.colorpicker-4 a:hover {
    opacity: 1;
    color: transparent !important;
}
.colorpicker-4 span {
    visibility: hidden;
    display: inline;
    font-size: 28px;
    font-family: 'Angelina';
    text-shadow: 1px 1px 1px #fff;
    background-color: #transparent;
    color: #2191D1;
    width: 125px;
    white-space: nowrap;
    padding: 5px 5px;
    height: 30px;
    text-align: center;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    top: 0px;
    left: 3px;
    opacity: 0;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    vertical-align: middle;
    z-index: 999;
    font-weight: normal;
    font-style: normal;
}
 
.colorpicker-4:hover span{
    visibility: visible;
    opacity: 1 !important;
}
.colorpicker-4.overlay {
    display: none;
}
.colorpicker-5 {
    margin: 0;
    padding: 3px;
    width: 30px;
    height: 30px;
}
.colorpicker-5 a {
    border: 1px solid #444;
    background-color: #dcffcd;
    opacity: .9;
    -webkit-transition: opacity 250ms ease-out;
    -moz-transition: opacity 250ms ease-out;
    color: transparent !important;
    text-shadow: none !important;
}
.colorpicker-5 a:hover {
    opacity: 1;
    color: transparent !important;
}
.colorpicker-5 span {
    visibility: hidden;
    display: inline;
    font-size: 28px;
    font-family: 'Angelina';
    text-shadow: 1px 1px 1px #fff;
    background-color: #transparent;
    color: #2191D1;
    width: 125px;
    white-space: nowrap;
    padding: 5px 5px;
    height: 30px;
    text-align: center;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    top: 0px;
    left: 3px;
    opacity: 0;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    vertical-align: middle;
    z-index: 999;
    font-weight: normal;
    font-style: normal;
}
 
.colorpicker-5:hover span{
    visibility: visible;
    opacity: 1 !important;
}
.colorpicker-5.overlay {
    display: none;
}
.colorpicker-6 {
    margin: 0;
    padding: 3px;
    width: 30px;
    height: 30px;
}
.colorpicker-6 a {
    border: 1px solid #444;
    background-color: #faffd6;
    opacity: .9;
    -webkit-transition: opacity 250ms ease-out;
    -moz-transition: opacity 250ms ease-out;
    color: transparent !important;
    text-shadow: none !important;
}
.colorpicker-6 a:hover {
    opacity: 1;
    color: transparent !important;
}
 
.colorpicker-6 span {
    visibility: hidden;
    display: inline;
    font-size: 28px;
    font-family: 'Angelina';
    text-shadow: 1px 1px 1px #fff;
    background-color: #transparent;
    color: #2191D1;
    width: 125px;
    white-space: nowrap;
    padding: 5px 5px;
    height: 30px;
    text-align: center;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    top: 0px;
    left: 3px;
    opacity: 0;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    vertical-align: middle;
    z-index: 999;
    font-weight: normal;
    font-style: normal;
}
 
.colorpicker-6:hover span{
    visibility: visible;
    opacity: 1 !important;
}
.colorpicker-6.overlay {
    display: none;
}
/* ******Site Color Chooser code Designed and Created by MDesign****** */

Then the Wikidot Syntax…

[!-- ******Site Color Chooser code Designed and Created by MDesign****** --]
[[div class="colorpicker-container"]]
[[div class="colorpicker-1"]]
[[[start | Me]]][[span]]Choose the Main Site Theme[[/span]]
[[/div]]
[[div class="colorpicker-2"]]
[[[start:light | Me]]][[span]]Choose the Light Theme[[/span]]
[[/div]]
[[div class="colorpicker-3"]]
[[[start:dark | Me]]][[span]]Choose the Dark Theme[[/span]]
[[/div]]
[[div class="colorpicker-4"]]
[[[start:skyblue | Me]]][[span]]Choose the Sky Blue Theme[[/span]]
[[/div]]
[[div class="colorpicker-5"]]
[[[start:lightgreen | Me]]][[span]]Choose the Light Green Theme[[/span]]
[[/div]]
[[div class="colorpicker-6"]]
[[[start:lightyellow | Me]]][[span]]Choose the Light Yellow Theme[[/span]]
[[/div]]
[[/div]]
[!-- ******Site Color Chooser code Designed and Created by MDesign****** --]

Here is the HTML code…

<div class="colorpicker-container">
<div class="colorpicker-1">
<p><a href="/start" target="_blank">Me</a><span>Choose the Main Site Theme</span></p>
</div>
<div class="colorpicker-2">
<p><a href="/start:light" target="_blank">Me</a><span>Choose the Light Theme</span></p>
</div>
<div class="colorpicker-3">
<p><a href="/start:dark" target="_blank">Me</a><span>Choose the Dark Theme</span></p>
</div>
<div class="colorpicker-4">
<p><a href="/start:skyblue" target="_blank">Me</a><span>Choose the Sky Blue Theme</span></p>
</div>
<div class="colorpicker-5">
<p><a href="/start:lightgreen" target="_blank">Me</a><span>Choose the Light Green Theme</span></p>
</div>
<div class="colorpicker-6">
<p><a href="/start:lightyellow" target="_blank">Me</a><span>Choose the Light Yellow Theme</span></p>
</div>
</div>

View Live Example

Add a New Comment
Copyright © 2011-2015 Icon Deposit - All rights Reserved