Efeito degrade em ranks especiais

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!

Olá,

Vá em Painel de controle › Módulos › HTML & JavaScript › Gestão dos códigos JavaScripts › Criar 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']
    }
];

Onde eu coloco o segundo código?

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!

Oq eu coloco onde tem Cor1 Cor2?

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

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.

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

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?

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);

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ó?

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.

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?

Para a barra, você pode seguir esse tutorial.

Blz, já consegui fazer tudo! Obrigado!