1 Resultado encontrado para 293c4e

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 ============================================ */