MyBB Community Forums

Full Version: Colorpicker -Browser Compatibility issues- [Help Please?]
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Forum: http://deepblood.com

So, i have a color picker on my new theme im making and in Google chrome everything is working and perfect its just everything i want it to be. However in other browsers the color picker displays in the footer of the theme and works only when you type HEX color and hit enter. What could be the issues and how can i fix it?

I have posted images below.

Working Color Picker (Google Chrome):

[Image: ncm5kTD.png]


Where it is suppose to be in firefox:

[Image: Iwc0tpF.png]

Where it is located in firefox: 

[Image: DszFmCA.png]

This happens in all other browsers other than Google Chrome can somebody please help me with this????

Here is my CSS:

.custom_theme {
	background-image: url(http://static1800.icyboards.com/paranormalforums/images/carnagecraft/picker/cp/color-swatches.png');
	float: right;
	height: 38px;

}

.custom_theme #colorpicker{
    height: 38px;
    width: 38px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}

.colorpicker {
    width: 356px;
    height: 176px;
    position: fixed;
    background: url(http://static1800.icyboards.com/paranormalforums/images/carnagecraft/picker/cp/colorpicker_background.png);
    font-family: Arial, Helvetica, sans-serif;
    z-index: 9000;

}

.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(http://static1800.icyboards.com/paranormalforums/images/carnagecraft/picker/cp/colorpicker_overlay.png);
}

.colorpicker_color div div {
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    overflow: hidden;
    background: url(http://static1800.icyboards.com/paranormalforums/images/carnagecraft/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({
$mybb->settings['bburl']
}

http://static1800.icyboards.com/paranormalforums/images/carnagecraft/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({
$mybb->settings['bburl']
}

http://static1800.icyboards.com/paranormalforums/images/carnagecraft/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({
$mybb->settings['bburl']
}

/picker/cp/colorpicker_rgb_r.png);
    top: 52px;
    left: 212px;
}

.colorpicker_rgb_g {
    background-image: url({
$mybb->settings['bburl']
}

http://static1800.icyboards.com/paranormalforums/images/carnagecraft/picker/cp/colorpicker_rgb_g.png);
    top: 82px;
    left: 212px;
}

.colorpicker_rgb_b {
    background-image: url({
$mybb->settings['bburl']
}

http://static1800.icyboards.com/paranormalforums/images/carnagecraft/picker/cp/colorpicker_rgb_b.png);
    top: 112px;
    left: 212px;
}

.colorpicker_hsb_h {
    background-image: url({
$mybb->settings['bburl']
}

http://static1800.icyboards.com/paranormalforums/images/carnagecraft/picker/cp/colorpicker_hsb_h.png);
    top: 52px;
    left: 282px;
}

.colorpicker_hsb_s {
    background-image: url({
$mybb->settings['bburl']
}

http://static1800.icyboards.com/paranormalforums/images/carnagecraft/picker/cp/colorpicker_hsb_s.png);
    top: 82px;
    left: 282px;
}

.colorpicker_hsb_b {
    background-image: url({
$mybb->settings['bburl']
}

http://static1800.icyboards.com/paranormalforums/images/carnagecraft/picker/cp/colorpicker_hsb_b.png);
    top: 112px;
    left: 282px;
}

.colorpicker_submit {
    position: absolute;
    width: 56px;
    height: 22px;
    background: url({
$mybb->settings['bburl']
}

http://static1800.icyboards.com/paranormalforums/images/carnagecraft/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;
}
I'd suggest to change your colorpicker
which theme you are using & in which templates you have added the code ? which guidance you have followed for it ?
Nevermind i removed it now and it was a custom theme edited from the default and the code was added using this tutorial: <- snip ->
^ Thanks for giving the link. This thread is closed as you no longer need fix for the color picker