TailGray ColorPicker Beta Qui 11 Dez 2014 - 21:10
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Nome do Arquivo: TailGray ColorPicker BetaAutor: 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....