Colorir a mensagem de acordo com o grupo

Detalhes da questão

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

Descrição

Olá, pessoal! To aqui de volta com uma questão de melhoria no meu fórum que não sei como fazer.

Uso um mini-perfil (aqueles que aparece nas mensagens postadas) personalizado no meu fórum, como podem ver no print.

Eu gostaria de alterar a cor do em que aparece as informações e da transparência (hoje são azuis #293c4e e rgba(104,150,195,0.7)), a ideia é que nessas regiões fiquem com as cores dos grupos dos usuários (já vi esse recurso em outro forum, um até mesmo meu - mas não fui eu quem coloquei o efeito).

Alguém consegue ajudar?

Pinrt com a imagem do mini-perfil:


Código do mini-perfil personalizado:

Código:

/* ============================================ PAGINA DEL PERFIL - PERSONALIZADO ============================================ */

#perfil01 {
    width:250px;
}

.upperfil {
    position:relative;
    width:250px;
    height:400px;
    background:grey;
    overflow:hidden;
}

.avatarp01 img {
    width:250px;
    height:400px;
    position:absolute;
    transition:1s;
}

.resurgp01 {
    width:145px;
    background:#293c4e;
    height:400px;
    position:absolute;
    top:400px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.8s;
}

.flechi {
    position:absolute;
    bottom:-50px;left:20px;
    -webkit-transform: rotate(270deg);
    width: 0;
    height: 0;
    border-left: 70px solid #e8e4e5;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;transition-delay: 1s;
}

.imaperfil05 {
    width:100px;
    height:100px;
    background-size: cover;
    position:relative;
    top:22px;
    left:22px;
}

.datosperfil {
    font:8px calibri;
    color:#fff;
    text-transform:uppercase;
    width:100px;
    text-align:center;
    padding-bottom:3px;
    border-bottom:1px solid #fff;
    margin-top:5px;
    letter-spacing:2px;
}

.nameuserp01 {
    width:220px;
    min-height:60px;
    background:#e8e4e5;
    font-size:20px;
    font-family: 'Metamorphous';
    padding:15px;
    text-align:right;
    padding-top:15px;
    color:orange;
}

.capitap01 {
    width:250px;
    height:400px;
    background:rgba(104,150,195,0.7);
    position:absolute;
    left:250px;
    top:-400px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.5s;
}

.nameuserp01 span.rangoperfil {
    display:block;
    font:10px calibri;
    text-transform:uppercase;
    color:#000;
    letter-spacing:2px;
    width:200px;
    border-top:1px solid #000;
    padding-top:5px;
    margin-left:20px;
    margin-top:5px;
}

.contactp01 {
    position:absolute;
    width:30px;
    bottom:20px;
    right:-40px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.3s;
}

.contactp01 img {
    width:20px;
    display:block;
    margin-top:4px;
    margin-bottom:4px;
}

#perfil01:hover .upperfil .capitap01 {
    top:0px;
    left:0px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.5s;
}

#perfil01:hover .upperfil .contactp01 {
    bottom:20px;
    right:70px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.5s;
}

#perfil01:hover .upperfil .flechi {
    left:-70px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0s;
}

#perfil01:hover .upperfil .resurgp01 {
    top:0px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.4s;
}

span.profilefield:nth-child(1) img {
    height: 100px;
    margin-top: 22px;
    margin-bottom: 10px;
    width: 100px;border-bottom: none;
}

span.profilefield:nth-child(1)  {
    border-bottom: none;
}

span.profilefield:nth-child(2)  {
    color: #fcfafa;
    display: block;
    font-family: intro;font-size: 20px;
    margin-left: 22px;
    padding-bottom: 3px;
    text-align: center;
    text-transform: uppercase;
    width: 100px;
    border: 1px solid white;
    padding-top: 3px;
    margin-top: 10px;margin-bottom: 20px;
}

span.profilefield .label {
    display:none
}

span.profilefield {text-align: center;
    width: 100px;
    display: block;
    margin-left: 22px;
    font: 8px calibri;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 3px;
border-bottom: 1px solid white;
    margin-bottom: 5px;
}
/* ============================================ FIN DEL PERFIL PERSONALIZADO PAGINA ============================================ */


Vamos lá, faça os seguintes passos abaixo.

Altere o código CSS para o abaixo:

Código:


/* ============================================ PAGINA DEL PERFIL - PERSONALIZADO ============================================ */
 
#perfil01 {
    width:250px;
}
 
.upperfil {
    position:relative;
    width:250px;
    height:400px;
    background:grey;
    overflow:hidden;
}
 
.avatarp01 img {
    width:250px;
    height:400px;
    position:absolute;
    transition:1s;
}
 
.resurgp01 {
    width:145px;
    height:400px;
    position:absolute;
    top:400px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.8s;
}
 
.flechi {
    position:absolute;
    bottom:-50px;left:20px;
    -webkit-transform: rotate(270deg);
    width: 0;
    height: 0;
    border-left: 70px solid #e8e4e5;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;transition-delay: 1s;
}
 
.imaperfil05 {
    width:100px;
    height:100px;
    background-size: cover;
    position:relative;
    top:22px;
    left:22px;
}
 
.datosperfil {
    font:8px calibri;
    color:#fff;
    text-transform:uppercase;
    width:100px;
    text-align:center;
    padding-bottom:3px;
    border-bottom:1px solid #fff;
    margin-top:5px;
    letter-spacing:2px;
}
 
.nameuserp01 {
    width:220px;
    min-height:60px;
    background:#e8e4e5;
    font-size:20px;
    font-family: 'Metamorphous';
    padding:15px;
    text-align:right;
    padding-top:15px;
    color:orange;
}
 
.capitap01 {
    width:250px;
    height:400px;
    opacity: .7;
    position:absolute;
    left:250px;
    top:-400px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.5s;
}
 
.nameuserp01 span.rangoperfil {
    display:block;
    font:10px calibri;
    text-transform:uppercase;
    color:#000;
    letter-spacing:2px;
    width:200px;
    border-top:1px solid #000;
    padding-top:5px;
    margin-left:20px;
    margin-top:5px;
}
 
.contactp01 {
    position:absolute;
    width:30px;
    bottom:20px;
    right:-40px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.3s;
}
 
.contactp01 img {
    width:20px;
    display:block;
    margin-top:4px;
    margin-bottom:4px;
}
 
#perfil01:hover .upperfil .capitap01 {
    top:0px;
    left:0px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.5s;
}
 
#perfil01:hover .upperfil .contactp01 {
    bottom:20px;
    right:70px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.5s;
}
 
#perfil01:hover .upperfil .flechi {
    left:-70px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0s;
}
 
#perfil01:hover .upperfil .resurgp01 {
    top:0px;
    transition: 0.2s all ease-in-out;
    transition-duration: 0.2s;
    transition-delay: 0.4s;
}
 
span.profilefield:nth-child(1) img {
    height: 100px;
    margin-top: 22px;
    margin-bottom: 10px;
    width: 100px;border-bottom: none;
}
 
span.profilefield:nth-child(1)  {
    border-bottom: none;
}
 
span.profilefield:nth-child(2)  {
    color: #fcfafa;
    display: block;
    font-family: intro;font-size: 20px;
    margin-left: 22px;
    padding-bottom: 3px;
    text-align: center;
    text-transform: uppercase;
    width: 100px;
    border: 1px solid white;
    padding-top: 3px;
    margin-top: 10px;margin-bottom: 20px;
}
 
span.profilefield .label {
    display:none
}
 
span.profilefield {text-align: center;
    width: 100px;
    display: block;
    margin-left: 22px;
    font: 8px calibri;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 3px;
border-bottom: 1px solid white;
    margin-bottom: 5px;
}
/* ============================================ FIN DEL PERFIL PERSONALIZADO PAGINA ============================================ */


Posteriormente, adicione o código javascript abaixo com investimento nos tópicos.

Código:


(function ($) {
  'use strict';
 
  $(function () {
 
    if (!/^\/t(\d+).*$/i.test(location.pathname)) {
      return false;
    }
 
    $('.post').each(function () {
 
      var $post = $(this);
 
      var color = $post
        .find('div.postbody > p.author > span')
          .css('color');
     
      $post
 .find('.resurgp01')
          .attr('style', 'background-color: ' + color + '')
        .end();
              $post
 .find('.capitap01')
          .attr('style', 'background-color: ' + color + '')
        .end();
    });
  });
}(jQuery));


@Connor R., bom dia! Fiz o que pediu, porém, onde antes era azul ficou transparente, como pode ver no print:

Olá @Starset,

Altere o código acima para

Código:

(function($) {
    'use strict';

    $(function() {

        $('.post').each(function() {

            const $post = $(this);
            const color = $post.find('div.postbody > p.author > span').css('color');

            $post.find('.resurgp01, .capitap01, .topic-title a').attr('style', 'background-color: ' + color + '');
        });

    });
}(jQuery));

Atenciosamente,
pedxz.

Olá, testei e está funcionando perfeitamente. Mande-me o post em questão para eu averiguar.

@Connor R.

Connor R. escreveu:Olá, testei e está funcionando perfeitamente. Mande-me o post em questão para eu averiguar.

Todos os posts, não está replicando aqui pra mim...

@pedxz realizei a mudança e permaneceu igual....

Starset escreveu:@Connor R.

Connor R. escreveu:Olá, testei e está funcionando perfeitamente. Mande-me o post em questão para eu averiguar.

Todos os posts, não está replicando aqui pra mim...

@pedxz realizei a mudança e permaneceu igual....

No meu lado eu vejo o seguinte


Tente limpar o cache do fórum.

Veja a imagem abaixo.

https://i.imgur.com/LvYNwxf.png

Tente limpar o cache. Diga o navegador usado.

Edit:

Perfeito @pedxz.

Pessoal, notei o que acontece: quando estou conectado em alguma conta o que deveria ficar com a cor do grupo fica transparente, porém, quando estou desconctado as cores do grupo são aplicadas.

Conectado


Desconectado

Altere novamente para

Código:

(function($) {
    'use strict';
 
    $(function() {
 
        $('.post').each(function() {
 
            const $post = $(this);
            const color = $post.find('.nameuserp01 span').css('color');
 
            $post.find('.resurgp01, .capitap01, .topic-title a').attr('style', 'background-color: ' + color + '');
        });
 
    });
}(jQuery));

Obrigado, pessoal!

Super resolveu!!!

@Connor R.: Obrigado!

Tópico resolvido Movido para "Questões resolvidas".