Você não está conectado. Conecte-se ou registre-se

TailGray ColorPicker Beta

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 TailGray ColorPicker Beta em Qui Dez 11, 2014 9:10 pm

DeeW.

avatar
Membro elite

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....

Ver perfil do usuário

2 Re: TailGray ColorPicker Beta em Qua Jan 14, 2015 1:33 pm

Daemon

avatar
Admin

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é!

Ver perfil do usuário http://zz1856.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum