[For 1.8] jQuery color picker

[User 6029]

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....,

  bg.zip (Size: 570.55 KB / Downloads: 123)

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!

  Colorize_Dev.zip (Size: 900.01 KB / Downloads: 124)