Cores do site adaptáveis

3 participantes

Página 2 de 2 Anterior  1, 2

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Cores do site adaptáveis

Mensagem por ZombieW 10.12.19 16:48

Relembrando a primeira mensagem :

Detalhes da questão


Endereço do fórum: https://tutorialdoca.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Boa tarde,

É possível a criação de uma caixa flutuante no site, onde o usuário (registrado) possa escolher as cores que deseja ver no site?

Por exemplo, a caixa tem 3 opções:

- Original (Verde)
- Rosa
- Vermelho

Caso o usuário escolha uma dessas, rode um JS para alterar o CSS e as Cores do site da cor anterior para a nova?

Algo similar à esse site.
ZombieW

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo


Tópico resolvido Re: Cores do site adaptáveis

Mensagem por ZombieW 27.04.20 16:01

Pedxz escreveu:Então, acho que houve uma confusão da minha parte; O Senhor quer que a imagem fique do cursor normal ou ao passar em uma hiperligação, ou ambos?

Tema padrão
Cursor padrão: Cores do site adaptáveis - Página 2 Cursor10
Cursor ao passar em cima de um link: Cores do site adaptáveis - Página 2 Padrze10

Ao escolher alguma cor
Cursor padrão: Cores do site adaptáveis - Página 2 Cursor10
Cursor ao passar em cima de um link: As imagens passadas anteriormente
ZombieW

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Cores do site adaptáveis

Mensagem por tikky 27.04.20 16:33

Altere para:
Código:
(function() {
    // 0 = phpbb2
    // 1 = phpbb3
    // 2 = punbb
    // 3 = invision
    var version = 1; // forum version
 
    window.fa_theme_color = {
        version: version,
 
        delay: 500, // delay between rainbow colors ( 500 = 0.5s )
        transition: 1000, // transition between colors ( 1000 = 1s )
        transition_all: false, // set to true if you want all themes to utilize the transitions
 
        // elements the selector is attached to
        attachTo: [
            '.bodyline > table:first-child', // phpbb2
            '#page-header', // phpbb3
            '#pun-head', // punbb
            '#submenu' // invision
        ][version],
 
        selected: my_getcookie('fa_theme_color') || 'Tema Padrão', // selected theme
 
        // color palettes
        palette: {
            'Tema Padrão': '',
            'Aleatório': [],
            'Arco-Íris': '',
            'Prata': ['#DDD', '#CCC', '#BBB', '#999', '#555', 'https://i.servimg.com/u/f58/15/04/49/64/prata10.png'], // hue 000
            'Vermelho Persa': ['#D44', '#C33', '#B22', '#900', '#522', 'https://i.servimg.com/u/f58/15/04/49/64/persa10.png'], // hue 000
            'Carmesim': ['#F34', '#E23', '#D12', '#B00', '#622', 'https://i.servimg.com/u/f58/15/04/49/64/carmes10.png'], // hue 355
            'Abóbora': ['#F82', '#F71', '#E60', '#C40', '#631', 'https://i.servimg.com/u/f58/15/04/49/64/abobor10.png'], // hue 025
            'Mostarda': ['#DA4', '#C93', '#B82', '#960', '#542', 'https://i.servimg.com/u/f58/15/04/49/64/mostar10.png'], // hue 039
            'Ouro': ['#FB2', '#EA1', '#D90', '#B70', '#641', 'https://i.servimg.com/u/f58/15/04/49/64/ouro10.png'], // hue 041
            'Verde Primavera': ['#9E1', '#8D0', '#7C0', '#5A0', '#450', 'https://i.servimg.com/u/f58/15/04/49/64/primav10.png'], // hue 083
            'Verde Bandeira': ['#4D4', '#3C3', '#2B2', '#090', '#252', 'https://i.servimg.com/u/f58/15/04/49/64/bandei10.png'], // hue 120
            'Ciano': ['#4DA', '#3C9', '#2B8', '#096', '#254', 'https://i.servimg.com/u/f58/15/04/49/64/ciano10.png'], // hue 160
            'Turquesa': ['#4DD', '#3CC', '#2BB', '#099', '#255', 'https://i.servimg.com/u/f58/15/04/49/64/turque10.png'], // hue 180
            'Azul Céu': ['#4AD', '#39C', '#28B', '#069', '#245', 'https://i.servimg.com/u/f58/15/04/49/64/ceu10.png'], // hue 200
            'Azul Radiante': ['#18F', '#07F', '#06E', '#04C', '#036', 'https://i.servimg.com/u/f58/15/04/49/64/radian10.png'], // hue 212
            'Ametista': ['#A7D', '#96C', '#85B', '#639', '#435', 'https://i.servimg.com/u/f58/15/04/49/64/ametis10.png'], // hue 270
            'Roxo': ['#A4D', '#93C', '#82B', '#609', '#425', 'https://i.servimg.com/u/f58/15/04/49/64/roxo10.png'], // hue 279
            'Cereja': ['#D4D', '#C3C', '#B2B', '#909', '#525', 'https://i.servimg.com/u/f58/15/04/49/64/cereja10.png'], // hue 300
            'Violeta': ['#D4A', '#C39', '#B28', '#906', '#524', 'https://i.servimg.com/u/f58/15/04/49/64/violet10.png'], // hue 321
            'Skyways': ['#F59', '#E48', '#D37', '#B15', '#624', 'https://i.servimg.com/u/f58/15/04/49/64/skyway10.png'], // hue 337
            'Rosa Choque': ['#F46', '#E35', '#D24', '#B02', '#623', 'https://i.servimg.com/u/f58/15/04/49/64/choque10.png'] // hue 350
        },
 
        // change the current theme
        change: function(color, select) {
            var head = $('head'),
                style = document.getElementById('fa_theme_style');
 
            my_setcookie('fa_theme_color', color, true); // update selected theme
 
            // remove old styles
            if (style) {
                head[0].removeChild(style);
            }
 
            fa_theme_color.selector.firstChild.innerHTML = 'Tema Padrão'; // change Tema Padrão texts
 
            // Random / Normal Themes
            if (!/Tema Padrão|Arco-Íris/.test(color) && fa_theme_color.palette[color]) {
                fa_theme_color.selected = color == 'Aleatório' ? fa_theme_color.palette['Aleatório'][Math.floor(Math.random() * fa_theme_color.palette['Aleatório'].length)] : color;
                fa_theme_color.selector.style.backgroundColor = fa_theme_color.palette[fa_theme_color.selected][1];
                fa_theme_color.selector.style.borderColor = fa_theme_color.palette[fa_theme_color.selected][2];
 
                head.append('<style type="text/css" id="fa_theme_style">' + fa_theme_color.css() + '</style>');
 
            } else if (color == 'Arco-Íris') { // Rainbow theme
                if (fa_theme_color.stop) {
                    fa_theme_color.selected = color;
                    fa_theme_color.selector.style.backgroundColor = fa_theme_color.palette[select][1];
                    fa_theme_color.selector.style.borderColor = fa_theme_color.palette[select][2];
 
                    head.append('<style type="text/css" id="fa_theme_style">' + fa_theme_color.css(select) + '</style>');
                } else {
                    fa_theme_color.rainbow();
                }
            } else { // No theme
                fa_theme_color.selector.style.backgroundColor = '#999';
                fa_theme_color.selector.style.borderColor = '#888';
                fa_theme_color.selector.firstChild.innerHTML = 'Tema Padrão';
            }
 
            // delete rainbow assets if it's not selected
            if (color != 'Arco-Íris' && fa_theme_color.stop) {
                if (!fa_theme_color.transition_all) {
                    head[0].removeChild(document.getElementById('fa_rainbow_smoothness'));
                }
 
                window.clearInterval(fa_theme_color.interval);
                delete fa_theme_color.index;
                delete fa_theme_color.stop;
            }
        },
 
        // get and return the theme CSS per version
        css: function(select) {
            var palette = fa_theme_color.palette[select || fa_theme_color.selected];
 
            switch (fa_theme_color.version) {
 
                /*case 0 : // phpbb2
                  return 'a, a:link, a:visited, a.forumlink, a.forumlink:link, a.forumlink:visited, a.topictitle, a.topictitle:link, a.topictitle:visited { color:' + palette[3] + '; }'+
                        'a:hover, a.forumlink:hover, a.topictitle:hover { color:' + palette[1] + '; }'+
                        'th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides { background:' + palette[1] + '!important; }'+
                        '.forumline { border-color:' + palette[1] + '; }'+
                        'th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides, .cattitle, h1.pagetitle, .module-title, .catHead .genmed, .secondarytitle h2, .catBottom a, .catLeft .genmed { color:#FFF !important; }'+
                        all;*/
 
                case 1 : // phpbb3
              
          return 'a[href], a:link, a.forumtitle, a.topictitle, a:visited, .postprofile a:active, .postprofile a:link, .postprofile a:visited, .postprofile dt.author a, #page-footer { color:' + palette[3] + '; }'+
                'a[href]:hover, .tab-link:not(.current), a.forumtitle:hover, a.topictitle:hover, span[style$="rgb(193, 250, 23);"], .postprofile a:hover, .postprofile dt.author a:hover, a, span[style$="#c1fa17"], span[style$="orange"], span[style*="#c1fa17"] { color:' + palette[1] + '!important; }' +
                '.tab-link.current { background-color: ' + palette[1] + '!important; }' +
                '.headerbar { background-image: linear-gradient(to left, ' + palette[1] + ', ' + palette[4] + ' 98%)!important; }' +
                'a:hover { cursor: url(' + palette[5] + '), url(' + palette[5] +'), auto; }' +
                'body { cursor: url(\'https://i.servimg.com/u/f57/17/53/75/18/cursor10.png\'), url(\'https://i.servimg.com/u/f57/17/53/75/18/cursor10.png\'), auto; }' +
                '[style*="border-top: 2px solid green"], .tab-content.current, [style*="border-collapse:"] { border-color:' + palette[1] + '!important; }';
 
      /*case 3 : // invision
          return 'a, a:link, a:visited { color:' + palette[3] + '; }'+
                'a:hover { color:' + palette[1] + '; }'+
                'div#logostrip, div.maintitle, ul.privmsg li { background:' + palette[1] + '!important; }'+
                '.box-content { border-bottom-color:' + palette[4] + '!important; }'+
                '#submenu, table.ipbtable tfoot td, #gfooter { background:' + palette[4] + '!important; }'+
                '#submenu ul li a:hover { background:' + palette[3] + '!important; }'+
                'div.maintitle, #submenu, #submenu a.mainmenu, table.ipbtable tfoot td, #gfooter, #gfooter a { color:#FFF!important; }'+
                all;*/
 
                default: // unknown
                    return '' +
                        all;
 
            }
        },
 
        // get and return the transition CSS per version
        // helps make the transition in colors smooth
        applyTransitionRules: function() {
            switch (fa_theme_color.version) {
 
                /*case 0 : // phpbb2
                  return 'a, a:link, a:visited, a.forumlink, a.forumlink:link, a.forumlink:visited, a.topictitle, a.topictitle:link, a.topictitle:visited, th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides, .forumline { transition:' + fa_theme_color.transition + 'ms; }';*/
 
                case 1: // phpbb3
                    return 'a, a:link, a.forumtitle, a.topictitle, a:visited, .postprofile a:active, .postprofile a:link, .postprofile a:visited, .postprofile dt.author a,.headerbar, .forabg, .forumbg, a.button2, body:last-child a.button1, button.button2, input.button1, input.button2, .button, input[type="button"], input[type="submit"], h1, h2, h3, h4, h5, h6, .h3, h2.h3, h1.page-title, hr, hr.dashed, select, input, textarea, .inputbox { transition:' + fa_theme_color.transition + 'ms; }';
 
                    /*case 2 : // punbb
          return 'a, a:link, a:visited, .pun a:link, .pun a:visited, #pun-intro, .main .main-foot, .main .main-head, #pun-navlinks { transition:' + fa_theme_color.transition + 'ms; }';
 
        case 3 : // invision
          return 'a, a:link, a:visited, div#logostrip, div.maintitle, .box-content, #submenu, table.ipbtable tfoot td, #gfooter, #submenu ul li a, ul.privmsg li { transition:' + fa_theme_color.transition + 'ms; }';*/
 
                default: // unknown
                    return '';
 
            }
        },
 
        // setup the rainbow assets
        rainbow: function() {
            if (!fa_theme_color.transition_all) {
                $('head').append('<style type="text/css" id="fa_rainbow_smoothness">' + fa_theme_color.applyTransitionRules() + '</style>');
            }
 
            fa_theme_color.index = 0;
            fa_theme_color.stop = fa_theme_color.palette['Aleatório'].length;
            fa_theme_color.change('Arco-Íris', fa_theme_color.palette['Aleatório'][fa_theme_color.index]);
 
            fa_theme_color.interval = window.setInterval(function() {
                if (++fa_theme_color.index >= fa_theme_color.stop) {
                    fa_theme_color.index = 0;
                }
 
                fa_theme_color.change('Arco-Íris', fa_theme_color.palette['Aleatório'][fa_theme_color.index]);
            }, fa_theme_color.transition + fa_theme_color.delay);
        }
    };
 
    var htmlStr = '',
        i;
 
    // put together the theme options and random array
    for (i in fa_theme_color.palette) {
        if (typeof fa_theme_color.palette[i] != 'undefined') {
            if (!/Aleatório|Tema Padrão|Arco-Íris/.test(i)) {
                fa_theme_color.palette['Aleatório'][fa_theme_color.palette['Aleatório'].length] = i;
            }
 
            htmlStr += '<option value="' + i + '" ' + (fa_theme_color.selected == i ? 'selected="true"' : '') + ' style="background-color:' + (/Aleatório|Tema Padrão|Arco-Íris/.test(i) ? '#FFF;color:#000;' : fa_theme_color.palette[i][2]) + '">' + i + '</option>';
        }
    }
 
    // create the theme selector
    fa_theme_color.selector = $('<select id="fa_theme_selector" />').html(htmlStr).change(function() {
        fa_theme_color.change(this.value);
    })[0];
 
    fa_theme_color.change(fa_theme_color.selected); // apply the selected theme
 
    // add the theme selector to the document
    $(function() {
        $(fa_theme_color.attachTo).after([fa_theme_color.selector, $('<div class="clear" />')[0]]);
    });
 
    // basic styles for the theme selector
    document.write('<style type="text/css">#fa_theme_selector {color:#FFF;float:right;cursor:pointer;padding:3px 6px;margin:3px;}' + (fa_theme_color.transition_all ? fa_theme_color.applyTransitionRules() : '') + '</style>');
}());


Última edição por Pedxz em 27.04.20 16:40, editado 1 vez(es)
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7966
Pontos : 9225

Ir para o topo Ir para baixo

Tópico resolvido Re: Cores do site adaptáveis

Mensagem por ZombieW 27.04.20 16:38

Pedxz escreveu:Altere para:
Código:
(function() {
    // 0 = phpbb2
    // 1 = phpbb3
    // 2 = punbb
    // 3 = invision
    var version = 1; // forum version
 
    window.fa_theme_color = {
        version: version,
 
        delay: 500, // delay between rainbow colors ( 500 = 0.5s )
        transition: 1000, // transition between colors ( 1000 = 1s )
        transition_all: false, // set to true if you want all themes to utilize the transitions
 
        // elements the selector is attached to
        attachTo: [
            '.bodyline > table:first-child', // phpbb2
            '#page-header', // phpbb3
            '#pun-head', // punbb
            '#submenu' // invision
        ][version],
 
        selected: my_getcookie('fa_theme_color') || 'Tema Padrão', // selected theme
 
        // color palettes
        palette: {
            'Tema Padrão': '',
            'Aleatório': [],
            'Arco-Íris': '',
            'Prata': ['#DDD', '#CCC', '#BBB', '#999', '#555', 'https://i.servimg.com/u/f58/15/04/49/64/prata10.png'], // hue 000
            'Vermelho Persa': ['#D44', '#C33', '#B22', '#900', '#522', 'https://i.servimg.com/u/f58/15/04/49/64/persa10.png'], // hue 000
            'Carmesim': ['#F34', '#E23', '#D12', '#B00', '#622', 'https://i.servimg.com/u/f58/15/04/49/64/carmes10.png'], // hue 355
            'Abóbora': ['#F82', '#F71', '#E60', '#C40', '#631', 'https://i.servimg.com/u/f58/15/04/49/64/abobor10.png'], // hue 025
            'Mostarda': ['#DA4', '#C93', '#B82', '#960', '#542', 'https://i.servimg.com/u/f58/15/04/49/64/mostar10.png'], // hue 039
            'Ouro': ['#FB2', '#EA1', '#D90', '#B70', '#641', 'https://i.servimg.com/u/f58/15/04/49/64/ouro10.png'], // hue 041
            'Verde Primavera': ['#9E1', '#8D0', '#7C0', '#5A0', '#450', 'https://i.servimg.com/u/f58/15/04/49/64/primav10.png'], // hue 083
            'Verde Bandeira': ['#4D4', '#3C3', '#2B2', '#090', '#252', 'https://i.servimg.com/u/f58/15/04/49/64/bandei10.png'], // hue 120
            'Ciano': ['#4DA', '#3C9', '#2B8', '#096', '#254', 'https://i.servimg.com/u/f58/15/04/49/64/ciano10.png'], // hue 160
            'Turquesa': ['#4DD', '#3CC', '#2BB', '#099', '#255', 'https://i.servimg.com/u/f58/15/04/49/64/turque10.png'], // hue 180
            'Azul Céu': ['#4AD', '#39C', '#28B', '#069', '#245', 'https://i.servimg.com/u/f58/15/04/49/64/ceu10.png'], // hue 200
            'Azul Radiante': ['#18F', '#07F', '#06E', '#04C', '#036', 'https://i.servimg.com/u/f58/15/04/49/64/radian10.png'], // hue 212
            'Ametista': ['#A7D', '#96C', '#85B', '#639', '#435', 'https://i.servimg.com/u/f58/15/04/49/64/ametis10.png'], // hue 270
            'Roxo': ['#A4D', '#93C', '#82B', '#609', '#425', 'https://i.servimg.com/u/f58/15/04/49/64/roxo10.png'], // hue 279
            'Cereja': ['#D4D', '#C3C', '#B2B', '#909', '#525', 'https://i.servimg.com/u/f58/15/04/49/64/cereja10.png'], // hue 300
            'Violeta': ['#D4A', '#C39', '#B28', '#906', '#524', 'https://i.servimg.com/u/f58/15/04/49/64/violet10.png'], // hue 321
            'Skyways': ['#F59', '#E48', '#D37', '#B15', '#624', 'https://i.servimg.com/u/f58/15/04/49/64/skyway10.png'], // hue 337
            'Rosa Choque': ['#F46', '#E35', '#D24', '#B02', '#623', 'https://i.servimg.com/u/f58/15/04/49/64/choque10.png'] // hue 350
        },
 
        // change the current theme
        change: function(color, select) {
            var head = $('head'),
                style = document.getElementById('fa_theme_style');
 
            my_setcookie('fa_theme_color', color, true); // update selected theme
 
            // remove old styles
            if (style) {
                head[0].removeChild(style);
            }
 
            fa_theme_color.selector.firstChild.innerHTML = 'Tema Padrão'; // change Tema Padrão texts
 
            // Random / Normal Themes
            if (!/Tema Padrão|Arco-Íris/.test(color) && fa_theme_color.palette[color]) {
                fa_theme_color.selected = color == 'Aleatório' ? fa_theme_color.palette['Aleatório'][Math.floor(Math.random() * fa_theme_color.palette['Aleatório'].length)] : color;
                fa_theme_color.selector.style.backgroundColor = fa_theme_color.palette[fa_theme_color.selected][1];
                fa_theme_color.selector.style.borderColor = fa_theme_color.palette[fa_theme_color.selected][2];
 
                head.append('<style type="text/css" id="fa_theme_style">' + fa_theme_color.css() + '</style>');
 
            } else if (color == 'Arco-Íris') { // Rainbow theme
                if (fa_theme_color.stop) {
                    fa_theme_color.selected = color;
                    fa_theme_color.selector.style.backgroundColor = fa_theme_color.palette[select][1];
                    fa_theme_color.selector.style.borderColor = fa_theme_color.palette[select][2];
 
                    head.append('<style type="text/css" id="fa_theme_style">' + fa_theme_color.css(select) + '</style>');
                } else {
                    fa_theme_color.rainbow();
                }
            } else { // No theme
                fa_theme_color.selector.style.backgroundColor = '#999';
                fa_theme_color.selector.style.borderColor = '#888';
                fa_theme_color.selector.firstChild.innerHTML = 'Tema Padrão';
            }
 
            // delete rainbow assets if it's not selected
            if (color != 'Arco-Íris' && fa_theme_color.stop) {
                if (!fa_theme_color.transition_all) {
                    head[0].removeChild(document.getElementById('fa_rainbow_smoothness'));
                }
 
                window.clearInterval(fa_theme_color.interval);
                delete fa_theme_color.index;
                delete fa_theme_color.stop;
            }
        },
 
        // get and return the theme CSS per version
        css: function(select) {
            var palette = fa_theme_color.palette[select || fa_theme_color.selected];
 
            switch (fa_theme_color.version) {
 
                /*case 0 : // phpbb2
                  return 'a, a:link, a:visited, a.forumlink, a.forumlink:link, a.forumlink:visited, a.topictitle, a.topictitle:link, a.topictitle:visited { color:' + palette[3] + '; }'+
                        'a:hover, a.forumlink:hover, a.topictitle:hover { color:' + palette[1] + '; }'+
                        'th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides { background:' + palette[1] + '!important; }'+
                        '.forumline { border-color:' + palette[1] + '; }'+
                        'th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides, .cattitle, h1.pagetitle, .module-title, .catHead .genmed, .secondarytitle h2, .catBottom a, .catLeft .genmed { color:#FFF !important; }'+
                        all;*/
 
                case 1 : // phpbb3
              
          return 'a[href], a:link, a.forumtitle, a.topictitle, a:visited, .postprofile a:active, .postprofile a:link, .postprofile a:visited, .postprofile dt.author a, #page-footer { color:' + palette[3] + '; }'+
                'a[href]:hover, .tab-link:not(.current), a.forumtitle:hover, a.topictitle:hover, span[style$="rgb(193, 250, 23);"], .postprofile a:hover, .postprofile dt.author a:hover, a, span[style$="#c1fa17"], span[style$="orange"], span[style*="#c1fa17"] { color:' + palette[1] + '!important; }' +
                '.tab-link.current { background-color: ' + palette[1] + '!important; }' +
                '.headerbar { background-image: linear-gradient(to left, ' + palette[1] + ', ' + palette[4] + ' 98%)!important; }' +
                'a:hover { cursor: url(' + palette[5] + '), url(' + palette[5] +'), auto; }' +
                'body { cursor: url(\'https://i.servimg.com/u/f57/17/53/75/18/cursor10.png\'), url(\'https://i.servimg.com/u/f57/17/53/75/18/cursor10.png\'), auto;' +
                '[style*="border-top: 2px solid green"], .tab-content.current, [style*="border-collapse:"] { border-color:' + palette[1] + '!important; }';
 
      /*case 3 : // invision
          return 'a, a:link, a:visited { color:' + palette[3] + '; }'+
                'a:hover { color:' + palette[1] + '; }'+
                'div#logostrip, div.maintitle, ul.privmsg li { background:' + palette[1] + '!important; }'+
                '.box-content { border-bottom-color:' + palette[4] + '!important; }'+
                '#submenu, table.ipbtable tfoot td, #gfooter { background:' + palette[4] + '!important; }'+
                '#submenu ul li a:hover { background:' + palette[3] + '!important; }'+
                'div.maintitle, #submenu, #submenu a.mainmenu, table.ipbtable tfoot td, #gfooter, #gfooter a { color:#FFF!important; }'+
                all;*/
 
                default: // unknown
                    return '' +
                        all;
 
            }
        },
 
        // get and return the transition CSS per version
        // helps make the transition in colors smooth
        applyTransitionRules: function() {
            switch (fa_theme_color.version) {
 
                /*case 0 : // phpbb2
                  return 'a, a:link, a:visited, a.forumlink, a.forumlink:link, a.forumlink:visited, a.topictitle, a.topictitle:link, a.topictitle:visited, th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides, .forumline { transition:' + fa_theme_color.transition + 'ms; }';*/
 
                case 1: // phpbb3
                    return 'a, a:link, a.forumtitle, a.topictitle, a:visited, .postprofile a:active, .postprofile a:link, .postprofile a:visited, .postprofile dt.author a,.headerbar, .forabg, .forumbg, a.button2, body:last-child a.button1, button.button2, input.button1, input.button2, .button, input[type="button"], input[type="submit"], h1, h2, h3, h4, h5, h6, .h3, h2.h3, h1.page-title, hr, hr.dashed, select, input, textarea, .inputbox { transition:' + fa_theme_color.transition + 'ms; }';
 
                    /*case 2 : // punbb
          return 'a, a:link, a:visited, .pun a:link, .pun a:visited, #pun-intro, .main .main-foot, .main .main-head, #pun-navlinks { transition:' + fa_theme_color.transition + 'ms; }';
 
        case 3 : // invision
          return 'a, a:link, a:visited, div#logostrip, div.maintitle, .box-content, #submenu, table.ipbtable tfoot td, #gfooter, #submenu ul li a, ul.privmsg li { transition:' + fa_theme_color.transition + 'ms; }';*/
 
                default: // unknown
                    return '';
 
            }
        },
 
        // setup the rainbow assets
        rainbow: function() {
            if (!fa_theme_color.transition_all) {
                $('head').append('<style type="text/css" id="fa_rainbow_smoothness">' + fa_theme_color.applyTransitionRules() + '</style>');
            }
 
            fa_theme_color.index = 0;
            fa_theme_color.stop = fa_theme_color.palette['Aleatório'].length;
            fa_theme_color.change('Arco-Íris', fa_theme_color.palette['Aleatório'][fa_theme_color.index]);
 
            fa_theme_color.interval = window.setInterval(function() {
                if (++fa_theme_color.index >= fa_theme_color.stop) {
                    fa_theme_color.index = 0;
                }
 
                fa_theme_color.change('Arco-Íris', fa_theme_color.palette['Aleatório'][fa_theme_color.index]);
            }, fa_theme_color.transition + fa_theme_color.delay);
        }
    };
 
    var htmlStr = '',
        i;
 
    // put together the theme options and random array
    for (i in fa_theme_color.palette) {
        if (typeof fa_theme_color.palette[i] != 'undefined') {
            if (!/Aleatório|Tema Padrão|Arco-Íris/.test(i)) {
                fa_theme_color.palette['Aleatório'][fa_theme_color.palette['Aleatório'].length] = i;
            }
 
            htmlStr += '<option value="' + i + '" ' + (fa_theme_color.selected == i ? 'selected="true"' : '') + ' style="background-color:' + (/Aleatório|Tema Padrão|Arco-Íris/.test(i) ? '#FFF;color:#000;' : fa_theme_color.palette[i][2]) + '">' + i + '</option>';
        }
    }
 
    // create the theme selector
    fa_theme_color.selector = $('<select id="fa_theme_selector" />').html(htmlStr).change(function() {
        fa_theme_color.change(this.value);
    })[0];
 
    fa_theme_color.change(fa_theme_color.selected); // apply the selected theme
 
    // add the theme selector to the document
    $(function() {
        $(fa_theme_color.attachTo).after([fa_theme_color.selector, $('<div class="clear" />')[0]]);
    });
 
    // basic styles for the theme selector
    document.write('<style type="text/css">#fa_theme_selector {color:#FFF;float:right;cursor:pointer;padding:3px 6px;margin:3px;}' + (fa_theme_color.transition_all ? fa_theme_color.applyTransitionRules() : '') + '</style>');
}());

O Cursor padrão está certo, mas ainda não está alterando o outro.
ZombieW

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Cores do site adaptáveis

Mensagem por tikky 27.04.20 16:40

Opa, desculpe, esqueci de fechar um elemento, atualizei o código em cima!
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7966
Pontos : 9225

Ir para o topo Ir para baixo

Tópico resolvido Re: Cores do site adaptáveis

Mensagem por ZombieW 27.04.20 16:45

Pedxz escreveu:Opa, desculpe, esqueci de fechar um elemento, atualizei o código em cima!

Ainda não funcionou =/

Testado aqui: https://tutorialdoca.forumeiros.com/h41-acervo-de-videos

@Edit

O site precisava dar uma atualizada, não estava funcionando em nenhum navegador.

Bom, está como eu pedi, muito obrigado Pedxz pela paciência e tempo perdido comigo! xD
ZombieW

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Cores do site adaptáveis

Mensagem por tikky 27.04.20 23:32


Código:
(function() {
    // 0 = phpbb2
    // 1 = phpbb3
    // 2 = punbb
    // 3 = invision
    var version = 1; // forum version
 
    window.fa_theme_color = {
        version: version,
 
        delay: 500, // delay between rainbow colors ( 500 = 0.5s )
        transition: 1000, // transition between colors ( 1000 = 1s )
        transition_all: false, // set to true if you want all themes to utilize the transitions
 
        // elements the selector is attached to
        attachTo: [
            '.bodyline > table:first-child', // phpbb2
            '#page-header', // phpbb3
            '#pun-head', // punbb
            '#submenu' // invision
        ][version],
 
        selected: my_getcookie('fa_theme_color') || 'Tema Padrão', // selected theme
 
        // color palettes
        palette: {
            'Tema Padrão': '',
            'Aleatório': [],
            'Arco-Íris': '',
            'Prata': ['#DDD', '#CCC', '#BBB', '#999', '#555', 'https://i.servimg.com/u/f58/15/04/49/64/prata10.png'], // hue 000
            'Vermelho Persa': ['#D44', '#C33', '#B22', '#900', '#522', 'https://i.servimg.com/u/f58/15/04/49/64/persa10.png'], // hue 000
            'Carmesim': ['#F34', '#E23', '#D12', '#B00', '#622', 'https://i.servimg.com/u/f58/15/04/49/64/carmes10.png'], // hue 355
            'Abóbora': ['#F82', '#F71', '#E60', '#C40', '#631', 'https://i.servimg.com/u/f58/15/04/49/64/abobor10.png'], // hue 025
            'Mostarda': ['#DA4', '#C93', '#B82', '#960', '#542', 'https://i.servimg.com/u/f58/15/04/49/64/mostar10.png'], // hue 039
            'Ouro': ['#FB2', '#EA1', '#D90', '#B70', '#641', 'https://i.servimg.com/u/f58/15/04/49/64/ouro10.png'], // hue 041
            'Verde Primavera': ['#9E1', '#8D0', '#7C0', '#5A0', '#450', 'https://i.servimg.com/u/f58/15/04/49/64/primav10.png'], // hue 083
            'Verde Bandeira': ['#4D4', '#3C3', '#2B2', '#090', '#252', 'https://i.servimg.com/u/f58/15/04/49/64/bandei10.png'], // hue 120
            'Ciano': ['#4DA', '#3C9', '#2B8', '#096', '#254', 'https://i.servimg.com/u/f58/15/04/49/64/ciano10.png'], // hue 160
            'Turquesa': ['#4DD', '#3CC', '#2BB', '#099', '#255', 'https://i.servimg.com/u/f58/15/04/49/64/turque10.png'], // hue 180
            'Azul Céu': ['#4AD', '#39C', '#28B', '#069', '#245', 'https://i.servimg.com/u/f58/15/04/49/64/ceu10.png'], // hue 200
            'Azul Radiante': ['#18F', '#07F', '#06E', '#04C', '#036', 'https://i.servimg.com/u/f58/15/04/49/64/radian10.png'], // hue 212
            'Ametista': ['#A7D', '#96C', '#85B', '#639', '#435', 'https://i.servimg.com/u/f58/15/04/49/64/ametis10.png'], // hue 270
            'Roxo': ['#A4D', '#93C', '#82B', '#609', '#425', 'https://i.servimg.com/u/f58/15/04/49/64/roxo10.png'], // hue 279
            'Cereja': ['#D4D', '#C3C', '#B2B', '#909', '#525', 'https://i.servimg.com/u/f58/15/04/49/64/cereja10.png'], // hue 300
            'Violeta': ['#D4A', '#C39', '#B28', '#906', '#524', 'https://i.servimg.com/u/f58/15/04/49/64/violet10.png'], // hue 321
            'Skyways': ['#F59', '#E48', '#D37', '#B15', '#624', 'https://i.servimg.com/u/f58/15/04/49/64/skyway10.png'], // hue 337
            'Rosa Choque': ['#F46', '#E35', '#D24', '#B02', '#623', 'https://i.servimg.com/u/f58/15/04/49/64/choque10.png'] // hue 350
        },
 
        // change the current theme
        change: function(color, select) {
            var head = $('head'),
                style = document.getElementById('fa_theme_style');
 
            my_setcookie('fa_theme_color', color, true); // update selected theme
 
            // remove old styles
            if (style) {
                head[0].removeChild(style);
            }
 
            fa_theme_color.selector.firstChild.innerHTML = 'Tema Padrão'; // change Tema Padrão texts
 
            // Random / Normal Themes
            if (!/Tema Padrão|Arco-Íris/.test(color) && fa_theme_color.palette[color]) {
                fa_theme_color.selected = color == 'Aleatório' ? fa_theme_color.palette['Aleatório'][Math.floor(Math.random() * fa_theme_color.palette['Aleatório'].length)] : color;
                fa_theme_color.selector.style.backgroundColor = fa_theme_color.palette[fa_theme_color.selected][1];
                fa_theme_color.selector.style.borderColor = fa_theme_color.palette[fa_theme_color.selected][2];
 
                head.append('<style type="text/css" id="fa_theme_style">' + fa_theme_color.css() + '</style>');
 
            } else if (color == 'Arco-Íris') { // Rainbow theme
                if (fa_theme_color.stop) {
                    fa_theme_color.selected = color;
                    fa_theme_color.selector.style.backgroundColor = fa_theme_color.palette[select][1];
                    fa_theme_color.selector.style.borderColor = fa_theme_color.palette[select][2];
 
                    head.append('<style type="text/css" id="fa_theme_style">' + fa_theme_color.css(select) + '</style>');
                } else {
                    fa_theme_color.rainbow();
                }
            } else { // No theme
                fa_theme_color.selector.style.backgroundColor = '#999';
                fa_theme_color.selector.style.borderColor = '#888';
                fa_theme_color.selector.firstChild.innerHTML = 'Tema Padrão';
            }
 
            // delete rainbow assets if it's not selected
            if (color != 'Arco-Íris' && fa_theme_color.stop) {
                if (!fa_theme_color.transition_all) {
                    head[0].removeChild(document.getElementById('fa_rainbow_smoothness'));
                }
 
                window.clearInterval(fa_theme_color.interval);
                delete fa_theme_color.index;
                delete fa_theme_color.stop;
            }
        },
 
        // get and return the theme CSS per version
        css: function(select) {
            var palette = fa_theme_color.palette[select || fa_theme_color.selected];
 
            switch (fa_theme_color.version) {
 
                /*case 0 : // phpbb2
                  return 'a, a:link, a:visited, a.forumlink, a.forumlink:link, a.forumlink:visited, a.topictitle, a.topictitle:link, a.topictitle:visited { color:' + palette[3] + '; }'+
                        'a:hover, a.forumlink:hover, a.topictitle:hover { color:' + palette[1] + '; }'+
                        'th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides { background:' + palette[1] + '!important; }'+
                        '.forumline { border-color:' + palette[1] + '; }'+
                        'th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides, .cattitle, h1.pagetitle, .module-title, .catHead .genmed, .secondarytitle h2, .catBottom a, .catLeft .genmed { color:#FFF !important; }'+
                        all;*/
 
                case 1 : // phpbb3
             
          return 'a[href], a:link, a.forumtitle, a.topictitle, a:visited, .postprofile a:active, .postprofile a:link, .postprofile a:visited, .postprofile dt.author a, #page-footer { color:' + palette[3] + '; }'+
                'a[href]:hover, .tab-link:not(.current), a.forumtitle:hover, a.topictitle:hover, span[style$="rgb(193, 250, 23);"], .postprofile a:hover, .postprofile dt.author a:hover, a, span[style$="#c1fa17"], span[style$="orange"], span[style*="#c1fa17"] { color:' + palette[1] + '!important; }' +
                '.tab-link.current { background-color: ' + palette[1] + '!important; }' +
                '.headerbar { background-image: linear-gradient(to left, ' + palette[1] + ', ' + palette[4] + ' 98%)!important; }' +
                'a:hover { cursor: url("' + palette[5] + '"), url("' + palette[5] +'"), auto!important; }' +
                'body { cursor: url(\'https://i.servimg.com/u/f57/17/53/75/18/cursor10.png\'), url(\'https://i.servimg.com/u/f57/17/53/75/18/cursor10.png\'), auto; }' +
                '[style*="border-top: 2px solid green"], .tab-content.current, [style*="border-collapse:"] { border-color:' + palette[1] + '!important; }';
 
      /*case 3 : // invision
          return 'a, a:link, a:visited { color:' + palette[3] + '; }'+
                'a:hover { color:' + palette[1] + '; }'+
                'div#logostrip, div.maintitle, ul.privmsg li { background:' + palette[1] + '!important; }'+
                '.box-content { border-bottom-color:' + palette[4] + '!important; }'+
                '#submenu, table.ipbtable tfoot td, #gfooter { background:' + palette[4] + '!important; }'+
                '#submenu ul li a:hover { background:' + palette[3] + '!important; }'+
                'div.maintitle, #submenu, #submenu a.mainmenu, table.ipbtable tfoot td, #gfooter, #gfooter a { color:#FFF!important; }'+
                all;*/
 
                default: // unknown
                    return '' +
                        all;
 
            }
        },
 
        // get and return the transition CSS per version
        // helps make the transition in colors smooth
        applyTransitionRules: function() {
            switch (fa_theme_color.version) {
 
                /*case 0 : // phpbb2
                  return 'a, a:link, a:visited, a.forumlink, a.forumlink:link, a.forumlink:visited, a.topictitle, a.topictitle:link, a.topictitle:visited, th, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides, .forumline { transition:' + fa_theme_color.transition + 'ms; }';*/
 
                case 1: // phpbb3
                    return 'a, a:link, a.forumtitle, a.topictitle, a:visited, .postprofile a:active, .postprofile a:link, .postprofile a:visited, .postprofile dt.author a,.headerbar, .forabg, .forumbg, a.button2, body:last-child a.button1, button.button2, input.button1, input.button2, .button, input[type="button"], input[type="submit"], h1, h2, h3, h4, h5, h6, .h3, h2.h3, h1.page-title, hr, hr.dashed, select, input, textarea, .inputbox { transition:' + fa_theme_color.transition + 'ms; }';
 
                    /*case 2 : // punbb
          return 'a, a:link, a:visited, .pun a:link, .pun a:visited, #pun-intro, .main .main-foot, .main .main-head, #pun-navlinks { transition:' + fa_theme_color.transition + 'ms; }';
 
        case 3 : // invision
          return 'a, a:link, a:visited, div#logostrip, div.maintitle, .box-content, #submenu, table.ipbtable tfoot td, #gfooter, #submenu ul li a, ul.privmsg li { transition:' + fa_theme_color.transition + 'ms; }';*/
 
                default: // unknown
                    return '';
 
            }
        },
 
        // setup the rainbow assets
        rainbow: function() {
            if (!fa_theme_color.transition_all) {
                $('head').append('<style type="text/css" id="fa_rainbow_smoothness">' + fa_theme_color.applyTransitionRules() + '</style>');
            }
 
            fa_theme_color.index = 0;
            fa_theme_color.stop = fa_theme_color.palette['Aleatório'].length;
            fa_theme_color.change('Arco-Íris', fa_theme_color.palette['Aleatório'][fa_theme_color.index]);
 
            fa_theme_color.interval = window.setInterval(function() {
                if (++fa_theme_color.index >= fa_theme_color.stop) {
                    fa_theme_color.index = 0;
                }
 
                fa_theme_color.change('Arco-Íris', fa_theme_color.palette['Aleatório'][fa_theme_color.index]);
            }, fa_theme_color.transition + fa_theme_color.delay);
        }
    };
 
    var htmlStr = '',
        i;
 
    // put together the theme options and random array
    for (i in fa_theme_color.palette) {
        if (typeof fa_theme_color.palette[i] != 'undefined') {
            if (!/Aleatório|Tema Padrão|Arco-Íris/.test(i)) {
                fa_theme_color.palette['Aleatório'][fa_theme_color.palette['Aleatório'].length] = i;
            }
 
            htmlStr += '<option value="' + i + '" ' + (fa_theme_color.selected == i ? 'selected="true"' : '') + ' style="background-color:' + (/Aleatório|Tema Padrão|Arco-Íris/.test(i) ? '#FFF;color:#000;' : fa_theme_color.palette[i][2]) + '">' + i + '</option>';
        }
    }
 
    // create the theme selector
    fa_theme_color.selector = $('<select id="fa_theme_selector" />').html(htmlStr).change(function() {
        fa_theme_color.change(this.value);
    })[0];
 
    fa_theme_color.change(fa_theme_color.selected); // apply the selected theme
 
    // add the theme selector to the document
    $(function() {
        $(fa_theme_color.attachTo).after([fa_theme_color.selector, $('<div class="clear" />')[0]]);
    });
 
    // basic styles for the theme selector
    document.write('<style type="text/css">#fa_theme_selector {color:#FFF;float:right;cursor:pointer;padding:3px 6px;margin:3px;}' + (fa_theme_color.transition_all ? fa_theme_color.applyTransitionRules() : '') + '</style>');
}());



Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7966
Pontos : 9225

Ir para o topo Ir para baixo

Página 2 de 2 Anterior  1, 2

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos