Color Picker

**Alternax** · 30-04-2012 05:15 PM

nuova idea per tutorial per MyBB sara colorpicker. allora cominciamo.

1. Scarichiamo il pachetto in allegato (non voglio che file non sara piu sul host, quindi uppo qua).

2. Mettiamo tutti i file in forum root.

3. Aggiungiamo seguenti codici in headerinclude

PHP Code:

<script type="text/javascript" src="jscripts/jquery.js"></script>
<script type="text/javascript" src="jscripts/colorpicker.js"></script>
<script type="text/javascript" src="jscripts/eye.js"></script>
<script type="text/javascript" src="jscripts/utils.js"></script>
<script type="text/javascript" src="jscripts/layout.js?ver=1.0.2"></script>
<script type="text/javascript" src="jscripts/jQuery.Cooke.js"></script>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/colorpicker.css"> 

4. Aggoiungiamo ora in header dive vi pare:

PHP Code:

<div id="colorSelector"><div style="background-color: #0000ff"></div></div> 

5. Aggiungiamo ora il codice piu importante in fondo del footer (footer perche in altre parti salvera male il cookie del colorpicker):

' Wrote:<script type="text/javascript">

if($.cookie('mybb_color')) {
$('#colorSelector div').css('background', $.cookie('mybb_color'));
$('.thead').css('background', $.cookie('mybb_color'));
}

$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {

$('#colorSelector div').css('background', '#' + hex);
$('.thead').css('background', '#' + hex);
$.cookie('mybb_color', '#' + hex, { expires: 365 });

}

});
</script>

Come vedete in grasetto io ho inserito solo su "quadratino" e .thead, per cambiare basta fare edit su codice rosso che e scritto sopra.

demo: http://design.refx-crack.org/

**Lowseling** · 30-04-2012 05:48 PM

Guida molto bella, grazie mille! Smile

Consiglio di aggiungere prima di tutto il codice JQuery (praticamente dopo la dichiarazione <script type="text/javascript">) il seguente codice:

Code:

$.noConflict();

Ciò serve ad evitare che tutto vada in contrasto, ho notato infatti che i collapse non funzionano con quello script!

Enjoy! Smile

**Alternax** · 30-04-2012 06:01 PM

vero, io non ho notato, a sto punto elimino prototype e riscrivo il collapse in jquery

--edit--

fatto XD

**Trinit** · 01-05-2012 08:26 AM

Bella idea Smile

**Lowseling** · 03-05-2012 10:37 PM

Comunque questo tutorial lo vedo molto utile, metto in lista guide! Smile