Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Status do servidor
Hoje à(s) 01:39 am por ranzatti

» Como mudar o tamanho do avatar default ? modernbb
Hoje à(s) 12:30 am por BlueJOkeR

» mEU FORUM ESTA COM POBLEMA !
Ontem à(s) 11:18 pm por Xigncode3

» Member List Grande
Ontem à(s) 10:31 pm por ranzatti

» Top Usuário sem funcionar
Ontem à(s) 10:08 pm por iScroll

» Spoiler tópicos
Ontem à(s) 09:55 pm por Luiz

» Bug pelo slide
Ontem à(s) 09:20 pm por Ketholy123

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Quem está conectado
165 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 164 Visitantes :: 2 Motores de busca

DespacitoRemix000

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Efeito degrade em ranks especiais

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

Resolvido Efeito degrade em ranks especiais

Mensagem por The_Flash28 em 01/11/16, 04:33 am

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 http://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!
avatar

The_Flash28
Nível 2

Masculino
Inscrito dia : 01/11/2016
Mensagens : 8
Pontos Ativos : 10

Ver perfil do usuário http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em 01/11/16, 12:08 pm

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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4501
Pontos Ativos : 5787

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em 01/11/16, 12:37 pm

Onde eu coloco o segundo código?
avatar

The_Flash28
Nível 2

Masculino
Inscrito dia : 01/11/2016
Mensagens : 8
Pontos Ativos : 10

Ver perfil do usuário http://brasilrealworldrpg.forumeiros.com/
  • 0

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Cream em 01/11/16, 12:53 pm

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

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11633

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em 01/11/16, 03:02 pm

Oq eu coloco onde tem Cor1 Cor2?
avatar

The_Flash28
Nível 2

Masculino
Inscrito dia : 01/11/2016
Mensagens : 8
Pontos Ativos : 10

Ver perfil do usuário http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em 01/11/16, 03:16 pm

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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4501
Pontos Ativos : 5787

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em 01/11/16, 04:44 pm

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

The_Flash28
Nível 2

Masculino
Inscrito dia : 01/11/2016
Mensagens : 8
Pontos Ativos : 10

Ver perfil do usuário http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em 01/11/16, 05:21 pm

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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4501
Pontos Ativos : 5787

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em 01/11/16, 06:15 pm

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

The_Flash28
Nível 2

Masculino
Inscrito dia : 01/11/2016
Mensagens : 8
Pontos Ativos : 10

Ver perfil do usuário http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em 01/11/16, 07:02 pm

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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4501
Pontos Ativos : 5787

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em 01/11/16, 07:17 pm

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

The_Flash28
Nível 2

Masculino
Inscrito dia : 01/11/2016
Mensagens : 8
Pontos Ativos : 10

Ver perfil do usuário http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em 01/11/16, 07:55 pm

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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4501
Pontos Ativos : 5787

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em 01/11/16, 09:03 pm

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

The_Flash28
Nível 2

Masculino
Inscrito dia : 01/11/2016
Mensagens : 8
Pontos Ativos : 10

Ver perfil do usuário http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em 01/11/16, 09:23 pm

Para a barra, você pode seguir esse tutorial.

Contente
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4501
Pontos Ativos : 5787

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em 03/11/16, 02:30 am

Blz, já consegui fazer tudo! Obrigado!
avatar

The_Flash28
Nível 2

Masculino
Inscrito dia : 01/11/2016
Mensagens : 8
Pontos Ativos : 10

Ver perfil do usuário http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Cream em 03/11/16, 09:23 am

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11633

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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