Efeito degrade em ranks especiais

3 participantes

Ir para baixo

Tópico resolvido Efeito degrade em ranks especiais

Mensagem por The_Flash28 01.11.16 6:33

Detalhes da questão


Endereço do fórum: http://brasilvirtualgrpg.forumeiros.com/forum
Versão do fórum: PhpBB3

Descrição


Quero mudar a cor do fundo para usuarios especiais como administradores, helpers, designers etc...

Tipo assim https://imgur.com/a/rdlfc
vcs reparam que nesse comentário o fundo dele ta azul, pq ele possui o rank de fundador, cada rank contem uma cor no fundo do comentário, quero saber como coloco esse fundo colorido em cada rank.

versão do fórum: PhpBB3
Forum: http://brasilvirtualgrpg.forumeiros.com/forum

quero as seguintes cores: Amarelo, rosa, azul, verde, azul claro (CIANO) e vermelho.

Se o tema do fórum mudar alguma coisa sobre isso me avisem.
Serei muito grato se me ajudarem!

Obs: Se quiserem me explicar melhor só pedir skype!
The_Flash28
The_Flash28
Novo Membro

Membro desde : 01/11/2016
Mensagens : 8
Pontos : 10

http://brasilrealworldrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda 01.11.16 14:08

Olá,

Vá em Painel de controleMódulosHTML & JavaScriptGestão dos códigos JavaScriptsCriar um novo JavaScript e adicione esse código com Investimento em Todas as páginas:

Código:
; (function ($) {
    'use strict';

    var colors, search, background, filter, format;

    colors = [
        {
            ranking: 'Administradores',
            values: ['#fffc88', '#b3b686']
        }, {
            ranking: 'Ranking #2',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #3',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #4',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #5',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #6',
            values: ['Cor 1', 'Cor 2']
        }
    ];

    search = '.postprofile img[alt="{0}"]';

    background = [
        '{0}', /* Old browsers */
        '-moz-linear-gradient(left, {0} 0%, {1} 100%)', /* FF3.6-15 */
        '-webkit-linear-gradient(left, {0} 0%, {1} 100%)', /* Chrome10-25,Safari5.1-6 */
        'linear-gradient(to right, {0} 0%, {1} 100%)', /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    ];

    filter = [
        'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'{0}\', endColorstr=\'{1}\', GradientType=1)' /* IE6-9 */
    ]

    format = function () {
        var str, index;
        str = arguments[0];
        for (index = 0; index < arguments.length - 1; index++) {
            str = str.replace(new RegExp('\\{' + index + '\\}', 'g'), arguments[index + 1]);
        }
        return str;
    };

    $(function () {
        $('.post').each(function (i, element) {
            var post, k, l;
            post = $(element);

            $.each(colors, function (j, color) {
                if (post.find(format(search, color.ranking)).length) {
                    for (k = 0; k < background.length; k++) {
                        post.css('background', format(background[k], color.values[0], color.values[1]));
                    }
                   
                    for (l = 0; l < filter.length; l++) {
                        post.css('filter', format(filter[l], color.values[0], color.values[1]));
                    }
                }
            });
        });
    });
})(jQuery);

Você pode configurar as cores e os rankings desejados em:

Código:
colors = [
    {
        ranking: 'Administradores',
        values: ['#fffc88', '#b3b686']
    }, {
        ranking: 'Ranking #2',
        values: ['Cor 1', 'Cor 2']
    }, {
        ranking: 'Ranking #3',
        values: ['Cor 1', 'Cor 2']
    }, {
        ranking: 'Ranking #4',
        values: ['Cor 1', 'Cor 2']
    }, {
        ranking: 'Ranking #5',
        values: ['Cor 1', 'Cor 2']
    }, {
        ranking: 'Ranking #6',
        values: ['Cor 1', 'Cor 2']
    }
];

Feliz
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 01.11.16 14:37

Onde eu coloco o segundo código?
The_Flash28
The_Flash28
Novo Membro

Membro desde : 01/11/2016
Mensagens : 8
Pontos : 10

http://brasilrealworldrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por Cream 01.11.16 14:53

Olá autor,

O segundo código na verdade faz parte do primeiro. O Kyo Panda somente quis lhe mostrar o local exato onde você pode configurar os ranks da maneira como você deseja.

Até mais!
Cream
Cream
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 01.11.16 17:02

Oq eu coloco onde tem Cor1 Cor2?
The_Flash28
The_Flash28
Novo Membro

Membro desde : 01/11/2016
Mensagens : 8
Pontos : 10

http://brasilrealworldrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda 01.11.16 17:16

Pode ser qualquer cor hexadecimal (elas são representadas com o sinal # seguido de 6 caracteres: #FF00FF, #F00453) ou um nome de cor padrão web (elas são representadas por nomes: CornFlowerBlue, Red, Salmon).

Feliz
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 01.11.16 18:44

Eu colei o código lá e criei no java script, mas não aconteceu nada. Tem que criar Rank ou Grupo, deêm exemplos, sejam mais detalhados.
The_Flash28
The_Flash28
Novo Membro

Membro desde : 01/11/2016
Mensagens : 8
Pontos : 10

http://brasilrealworldrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda 01.11.16 19:21

Pelo o quê pude ver pelo código do seu fórum, não há nenhum Javascript ativo. Dado a esse fato, sou levado a acreditar que a opção Habilitar o gerenciamento dos códigos JavaScript do seu fórum esteja inativo.

Seguindo as orientações desse tópico, clicando na opção Criar novo Javascript na página indicada, as seguintes opções devem ser definidas:

  • Título: Qualquer um que desejar. Este é apenas usado como referência.
  • Localização (Investimento): Marque Em todas as páginas
  • Código JavaScript: O código que lhe passei. Apenas o primeiro citado. O segundo é apenas uma explicação de onde você deve alterar os rankings e cores do código, como dito pelo Sr. @Cream
  • Habilitar o gerenciamento dos códigos JavaScript: Marque como Sim. Caso contrário, nenhum código Javascript funcionará no seu fórum.

Já para as configurações, você apenas deve criar os rankings para o seu fórum e copiar o nome dado a eles no código que te passei.

Seguindo as orientações desse tópico, o ranking que é pedido no script é o mesmo que definido em Título do Rank. No seu fórum, o ranking do Administrador está como Fundador. Logo, para que você pudesse aplicar um degradê de Azul, por exemplo, teria que alterar as cores do código para a seguinte:

Código:
{
    ranking: 'Fundador',
    values: ['#4d88ff', '#003399']
}

Mas acima é apenas como ficaria a parte descrita do código onde se deve fazer as alterações. O código completo ficaria dessa forma:

Código:
; (function ($) {
    'use strict';

    var colors, search, background, filter, format;

    colors = [
        {
            ranking: 'Fundador',
            values: ['#4d88ff', '#003399']
        }, {
            ranking: 'Ranking #2',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #3',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #4',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #5',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #6',
            values: ['Cor 1', 'Cor 2']
        }
    ];

    search = '.postprofile img[alt="{0}"]';

    background = [
        '{0}', /* Old browsers */
        '-moz-linear-gradient(left, {0} 0%, {1} 100%)', /* FF3.6-15 */
        '-webkit-linear-gradient(left, {0} 0%, {1} 100%)', /* Chrome10-25,Safari5.1-6 */
        'linear-gradient(to right, {0} 0%, {1} 100%)', /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    ];

    filter = [
        'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'{0}\', endColorstr=\'{1}\', GradientType=1)' /* IE6-9 */
    ]

    format = function () {
        var str, index;
        str = arguments[0];
        for (index = 0; index < arguments.length - 1; index++) {
            str = str.replace(new RegExp('\\{' + index + '\\}', 'g'), arguments[index + 1]);
        }
        return str;
    };

    $(function () {
        $('.post').each(function (i, element) {
            var post, k, l;
            post = $(element);

            $.each(colors, function (j, color) {
                if (post.find(format(search, color.ranking)).length) {
                    for (k = 0; k < background.length; k++) {
                        post.css('background', format(background[k], color.values[0], color.values[1]));
                    }

                    for (l = 0; l < filter.length; l++) {
                        post.css('filter', format(filter[l], color.values[0], color.values[1]));
                    }
                }
            });
        });
    });
})(jQuery);

As cores que utilizei foram #4d88ff e #003399, as quais peguei diretamente da página passada anteriormente.

Um exemplo de como sua página fica com o código aplicado:

Spoiler:

Agora supomos que queira criar os rankings de Moderador e Colaborador, dando as cores de verde e amarelo, respectivamente. Seu código ficaria como:

Código:
; (function ($) {
    'use strict';

    var colors, search, background, filter, format;

    colors = [
        {
            ranking: 'Fundador',
            values: ['#4d88ff', '#003399']
        }, {
            ranking: 'Moderador',
            values: ['#339933', '#194d19']
        }, {
            ranking: 'Colaborador',
            values: ['#cccc00', '#4d4d00']
        }, {
            ranking: 'Ranking #4',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #5',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #6',
            values: ['Cor 1', 'Cor 2']
        }
    ];

    search = '.postprofile img[alt="{0}"]';

    background = [
        '{0}', /* Old browsers */
        '-moz-linear-gradient(left, {0} 0%, {1} 100%)', /* FF3.6-15 */
        '-webkit-linear-gradient(left, {0} 0%, {1} 100%)', /* Chrome10-25,Safari5.1-6 */
        'linear-gradient(to right, {0} 0%, {1} 100%)', /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    ];

    filter = [
        'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'{0}\', endColorstr=\'{1}\', GradientType=1)' /* IE6-9 */
    ]

    format = function () {
        var str, index;
        str = arguments[0];
        for (index = 0; index < arguments.length - 1; index++) {
            str = str.replace(new RegExp('\\{' + index + '\\}', 'g'), arguments[index + 1]);
        }
        return str;
    };

    $(function () {
        $('.post').each(function (i, element) {
            var post, k, l;
            post = $(element);

            $.each(colors, function (j, color) {
                if (post.find(format(search, color.ranking)).length) {
                    for (k = 0; k < background.length; k++) {
                        post.css('background', format(background[k], color.values[0], color.values[1]));
                    }

                    for (l = 0; l < filter.length; l++) {
                        post.css('filter', format(filter[l], color.values[0], color.values[1]));
                    }
                }
            });
        });
    });
})(jQuery);

Como eu desconheço quais são os nomes dos rankings de seu fórum e suas respectivas cores, não tenho como pré-configura-las de acordo, por isso deixei da melhor maneira que pude. Mas caso tenha problemas em configurá-las, é só retornar aqui que faremos o melhor para te ajudar.

Desculpa qualquer dúvida que tenha deixado. :C
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 01.11.16 20:15

Tá, coloquei o código e ativei a opção, e dps, é necessário criar rank ou ele cria automaticamente, é necessário criar grupo ou tbm é auto? É necessário mudar o tema do fórum? Como faço?
The_Flash28
The_Flash28
Novo Membro

Membro desde : 01/11/2016
Mensagens : 8
Pontos : 10

http://brasilrealworldrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda 01.11.16 21:02

Os rankings são os criados através do meio comum do Forumeiros. Mesmo que ranking e grupos possuam funções distintas no Forumeiros, dado ao atual layout do seu fórum, estou considerando Grupos no código. Logo, cada grupo novo que desejar colocar o degradê deverá ser adicionado ao código, pelos meios supracitados.

Não há a necessidade de mudar o tema do fórum.

Em adição, troque o script passado por esse. Esqueci 1 ponto e vírgula no script, o que o torna não funcional. Perdão.

Código:
; (function ($) {
    'use strict';

    var colors, search, background, filter, format;

    colors = [
        {
            ranking: 'Fundador',
            values: ['#4d88ff', '#003399']
        }, {
            ranking: 'Moderador',
            values: ['#339933', '#194d19']
        }, {
            ranking: 'Colaborador',
            values: ['#cccc00', '#4d4d00']
        }, {
            ranking: 'Ranking #4',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #5',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #6',
            values: ['Cor 1', 'Cor 2']
        }
    ];

    search = '.postprofile img[alt="{0}"]';

    background = [
        '{0}', /* Old browsers */
        '-moz-linear-gradient(left, {0} 0%, {1} 100%)', /* FF3.6-15 */
        '-webkit-linear-gradient(left, {0} 0%, {1} 100%)', /* Chrome10-25,Safari5.1-6 */
        'linear-gradient(to right, {0} 0%, {1} 100%)', /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    ];

    filter = [
        'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'{0}\', endColorstr=\'{1}\', GradientType=1)' /* IE6-9 */
    ];

    format = function () {
        var str, index;
        str = arguments[0];
        for (index = 0; index < arguments.length - 1; index++) {
            str = str.replace(new RegExp('\\{' + index + '\\}', 'g'), arguments[index + 1]);
        }
        return str;
    };

    $(function () {
        $('.post').each(function (i, element) {
            var post, k, l;
            post = $(element);

            $.each(colors, function (j, color) {
                if (post.find(format(search, color.ranking)).length) {
                    for (k = 0; k < background.length; k++) {
                        post.css('background', format(background[k], color.values[0], color.values[1]));
                    }

                    for (l = 0; l < filter.length; l++) {
                        post.css('filter', format(filter[l], color.values[0], color.values[1]));
                    }
                }
            });
        });
    });
})(jQuery);

Feliz
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 01.11.16 21:17

Funcionou, agora quero saber outra coisa, tenho que criar os ranks pelos mesmos nomes que estão no código, por exemplo se no código ta colaborador, então tenho que criar um rank e um grupo com o nome colaborador? E quanto as cores se é tudo azul porque na cor 1 e 2 os códigos estão diferentes em vez de tar tudo um só?
The_Flash28
The_Flash28
Novo Membro

Membro desde : 01/11/2016
Mensagens : 8
Pontos : 10

http://brasilrealworldrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda 01.11.16 21:55

Apenas corrigindo uma informação que passei anteriormente:

[...] dado ao atual layout do seu fórum, estou considerando Grupos no código. [...]

Não há a necessidade de criar um Grupo, se não desejar. Apenas um Ranking que possua uma URL da imagem do Rank, como dito nesse tópico.

A vida está complicada hoje. ¯\_(ツ)_/¯

---

Quanto ao nome, você pode criar um Ranking com o nome que quiser e alterar no código. Supomos que ao invés de Colaborador você queira um ranking chamado Ajudante. Você criaria o Ranking com o Título do Rank como Ajudante (como descrito aqui) e alteraria o código para ficar dessa forma:

Código:
; (function ($) {
    'use strict';
 
    var colors, search, background, filter, format;
 
    colors = [
        {
            ranking: 'Fundador',
            values: ['#4d88ff', '#003399']
        }, {
            ranking: 'Moderador',
            values: ['#339933', '#194d19']
        }, {
            ranking: 'Ajudante',
            values: ['#cccc00', '#4d4d00']
        }, {
            ranking: 'Ranking #4',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #5',
            values: ['Cor 1', 'Cor 2']
        }, {
            ranking: 'Ranking #6',
            values: ['Cor 1', 'Cor 2']
        }
    ];
 
    search = '.postprofile img[alt="{0}"]';
 
    background = [
        '{0}', /* Old browsers */
        '-moz-linear-gradient(left, {0} 0%, {1} 100%)', /* FF3.6-15 */
        '-webkit-linear-gradient(left, {0} 0%, {1} 100%)', /* Chrome10-25,Safari5.1-6 */
        'linear-gradient(to right, {0} 0%, {1} 100%)', /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    ];
 
    filter = [
        'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'{0}\', endColorstr=\'{1}\', GradientType=1)' /* IE6-9 */
    ];
 
    format = function () {
        var str, index;
        str = arguments[0];
        for (index = 0; index < arguments.length - 1; index++) {
            str = str.replace(new RegExp('\\{' + index + '\\}', 'g'), arguments[index + 1]);
        }
        return str;
    };
 
    $(function () {
        $('.post').each(function (i, element) {
            var post, k, l;
            post = $(element);
 
            $.each(colors, function (j, color) {
                if (post.find(format(search, color.ranking)).length) {
                    for (k = 0; k < background.length; k++) {
                        post.css('background', format(background[k], color.values[0], color.values[1]));
                    }
 
                    for (l = 0; l < filter.length; l++) {
                        post.css('filter', format(filter[l], color.values[0], color.values[1]));
                    }
                }
            });
        });
    });
})(jQuery);

Perceba que a única coisa que mudei foi o nome. Isso é o suficiente.

Quanto as cores, na verdade ele faz um gradiente de azul claro para azul escuro. Você pode criar um gradiente de vermelho para ciano se quiser. As duas cores estão ali para que possa configurar como desejar.

Feliz
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 01.11.16 23:03

Blz, consegui fazer pegar tudo, eu tinha esquecido que tem q colocar a imagem no rank pra aparecer kk, só mais uma coisa, como colocar a barra de warn, pra setar warn?
The_Flash28
The_Flash28
Novo Membro

Membro desde : 01/11/2016
Mensagens : 8
Pontos : 10

http://brasilrealworldrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda 01.11.16 23:23

Para a barra, você pode seguir esse tutorial.

Contente
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 03.11.16 4:30

Blz, já consegui fazer tudo! Obrigado!
The_Flash28
The_Flash28
Novo Membro

Membro desde : 01/11/2016
Mensagens : 8
Pontos : 10

http://brasilrealworldrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito degrade em ranks especiais

Mensagem por Cream 03.11.16 11:23

Efeito degrade em ranks especiais Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Cream
Cream
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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