MyBB Community Forums

^ looks like all related js scripts are removed. suggestion is to remove only cookie.js

Well, yeah. I removed just cookie.js - it didn't work. Then I removed everything an started all over again. This time, I don't even see the colorpicker... 0_0

^ if you can wait for sometime (may be a couple of hours)
you can PM me temporary access to the forum admin panel & files (FTP) of that test forum to check it

(2015-06-22, 04:18 AM).m. Wrote: [ -> ]^ if you can wait for sometime (may be a couple of hours)
you can PM me temporary access to the forum admin panel & files (FTP) of that test forum to check it

PM'ed.
EDIT: Well, I figured out how to get back to the "only doing the footer color" part. What was wrong was that in headerinclude, it was the bburl stuff and then /picker, which is wrong, because there's no "picker" directory in the files. Because of that, the JS files didn't work properly, hence why the color picker didn't work at all. Now it partially works.
EDIT 2: For the colorpicker on my board, click on the upper right corner of it to use it.

EDIT 3: Weird. I tried it on my real forum and it works perfectly... http://spamheaven.com

(2015-06-22, 02:04 AM)Cookie123 Wrote: [ -> ]How do you even get this to work? Tried upload files (cp, css, js) to root directory, linked in headerinclude, added button, the css, etc. - nothing works...
Edit: NVM. Got it.
Edit 2: Wait... only one thingy is colored, even though .thead and everything else is in skin.js... my board URL: http://dankproductions.byethost14.com
Edit 3: If I F5, it shows .thead and the like as colored, then it disappears...

Hi!
I have added everything to the root folder and then I have made necessary changes to the mentioned files, but nothing happens. I just get a little icon but that's it. Nothing happens even after a click.
What should I do now?

Hi, thanks for this tutorial! I was looking for something like this for a while, if someone's still giving support for this, I would like to know if theres a way to add a line maybe to get a second color change?  Like say, you get the id of the things you wanna change and set it to #fff and then you can also change other parts to #000 is that possible to do or is it restricted to just 1 color?

Was trying to amend this slightly. I'm trying to add in a reset button which makes the color picker = NULL so the colours changed will return back to their original colours, as if the colour pickers were never used. Any snippets of code or assistance I could use?

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.

[attachment=37792]

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>

* 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

[attachment=37828]

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:

[attachment=37830]

[attachment=37831]

place them here for example:

themes/colorize/picker/cp

ok..., so now that we have the colorpicker for our members on the lower panel..., do we want to stop there? Or do we want more! I will explain this shortly....  

Example:



Ok, since you are already familiar with the process from adding the colorpicker as described above..., we will jump right into this.

PART 2:


Edit Template: headerinclude

Find: *

<!-- 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..., as this example is based on the theme.xml I provided earlier in the tutorial

Though I have found that:

<script type="text/javascript" src="{$mybb->asset_url}/themes/colorize/picker/js/cookie.js"></script>

is not necessarily needed...

Add after: *

<!-- Colorpick BG Preview-->
<script type="text/javascript">
$(document).ready(function(){    
    if($.cookie('background')){     
        $("body").css("backgroundImage", "url(" + "themes/colorize/picker/bg/" + $.cookie("background") + ".png)");
    };
    $(".bg_style").click(function () {  
         $(".bg_preview").slideToggle('fast');
         return false;
    });
    $(".bg_preview a").click(function() {
        var bg_id = $(this).attr("id");
          $("body").css("backgroundImage", "url(" + "themes/colorize/picker/bg/" + bg_id + ".png)");
        $.cookie('background', bg_id, { expires: 365, path: '/' });
    });    
});
</script> 

* adjust the links to your theme..., as this example is based on the theme.xml I provided earlier in the tutorial

Edit Template: header_welcomeblock_member

Find:

            <li><a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}</li>
        </ul>
    </div>

after add: *

                    <div class="wrapper">        
                    <div class="bg_preview">
                            <a id="bg1" href="#" style="background: url('themes/colorize/picker/bg/bg1.png');"></a>
                            <a id="bg2" href="#" style="background: url('themes/colorize/picker/bg/bg2.png');"></a>
                            <a id="bg3" href="#" style="background: url('themes/colorize/picker/bg/bg3.png');"></a>
                            <a id="bg4" href="#" style="background: url('themes/colorize/picker/bg/bg4.png');"></a>
                            <a id="bg5" href="#" style="background: url('themes/colorize/picker/bg/bg5.png');"></a>
                            <a id="bg6" href="#" style="background: url('themes/colorize/picker/bg/bg6.png');"></a>
                            <a id="bg7" href="#" style="background: url('themes/colorize/picker/bg/bg7.png');"></a>
                            <a id="bg8" href="#" style="background: url('themes/colorize/picker/bg/bg8.png');"></a>
                            <a id="bg9" href="#" style="background: url('themes/colorize/picker/bg/bg9.png');"></a>
                            <a id="bg10" href="#" style="background: url('themes/colorize/picker/bg/bg10.png');"></a>
                       </div>
            </div>     

* adjust the links to your theme..., as this example is based on the theme.xml I provided earlier in the tutorial

Now also find:

        <ul class="menu panel_links">
            <span class="custom_theme"><input type="text" id="colorpicker" ></span>

after add:

         <span class="bg_style"><input type="text" id="bg_preview" ></span>

Now, finish up by adding the css by going to cp.css


Editing cp.css

<!-- BG Preview -->

.bg_style {
    background: url('themes/colorize/picker/bg/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;
}

* adjust the links to your theme..., as this example is based on the theme.xml I provided earlier in the tutorial

Now, go into your themes global.css and find and comment out the background color for content:

#content {
/* background: #fff; */
}

The final step is to add the images....,
[attachment=37827]

Download, extract and place the "bg" folder in your "picker" folder.

ie:

themes/colorize/picker/bg

example of what you should now have:





* 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 and bg preview in their lower panel. *note: this is not the theme provided in the earlier post..., this is updated to add the bg-preview!
[attachment=37829]

I have added this (from first post), but now the mybb wysiwyg editor doesn't appear. How can i fix that?

---

Nvm. The solution was to remove this:

"<script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/jquery.min.js"></script>" from headerinclude

and

jQuery.noConflict(); from skin.js