[For 1.8] jQuery color picker
#38
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.


.zip   Colorize_Dev.zip (Size: 312.88 KB / Downloads: 122)

Example:
[Image: 2mwe43o.jpg]

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>
* adjust the links to your theme

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


.zip   picker.zip (Size: 127 KB / Downloads: 119)

ie:
themes/colorize/picker

** Ok, now if you do not want the dark colorpicker background and want a lighter background for instance...
Example:
[Image: b4agpf.png]

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
Reply


Messages In This Thread
jQuery color picker - by iAndrew - 2014-09-07, 08:12 PM
RE: jQuery color picker - by Destroy666 - 2014-09-07, 08:51 PM
RE: jQuery color picker - by effone - 2014-09-08, 09:30 AM
RE: jQuery color picker - by iAndrew - 2014-09-08, 05:02 PM
RE: jQuery color picker - by JonathanP - 2014-09-08, 10:56 PM
RE: jQuery color picker - by iAndrew - 2014-09-09, 03:55 PM
RE: jQuery color picker - by JonathanP - 2014-09-09, 10:48 PM
RE: jQuery color picker - by iAndrew - 2014-09-10, 02:15 AM
RE: jQuery color picker - by JonathanP - 2014-09-10, 12:24 PM
RE: jQuery color picker - by Destroy666 - 2014-09-12, 05:59 PM
RE: jQuery color picker - by eNvy - 2014-09-10, 03:34 PM
RE: jQuery color picker - by Nolan - 2014-09-15, 01:47 PM
RE: jQuery color picker - by Billie Joe Armstrong - 2014-09-19, 04:13 PM
RE: jQuery color picker - by jason5 - 2014-10-04, 07:07 AM
RE: jQuery color picker - by Anonymous™ - 2014-10-05, 12:43 PM
RE: jQuery color picker - by GamesPuff - 2014-12-28, 06:37 AM
RE: jQuery color picker - by ElectricShock - 2014-12-28, 01:45 PM
RE: jQuery color picker - by GamesPuff - 2014-12-28, 04:56 PM
RE: jQuery color picker - by GamesPuff - 2014-12-30, 07:00 AM
RE: jQuery color picker - by Destroy666 - 2015-01-04, 12:16 AM
RE: jQuery color picker - by nollidnosnhoj - 2015-04-07, 04:25 AM
RE: jQuery color picker - by Dragonexsperm - 2015-04-09, 04:06 AM
RE: jQuery color picker - by Lektz - 2015-05-31, 10:04 PM
RE: jQuery color picker - by Cookie123 - 2015-06-09, 01:36 AM
RE: jQuery color picker - by Billie Joe Armstrong - 2015-06-21, 02:21 PM
RE: jQuery color picker - by Cookie123 - 2015-06-22, 02:04 AM
RE: jQuery color picker - by .m. - 2015-06-22, 03:14 AM
RE: jQuery color picker - by Cookie123 - 2015-06-22, 03:21 AM
RE: jQuery color picker - by .m. - 2015-06-22, 03:30 AM
RE: jQuery color picker - by Cookie123 - 2015-06-22, 03:33 AM
RE: jQuery color picker - by .m. - 2015-06-22, 03:56 AM
RE: jQuery color picker - by Cookie123 - 2015-06-22, 04:07 AM
RE: jQuery color picker - by .m. - 2015-06-22, 04:18 AM
RE: jQuery color picker - by Cookie123 - 2015-06-22, 04:21 AM
RE: jQuery color picker - by Claraviolet - 2015-09-23, 05:44 AM
RE: jQuery color picker - by Restia - 2015-09-28, 03:33 PM
RE: jQuery color picker - by Wires - 2015-10-16, 08:50 PM
RE: jQuery color picker - by User 6029 - 2016-11-15, 11:54 AM
RE: jQuery color picker - by User 6029 - 2016-11-19, 02:20 AM
RE: jQuery color picker - by thelovelyone - 2016-11-20, 12:23 AM
RE: jQuery color picker - by User 6029 - 2016-11-20, 01:12 AM
RE: jQuery color picker - by thelovelyone - 2016-11-20, 01:52 AM
RE: jQuery color picker - by User 6029 - 2016-11-20, 02:12 AM
RE: jQuery color picker - by thelovelyone - 2016-11-20, 12:19 PM
RE: jQuery color picker - by User 6029 - 2016-11-20, 10:21 PM
RE: jQuery color picker - by thelovelyone - 2016-11-20, 10:53 PM
RE: jQuery color picker - by User 6029 - 2016-11-20, 11:19 PM
RE: jQuery color picker - by thelovelyone - 2016-11-20, 11:24 PM
RE: jQuery color picker - by User 6029 - 2016-11-21, 03:31 PM
RE: jQuery color picker - by thelovelyone - 2016-11-21, 08:26 PM
RE: jQuery color picker - by User 6029 - 2016-11-21, 08:36 PM
RE: jQuery color picker - by Sgt Cheesepuffs - 2016-12-07, 11:16 PM
RE: jQuery color picker - by User 6029 - 2016-12-08, 04:56 AM
RE: jQuery color picker - by Sgt Cheesepuffs - 2016-12-12, 02:32 PM
RE: jQuery color picker - by thelovelyone - 2016-12-13, 06:05 PM
RE: jQuery color picker - by [AoW]Sauron - 2018-07-17, 11:25 PM
RE: jQuery color picker - by sappy - 2020-02-09, 08:32 AM
RE: jQuery color picker - by User 6029 - 2020-02-09, 04:55 PM
RE: jQuery color picker - by sappy - 2020-02-16, 09:43 AM
RE: jQuery color picker - by User 6029 - 2020-02-16, 07:34 PM
RE: jQuery color picker - by sappy - 2020-02-17, 04:09 PM
RE: jQuery color picker - by User 6029 - 2020-02-17, 09:04 PM
RE: jQuery color picker - by sappy - 2020-02-18, 01:16 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)