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.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Criação de portal com link
Hoje à(s) 22:13 por Luiz~

» Modificar campo de avatar
Hoje à(s) 22:12 por Luiz~

» Botões VIPS & Avatar e Assinatura
Hoje à(s) 21:32 por ranzatti

» Diminuir largura dentro das categorias
Hoje à(s) 20:59 por Luiz~

» parte code do ModernBB bugado
Hoje à(s) 20:46 por Luiz~

» Degradê em cima dos botão ModernBB
Hoje à(s) 20:33 por Luiz~

» formulário de postagem
Hoje à(s) 20:08 por Luiz~

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
266 usuários online :: 9 usuários cadastrados, 2 Invisíveis e 255 Visitantes :: 2 Motores de busca

Fernanda Nunes, GustavoDM11, Holkis, juleic1123, Luiz~, MateusV., ranzatti, Rhuanzinho Pjl, Weder M. T. N.

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 16:05

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 Ter 1 Nov 2016 - 7: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 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 : 189

http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em Ter 1 Nov 2016 - 15: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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3107
Pontos Ativos : 6412

http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em Ter 1 Nov 2016 - 15:37

Onde eu coloco o segundo código?
avatar

The_Flash28
Nível 2

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

http://brasilrealworldrpg.forumeiros.com/
  • 0

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Cream em Ter 1 Nov 2016 - 15: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!
avatar

Cream
Principal contribuidor
Principal contribuidor

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

http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em Ter 1 Nov 2016 - 18:02

Oq eu coloco onde tem Cor1 Cor2?
avatar

The_Flash28
Nível 2

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

http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em Ter 1 Nov 2016 - 18: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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3107
Pontos Ativos : 6412

http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em Ter 1 Nov 2016 - 19: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.
avatar

The_Flash28
Nível 2

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

http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em Ter 1 Nov 2016 - 20: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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3107
Pontos Ativos : 6412

http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em Ter 1 Nov 2016 - 21: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?
avatar

The_Flash28
Nível 2

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

http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em Ter 1 Nov 2016 - 22: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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3107
Pontos Ativos : 6412

http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em Ter 1 Nov 2016 - 22: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ó?
avatar

The_Flash28
Nível 2

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

http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em Ter 1 Nov 2016 - 22: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
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3107
Pontos Ativos : 6412

http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em Qua 2 Nov 2016 - 0: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?
avatar

The_Flash28
Nível 2

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

http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Kyo Panda em Qua 2 Nov 2016 - 0:23

Para a barra, você pode seguir esse tutorial.

Contente
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3107
Pontos Ativos : 6412

http://ajuda.forumeiros.com

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por The_Flash28 em Qui 3 Nov 2016 - 5:30

Blz, já consegui fazer tudo! Obrigado!
avatar

The_Flash28
Nível 2

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

http://brasilrealworldrpg.forumeiros.com/

Resolvido Re: Efeito degrade em ranks especiais

Mensagem por Cream em Qui 3 Nov 2016 - 12:23

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 : 13963

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