MyBB Community Forums
[For 1.8] jQuery color picker - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [For 1.8] jQuery color picker (/thread-158934.html)

Pages: 1 2 3 4 5 6 7


jQuery color picker - iAndrew - 2014-09-07

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


Copy and paste this into your header include template (we'll come back to skin.js later on)
<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
.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
<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 ,
var customElements = " #panel, .tfoot, .upper, .thead";


Download - make sure all files are in correct places
.zip   Mybb jQuery color palette.zip (Size: 124.72 KB / Downloads: 983)


RE: jQuery color picker - Destroy666 - 2014-09-07

Note: jquery.min.js and cookie.js shouldn't be added to headerinclude since they're already there in 1.8.


RE: jQuery color picker - effone - 2014-09-08

ForumVolt!!! Ha ha, those thieves can never be originators.
Find from where that thankless has stolen this and publishing in his name ...


RE: jQuery color picker - iAndrew - 2014-09-08

(2014-09-08, 09:30 AM)effone Wrote: ForumVolt!!! Ha ha, those thieves can never be originators.
Find from where that thankless has stolen this and publishing in his name ...


I'm guessing FV don't have a good reputation and have took it off your site?


RE: jQuery color picker - JonathanP - 2014-09-08

Not sure why this isn't working for me, i did everything you said.


RE: jQuery color picker - iAndrew - 2014-09-09

Whats your forum url?


RE: jQuery color picker - JonathanP - 2014-09-09

http://www.boxingbb.com


RE: jQuery color picker - iAndrew - 2014-09-10

One of your plugins must be conflicting with it, have a try with them all disabled first?


RE: jQuery color picker - JonathanP - 2014-09-10

Ok i fixed it, i wasn't adding the cookie.js or jquery.min.js to the headerinclude, i was reading what destroy was saying.


RE: jQuery color picker - eNvy - 2014-09-10

(2014-09-07, 08:12 PM)iAndrew Wrote: original tutorial by thanthu @ forumvolt

I found this here, don't know if they're the original creators of the tutorial but I really think that guy isn't.