For those of you having any such trouble with this..., here it is working and included in a slightly modified version of the default theme just in case anyone was in need of such...., logged in users will notice the option for colorpicker in their lower panel.
* Just a simple edit so people having trouble may have it in a base theme. All functions of the default theme are still intact including alternate colors css files.
Colorize_Dev.zip (Size: 312.88 KB / Downloads: 140)
Example:
![[Image: 2mwe43o.jpg]](https://camo.mybb.com/9ca6a467eb096b15a21ab37a80ac6a3283b12f74/687474703a2f2f6936372e74696e797069632e636f6d2f326d776534336f2e6a7067)
If you would like to do this yourself ..., try the following:
Part 1:
Edit Template: headerinclude
add:
Edit Template: header_welcomeblock_member
Find:
after add:
Now, add a new stylesheet to you theme and title it "cp.css"
Add to cp.css
Download, extract and add the files to your theme
picker.zip (Size: 127 KB / Downloads: 139)
ie:
** Ok, now if you do not want the dark colorpicker background and want a lighter background for instance...
Example:
![[Image: b4agpf.png]](https://camo.mybb.com/e502aad416e8d11e04dd7457a601632779394057/687474703a2f2f6936352e74696e797069632e636f6d2f6234616770662e706e67)
We can change this rather simply....
change you cp.css to this:
and upload the following images to your cp folder:
place them here for example:
* Just a simple edit so people having trouble may have it in a base theme. All functions of the default theme are still intact including alternate colors css files.
Colorize_Dev.zip (Size: 312.88 KB / Downloads: 140)
Example:
If you would like to do this yourself ..., try the following:
Part 1:
Edit Template: headerinclude
add:
<!-- Colorpick -->
<script type="text/javascript" src="{$mybb->asset_url}/themes/colorize/picker/js/colorpicker.js"></script>
<script type="text/javascript" src="{$mybb->asset_url}/themes/colorize/picker/js/skin.js"></script>
<script type="text/javascript" src="{$mybb->asset_url}/themes/colorize/picker/js/cookie.js"></script>
Edit Template: header_welcomeblock_member
Find:
<ul class="menu panel_links">
after add:
<span class="custom_theme"><input type="text" id="colorpicker" ></span>
Now, add a new stylesheet to you theme and title it "cp.css"
Add to cp.css
/*
* MyBB: Colorize Theme
*
* File: cp.css
*
* Authors: iAndrew & vintagedaddyo
*
* MyBB Version: 1.8
*
* Theme Version: 1.0
*
*/
.custom_theme{
background: url('themes/colorize/picker/cp/color-swatches.png') top left no-repeat;
float: left;
}
.custom_theme #colorpicker{
height: 12px;
width: 12px;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0;
}
.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(themes/colorize/picker/cp/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
z-index: 9000;
margin-left: 36px;
}
.colour_instructions{
width: 134px;
height: 92px;
position: absolute;
left: 211px;
top: 47px;
text-align: left;
font-size: 10px;
color: #898989;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(themes/colorize/picker/cp/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(themes/colorize/picker/cp/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(themes/colorize/picker/cp/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 130px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
display: none;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(themes/colorize/picker/cp/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
display: none; /* Hide colour boxes */
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(themes/colorize/picker/cp/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(themes/colorize/picker/cp/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(themes/colorize/picker/cp/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(themes/colorize/picker/cp/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(themes/colorize/picker/cp/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(themes/colorize/picker/cp/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 56px;
height: 22px;
background: url(themes/colorize/picker/cp/colorpicker_submit.png) top;
left: 288px;
top: 142px;
cursor: pointer;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}
Download, extract and add the files to your theme
picker.zip (Size: 127 KB / Downloads: 139)
ie:
themes/colorize/picker** Ok, now if you do not want the dark colorpicker background and want a lighter background for instance...
Example:
We can change this rather simply....
change you cp.css to this:
/*
* MyBB: Colorize Theme
*
* File: cp.css
*
* Authors: iAndrew & vintagedaddyo
*
* MyBB Version: 1.8
*
* Theme Version: 1.0
*
*/
.bg_style{
background: url('themes/colorize/picker/cp/palette.png') top left no-repeat;
float: left;
}
.bg_style #bg_preview{
height: 12px;
width: 12px;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0;
}
.bg_preview{
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: #EFEFEF;
border: 1px solid #ccc;
font-family: Arial, Helvetica, sans-serif;
display: none;
z-index: 9000;
margin-left: 36px;
}
.custom_theme{
background: url('themes/colorize/picker/cp/color-swatches.png') top left no-repeat;
float: left;
}
.custom_theme #colorpicker{
height: 12px;
width: 12px;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0;
}
.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(themes/colorize/picker/cp/custom_background2.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
z-index: 9000;
margin-left: 36px;
}
.colour_instructions{
width: 134px;
height: 92px;
position: absolute;
left: 211px;
top: 47px;
text-align: left;
font-size: 10px;
color: #898989;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(themes/colorize/picker/cp/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(themes/colorize/picker/cp/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(themes/colorize/picker/cp/custom_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 130px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
display: none;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(themes/colorize/picker/cp/custom_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
display: none; /* Hide colour boxes */
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(themes/colorize/picker/cp/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(themes/colorize/picker/cp/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(themes/colorize/picker/cp/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(themes/colorize/picker/cp/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(themes/colorize/picker/cp/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(themes/colorize/picker/cp/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 56px;
height: 22px;
background: url(themes/colorize/picker/cp/custom_submit2.png) top;
left: 288px;
top: 142px;
cursor: pointer;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}
and upload the following images to your cp folder:
place them here for example:
themes/colorize/picker/cp