[mybb] Colour Picker - [1.8.x]

Azzid · 03-12-2016, 03:04 PM

You're welcome.

Credits: iAndrew

Seen a few people request this on here but never seen a tutorial for it, so here it is - original tutorial by mybboard.pl

Heres what you'll end up with - http://i.imgur.com/46w8KDp.png

[hide]
Copy and paste this into your header include template (we'll come back to skin.js later on)

Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/jquery.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/colorpicker.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/skin.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/picker/js/cookie.js"></script>

Next make a new cp.css file in your themes section and copy paste this - Remember to make sure the image links are correct

Code:
.custom_theme{

	background-image: url('images/gamerx/cp/color-swatches.png');
	float: right;
}
.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(images/gamerx/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(images/gamerx/cp/colorpicker_overlay.png);
}
.colorpicker_color div div {
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	height: 11px;
	overflow: hidden;
	background: url(images/gamerx/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(images/gamerx/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(images/gamerx/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(images/gamerx/cp/colorpicker_rgb_r.png);
	top: 52px;
	left: 212px;
}
.colorpicker_rgb_g {
	background-image: url(images/gamerx/cp/colorpicker_rgb_g.png);
	top: 82px;
	left: 212px;
}
.colorpicker_rgb_b {
	background-image: url(images/gamerx/cp/colorpicker_rgb_b.png);
	top: 112px;
	left: 212px;
}
.colorpicker_hsb_h {
	background-image: url(images/gamerx/cp/colorpicker_hsb_h.png);
	top: 52px;
	left: 282px;
}
.colorpicker_hsb_s {
	background-image: url(images/gamerx/cp/colorpicker_hsb_s.png);
	top: 82px;
	left: 282px;
}
.colorpicker_hsb_b {
	background-image: url(images/gamerx/cp/colorpicker_hsb_b.png);
	top: 112px;
	left: 282px;
}
.colorpicker_submit {
	position: absolute;
	width: 56px;
	height: 22px;
	background: url(images/gamerx/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;
}

Open your header template and put this where you want the color picker to show

Code:
<span class='custom_theme'><input type='text' id='colorpicker' /></span>

Now we can open skin.js and choose what we want to be effected by the color picker
Look for this line and add here all the classes and id's you want to be colored - make sure every class or id ends with a ,

Code:
var customElements = " #panel, .tfoot, .upper, .thead";

Download link: http://community.mybb.com/attachment.php?aid=32388
[/hide]

Aiba · 03-12-2016, 03:11 PM

Thanks this is exactly what i needed

Azzid · 03-12-2016, 03:24 PM

(03-12-2016, 10:26 AM)Nath Wrote:
(03-12-2016, 10:25 AM)Paradox Wrote: Some ones already tried ripping it then

>tried

Succeeded m8.

(03-12-2016, 03:11 PM)Aiba Wrote: Thanks this is exactly what i needed

If you need anything else message me and I might have it

Zodiac · 03-12-2016, 03:28 PM

(03-12-2016, 03:24 PM)Paradox Wrote:
(03-12-2016, 10:26 AM)Nath Wrote: >tried

Succeeded m8.

(03-12-2016, 03:11 PM)Aiba Wrote: Thanks this is exactly what i needed

If you need anything else message me and I might have it

No clue why you quoted me in this lol.

Azzid · 03-12-2016, 03:38 PM

(03-12-2016, 03:28 PM)Nath Wrote:
(03-12-2016, 03:24 PM)Paradox Wrote: If you need anything else message me and I might have it

No clue why you quoted me in this lol.

Didn't mean to my friend

[mybb] Colour Picker - [1.8.x]
Author Message