TailGray ColorPicker Beta

Nome do Arquivo: TailGray ColorPicker Beta
Autor: DeeW.
Funcionalidade: PhpBB3/PunBB
Categoria: Recursos BestSkins

Ainda está no começo, mas já vou deixar aqui para apenas testarem!
Ele ainda não está salvando cookies para as cores, mas isso será adicionado numa versão futura, não beta.

punBB:

Código:


/*
Name: ColorPicker
Author: DeeW.
Release Date: 12/11/2014
Version: Beta
If remove my credits of code, your forum will be excluded by forumotion!
version: punBB
*/
$(document).ready(function(){
//Editable Variables
color1 = '#1A83C2';
color2 = '#172552';
color3 = '#095595';
//Editable Variables
sCSS = '<style>'+
'.color1,.color2,.color3{'+
'background: '+color1+';'+
'display: inline-block;'+
'height: 32px;'+
'width: 32px;'+
'border-radius: 50px;'+
'}'+
'.color2{background: '+color2+'}'+
'.color3{background:'+color3+'}'+
'.colorPicker:hover {'+
    'width: 2%;'+
    'border-radius: 15px 0 0 15px;'+
'}'+
'.colorPicker {'+
    'background: none repeat scroll 0% 0% #EEE;'+
    'padding: 10px;'+
    'text-align: center;'+
    'width: 0%;'+
    'margin: 0px auto;'+
    'box-shadow: 0px 2px 2px;'+
    'border-radius: 50px 0px 0px 50px;'+
    'position: fixed;'+
    'transition: all 230ms ease 0s;'+
    'right: 0px;'+
'}'+
'</style>';
$('#pun-intro').after(
'<div class="colorPicker">'+
   '<a class="color1"></a>'+
   '<a class="color2"></a>'+
   '<a class="color3"></a>'+
'</div>');
$('#pun-intro').after(sCSS);

$('.color1').click(function(){
$('#pun-intro,.main-head').css('background-color',color1);
});
$('.color2').click(function(){
$('#pun-intro,.main-head').css('background-color',color2);
});
$('.color3').click(function(){
$('#pun-intro,.main-head').css('background-color',color3);
});
});


phpBB3:

Código:


/*
Name: ColorPicker
Author: DeeW.
Release Date: 12/11/2014
Version: Beta
If remove my credits of code, your forum will be excluded by forumotion!
version: phpBB3
*/
$(document).ready(function(){
//Editable Variables
color1 = '#1A83C2';
color2 = '#172552';
color3 = '#095595';
//Editable Variables
sCSS = '<style>'+
'.color1,.color2,.color3{'+
'background: '+color1+';'+
'display: inline-block;'+
'height: 32px;'+
'width: 32px;'+
'border-radius: 50px;'+
'}'+
'.color2{background: '+color2+'}'+
'.color3{background:'+color3+'}'+
'.colorPicker:hover {'+
    'width: 2%;'+
    'border-radius: 15px 0 0 15px;'+
'}'+
'.colorPicker {'+
    'background: none repeat scroll 0% 0% #EEE;'+
    'padding: 10px;'+
    'text-align: center;'+
    'width: 0%;'+
    'margin: 0px auto;'+
    'box-shadow: 0px 2px 2px;'+
    'border-radius: 50px 0px 0px 50px;'+
    'position: fixed;'+
    'transition: all 230ms ease 0s;'+
    'right: 0px;'+
'}'+
'</style>';
$('.headerbar').after(
'<div class="colorPicker">'+
   '<a class="color1"></a>'+
   '<a class="color2"></a>'+
   '<a class="color3"></a>'+
'</div>');
$('.headerbar').after(sCSS);

$('.color1').click(function(){
$('.headerbar,.forabg,#fa_toolbar').css('background-color',color1);
});
$('.color2').click(function(){
$('.headerbar, .forabg,#fa_toolbar').css('background-color',color2);
});
$('.color3').click(function(){
$('.headerbar, .forabg,#fa_toolbar').css('background-color',color3);
});
});


Função para adicionar uma cor:

Código:


function AddColor(){
  color4 = 'red'; //Troque "red" pela cor desejada
  $('.colorPicker').append('<a class="color4"></a>');
  $('.color4').click(function(){
    $('#pun-intro,.main-head').css('background-color',color4);
    $('.colorPicker').after('<style>'+
      '.color4{'+
      'background: '+color4+';'+
      'display: inline-block;'+
      'height: 32px;'+
      'width: 32px;'+
      'border-radius: 50px;'+
      '}'+
    '</style>');
});
};


Acho que está bem explicado, só novatos não irão entender o código...
Lembrando, está na versão beta....

Acho que não serve para um tutorial, apesar de ser uma boa ideia para código e está com um visual bem agradável.
Quando você fizer a versão completa do código, salvando as cores nos elementos, o tutorial será aprovado!



Até!