Ajustar o rank dos membros

Detalhes da questão

Endereço do fórum: https://naointeressa.forumeiros.com
Versão do fórum: ModernBB

Descrição

Saudações,


eu queria saber o porquê o título do meu rank fica assim: https://prnt.sc/115755k  com a sensação de estar maior e com a linha reta na imagenzinha, queria que fosse assim: https://prnt.sc/11575rg  .  Como faço para resolver esse problema?

Desde já, obrigado e no aguardo.

Isso é basicamente o estilo de rank da sua folha de estilo CSS, você poderia me passar o site em que viu o modelo de rank que deseja?

Claro, clique Aqui.

Muito bem, poderia me passar sua folha de estilo para que possamos mudar o estilo?

Part. 2 

Código:

.codebox {
    background-color: #354147!important;
    border-color: rgba(0,0,0,0.44)!important;
    border-radius: 3px!important;
    color: #FFF;
    font-size: 14px!important;
    line-height: 1.5!important;
    padding: 8px 16px 8px 10px!important;
}

.codebox .fa-code-copy-button {
    position: absolute;
    right: 10px;
    top: 8px;
    color: #fff;
}

.codebox:not(.spoiler) dt {
    font-size: 1.3rem!important;
    text-align: left!important;
}

.codebox dt {
    color: rgba(255,255,255,0.44)!important;
    margin-bottom: 3px!important;
    border-bottom: none!important;
}

.spoiler_content .codebox:not(.spoiler) dt {
    color: rgba(255,255,255,0.44)!important;
    background-color: transparent;
}

.spoiler_content .codebox dt:after { display: none; }

.codebox code {
    max-height: 400px!important;
    white-space: nowrap!important;
    color: #e6e1dc!important;
    margin: 0!important;
    font-size: 15px!important;
}

.hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-attribute, .hljs-string, .hljs-variable, .hljs-template-variable, .hljs-strong, .hljs-emphasis, .hljs-quote,
.hljs-title, .hljs-attr, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-keyword, .hljs-selector-tag, .hljs-type {
    color: #fff!important;
}

.spoiler {
    border: none!important;
    background-color: transparent!important;
    padding: 0!important;
    color: #212121;
}

.spoiler dt {
    background-color: rgba(0,0,0,0.22);
    border-radius: 3px;
    padding: 6px 11px;
    position: relative;
    color: #263238!important;
    font-size: 15px!important;
}

.spoiler dt:after, .spoiler_content .spoiler dt:after {
    content: "\f104";
    font-family: "IonIcons";
    line-height: 36px;
    pointer-events: none;
    position: absolute;
    right: 11px;
    top: 0;
}

.spoiler_content {
    border-left: 3px solid rgba(0,0,0,0.22);
    display: none;
    margin-top: 6px;
    padding-left: 22px!important;
    padding-bottom: 20px;
    padding: 2px;
}

/*--- OUTROS ELEMENTOS BBCODES ---*/
#preview .postbody table:not(.info-table),
#preview .postbody td,
div[class*='post--'] .postbody table:not(.info-table),

#preview .postbody .info-table,
#preview .postbody .info-table td,
div[class*='post--'] .postbody .info-table,
div[class*='post--'] .postbody .info-table td { border: none!important; }

hr { border-top-color: #444; }

.postbody .content table {
    border-collapse: collapse;
    border: solid 1px #c2c2c2;
    text-align: center;
    width: -webkit-fill-available;
}
.postbody .content table tr {
    border-bottom: solid 1px #d0d0d0;
}
.postbody .content table td, .postbody .content table th {
    padding: 15px 15px;
    border: none;
}

/*  FOOTER
**===================*/
.statistics-item strong a span, .statistics-item a:link, .statistics-item a:visited { color: #fff!important; }

.footerbar-system { padding: 20px 0; }

/**
 * Definicoes das Areas Iniciais:
 */
 
.fa-footer,
.fa-footer * { box-sizing: border-box; }
 
.fa-footer {
    font-family: "Segoe UI", "Open Sans", "Helvetica Neue", "Ubuntu", "Helvetica", "Arial", "Trebuchet MS", sans-serif;
    font-size: 14px;
    color: #f6fbff;
    font-weight: 300;
    line-height: 1.5;
    background-color: var(--black1);
}
 
/**
 * Tags Genericas:
 */
 
.fa-footer a {
    text-decoration: none;
    color: #192127;
    transition: all 200ms linear;
}
 
.fa-footer a:hover {
    border-bottom: solid 1px #091015;
    color: #fff;
}
 
/**
 * Sistema de Grid e ajustes das colunas genericas:
 */
 
.fa-footer .fa-footer-row {
    display: flex;
    flex-direction: row;
    padding: 0 15px;
}
 
.fa-footer .fa-footer-row .fa-footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
    padding: 15px 0;
    min-width: 200px;
}
 
.fa-footer .fa-footer-row .fa-footer-col:last-child { margin-right: 10px; }
 
.fa-footer .fa-footer-row .fa-footer-col .lead {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 10px;
}
 
.fa-footer .fa-footer-row .fa-footer-col p {
    font-size: 14px;
    line-height: 1.6;
    text-align: justify;
}
 
/**
 * Ajustes para a a coluna primarias:
 */
 
.fa-footer .fa-footer-row .fa-primary-footer-col {
    position: relative;
    flex-grow: 1;
}
 
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo img {
    width: 135px;
    margin: 0 30px;
}

#fa-footer-back-to-top {
   background-color: #add8e6;
       border-radius: 7px;
       bottom: 30px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, .1), inset 0 0 1px 1px rgba(0, 0, 0, .1);
       display: flex;
       justify-content: center;
       align-items: center;
       height: 50px;
       opacity: 0;
       position: fixed;
       left: 10px;
       text-align: center;
       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       transition: background-color .3s, opacity .5s, visibility .5s;
       visibility: hidden;
       width: 50px;
       z-index: 997;
}
#fa-footer-back-to-top:hover {
   background-color: #668690;
   cursor: pointer
}

#fa-footer-back-to-top:active {
   background-color: #6eb8eb
}

#fa-footer-back-to-top.show {
   opacity: 1;
   visibility: visible
}
#fa-footer-reload {
   background-color: #add8e6;
   border-radius: 7px;
   bottom: 30px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, .1), inset 0 0 1px 1px rgba(0, 0, 0, .1);
   display: inline-block;
   height: 50px;
   opacity: 0;
   position: fixed;
     padding-top: 15px;
   left: 10px;
     top: 450px;
   text-align: center;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   transition: background-color .3s, opacity .5s, visibility .5s;
   visibility: hidden;
   width: 50px;
   z-index: 999
}
#fa-footer-reload:hover {
   background-color: #668690;
   cursor: pointer
}

#fa-footer-reload:active {
   background-color: #6eb8eb
}

#fa-footer-reload.show {
   opacity: 1;
   visibility: visible
}
/**
 * Atribucoes Finais:
 */
 
.fa-footer .fa-footer-attr {
    text-align: center;
    padding: 20px;
    font-size: 16px;
    border-top: solid 1px #2a2e32;
    background-color: #24282b;
}

.fa-footer-logo:hover {
    -webkit-filter: drop-shadow(0px 5px 20px rgb(255,255,255)) grayscale(1);
  filter: drop-shadow(0px 0px 0px rgb(255,255,255)) grayscale(1);
}
 
/**
 * Ajustes para o footer do FA:
 */
 
#footer-copyright {
    background-color: var(--green5);
    border-top: solid 1px var(--green5);
    border-bottom: solid 1px var(--green6);
}
 
.statistics {
    box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.37);
}
 
/**
 * Responsive:
 */
 
@media screen and (max-width: 1000px) {
  .fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo img {
    margin: 0px;
  }
}
 
@media screen and (max-width: 850px) {
  .fa-footer .fa-footer-row {
    flex-wrap: wrap;
  }
 
  .fa-footer .fa-footer-row .fa-primary-footer-col {
    border-right: none;
  }
 
  .fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo {
    margin-bottom: 2%;
  }
 
  .fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-back-to-top {
    right: auto;
  }
 
  .fa-footer .fa-footer-row .fa-footer-col:nth-child(2) {
    margin-top: 2%;
  }
}

.admin-link {
    position: fixed;
    bottom: 20px;
    right: 10px;
    z-index: 999;
}

.admin-link a {
    padding: 10px;
    background-color: #add8e6;
    border-radius: 3px;
    transition: .2s ease;
    color: #fff;
    font-size: 13px;
}
.admin-link a:hover { background-color: #668690; }
 
.admin-link br { display: none; }

.statistics {
  display: none;
}
/*[!] EFEITO RAINBOW GP [!]*/

/* [!] GRUPOS, RANKS E ÍCONES [!] */

.rank {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    height: 35px;
    line-height: 35px;
    margin: 10px auto 0;
    width: 200px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.5);
    box-shadow: inset 1px 1px 1px 0px rgba(255,255,255,0.3);
    text-shadow: 0px 2px 2px rgba(0,0,0,.3);
}

.rank:before {
    float: left;
    width: 35px;
    height: 34px;
    line-height: 35px;
    background-color: rgba(0,0,0,0.2);
    text-align: center;
    font-size: 17px;
    color: #fff;
    font-family: 'Font Awesome 5 Free';
    border-right: 1px solid rgba(0,0,0,.5);
    box-shadow: 1px 0px 2px rgba(0,0,0,.2), inset 0px -1px 1px 1px rgba(255,255,255,0.3);
    text-shadow: 0px 2px 2px rgba(0,0,0,.3);
}
.rank.Supr{background-image: linear-gradient(124deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff);background-size: 1800% 1800%;animation: rainbow 5s linear infinite;}
    .rank.Supr:before{content: "\f521";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.adm{background-image: radial-gradient(circle, #ff0000, #db0a10, #b71317, #941719, #711919);background-size: 1800% 1800%;animation: rainbow 6s ease infinite;}
    .rank.adm:before{content: "\f085";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.cor{background-image: linear-gradient(to right, #666666, #5c5c5c, #525252, #484848, #3f3f3f, #373737, #2f2f2f, #282828, #202020, #181818, #0e0e0e, #000000);}
    .rank.cor:before{content: "\f0e3";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.gate{background: linear-gradient(to left, #690606 2%, #3d0404 50%, #2b0303 100%); color: white; font-weight: bold;}
    .rank.gate:before{content: "\f714";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.dsn{background: linear-gradient(to right, #000000, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #c0c0c0, #FFFFFF);background-size: 1800% 1800%;animation: rainbow 10s ease infinite;}
    .rank.dsn:before{content: "\f121";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    @keyframes rainbow {0% {background-position: 0% 82%;} 50% {background-position: 100% 19%;} 100% {background-position: 0% 82%;}}
    .rank.mai{background: linear-gradient(to left, #A4E2F2 2%, #21AACC 94%);}
    .rank.mai:before{content: "\f2c2";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.p2{background-image: linear-gradient(to right, #000000, #004002, #040038, #a98a01, #115000);color: #fff09c;background-size: 1800% 1800%;animation: rainbow 6s linear infinite;}
    .rank.p2:before {content: "\f21b";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.ap{background-image: linear-gradient(to left, #a0b8b5, #879a97, #6f7d7a, #57615f, #414645);}
    .rank.ap:before {content: "\f274";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.cce{background: linear-gradient(to left ,#000000 25%, #32a808 55%);}
    .rank.cce:before {content: "\f24e";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.cpos{background: linear-gradient(to right, #E6B273 0%, #F29727 74%);}
    .rank.cpos:before {content: "\f0c0";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.jr{background-image: linear-gradient(to right, #5c23be, #5139cb, #00731F, #3059e2, #1267eb);}
    .rank.jr:before{content: "\f1ea";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.exo{background-color: #000000; color: #e20303}
    .rank.exo:before{content: "\f714";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.exo:after{content: "\f714";margin-left: 5px;font-family: "Font Awesome 5 Free";}
    .rank.at{background-image: radial-gradient(circle, #00c400, #0ea200, #118100, #106200, #0c4400); color:#fdd050}
    .rank.at:before {content: "\f201";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.cof{background-image: linear-gradient(to right, #A6A1A1, #DBDBDB);}
    .rank.cof:before{content: "\f509";margin-right: 5px;font-family: "Font Awesome 5 Free";}
   
    /*Ranks dos UsuÃÆâ€Ãƒâ€šÃ‚¡rios*/
    .rank.mbr{background-color:#78866b}
    .rank.mbr:before{content: "\f4ad";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.ins{background-color:#1262B8;}
    .rank.ins:before{content: "\f02d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.sup{background-color:#23CC1A;}
    .rank.sup:before{content: "\f02d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.tre{background-color:#F21818;}
    .rank.tre:before{content: "\f02d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.prof{background-color:#821F82;}
    .rank.prof:before{content: "\f19d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.rond{background-color:#FF8400;}
    .rank.rond:before{content: "\f19d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.efe{background-color:#0DDEFA;}
    .rank.efe:before{content: "\f19d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.ldr{background: linear-gradient(to right, #009688 0%, #7986CB 100%);}
    .rank.ldr:before{content: "\f4ad";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.ref{background: linear-gradient(to right, #ccab04 0%, #904e00 100%);}
    .rank.ref:before{content: "\f5a2";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.com{background-color:#78866b}
    .rank.com:before{content: "\f4ad";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.trg{background-color:#78866b}
    .rank.trg:before{content: "\f4ad";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.lde{background-color:#78866b}
    .rank.lde:before{content: "\f4ad";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.cog{background-color:#103D09}
    .rank.cog:before{content: "\f559";margin-right: 5px;font-family: "Font Awesome 5 Free";}
    .rank.milit{background-color: #6C7578;color:#FFFFFF}
    .rank.milit:before{content: "\f5a2";margin-right: 5px;font-family: "Font Awesome 5 Free";}


Olá novamente!

Retire do seu CSS:

Spoiler:

E troque por:

Spoiler:

Olá, Latr!

Diminuiu um pouco, porém continua o bug da linha reta ao lado da imagenzinha, veja: https://prnt.sc/1160nab   . Como removo isso?

Era pra ter saido ao retirar

Código:


.rank:before {
    float: left;
    width: 35px;
    height: 34px;
    line-height: 35px;
    background-color: rgba(0,0,0,0.2);
    text-align: center;
    font-size: 17px;
    color: #fff;
    font-family: 'Font Awesome 5 Free';
    border-right: 1px solid rgba(0,0,0,.5);
    box-shadow: 1px 0px 2px rgba(0,0,0,.2), inset 0px -1px 1px 1px rgba(255,255,255,0.3);
    text-shadow: 0px 2px 2px rgba(0,0,0,.3);
}


Verifiquei e vi que o senhor não retirou.

Bugou, olha: https://prnt.sc/1160zin

Você retirou o código errado...

Retire esse:

Spoiler:

Deixe este

Spoiler:

Show. Pode fechar o tópico. Obrigado!!