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:
![[Image: 2nuopye.png]](https://camo.mybb.com/f4cb9290102d8b34eaf812edf981c157d19fae39/687474703a2f2f6936372e74696e797069632e636f6d2f326e756f7079652e706e67)
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: *
* 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:
Add after: *
Edit Template: header_welcomeblock_member
Find:
after add: *
* adjust the links to your theme..., as this example is based on the theme.xml I provided earlier in the tutorial
Now also find:
after add:
Now, finish up by adding the css by going to cp.css
Editing cp.css
Now, go into your themes global.css and find and comment out the background color for content:
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:
example of what you should now have:
![[Image: 2rxg0vr.png]](https://camo.mybb.com/3b5463634fd724ab0c9c4dae9caa809beee0b295/687474703a2f2f6936342e74696e797069632e636f6d2f327278673076722e706e67)
* 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)

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

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!
