Como eu deixo a aparência do meu fórum desse jeito?

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

Resolvido Como eu deixo a aparência do meu fórum desse jeito?

Mensagem por Nicholas Turner Fox em 18/10/14, 05:47 pm

Olá ^^
Atualmente meu fórum está desse jeito:
http://i.imgur.com/ZoYRmSk.png

Como podem ver, dificulta a leitura da descrição;
Gostaria de deixar ele desse jeito:
http://i.imgur.com/3ATcDTu.png

Gostaria que aparecesse as mensagens do tópico, de forma que bastasse clicar encima que fosse direto para a mensagem :v

Agradeço desde já


Última edição por Nicholas Turner Fox em 23/10/14, 07:40 pm, editado 1 vez(es)
avatar

Nicholas Turner Fox
Nível 4

Masculino
Inscrito dia : 28/06/2014
Mensagens : 31
Pontos Ativos : 53

Ver perfil do usuário http://got-rpg.forumeiros.com

Resolvido Re: Como eu deixo a aparência do meu fórum desse jeito?

Mensagem por Sennior em 19/10/14, 03:33 am

Saudações,

Preciso de tua Folha de Estilo CSS para que eu possa fazer algumas modificações diretamente nela.
Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Como eu deixo a aparência do meu fórum desse jeito?

Mensagem por Nicholas Turner Fox em 20/10/14, 09:14 pm

Código:
/************FONTES****************/

    @font-face {
      font-family: 'Wire One';
      font-style: normal;
      font-weight: 400;
      src: local('Wire One'), local('WireOne'), url(http://themes.googleusercontent.com/static/fonts/wireone/v3/fas9dl2wmMkt5rCu-aBez_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
    }

    @font-face {
      font-family: 'Amatic SC';
      font-style: normal;
      font-weight: 400;
      src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://themes.googleusercontent.com/static/fonts/amaticsc/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }

     @font-face { font-family: "sueellen"; src: url('http://themes.googleusercontent.com/static/fonts/sueellenfrancisco/v2/TwHX4vSxMUnJUdEz1JIgrrtXaZAN_aGv07JTA91X2HI.woff'); }
     
    @font-face { font-family: "caviardreams"; src: url('http://static.tumblr.com/4yxykdm/xXTlrecqr/caviardreams.ttf'); }

    /************FIM DAS FONTES****************/

    .postbody .content {
    text-align:justify;
      padding:60px;
    }
    input#message {
    color: white!important;
    }
    .chatbox .post {
    background-color:#030303;
      border-bottom:none;
        padding:1px;
    }
    #chatbox_footer {
    background-color: transparent;
    }
    .chatbox_row_1 {
       padding-right: 20px;
         padding-left: 20px;
      font-size:11px;
       text-transform:none;
       background-color:  transparent;
      text-align:left;
       }
    .chatbox_row_2 {
       padding-right: 20px;
         padding-left: 20px;
      font-size:11px;
       text-transform:none;
       background-color:  transparent;
      text-align:left;
       }
    .chatbox_row_3 {
       padding-right: 20px;
         padding-left: 20px;
      font-size:11px;
      text-transform:none;
       background-color:  transparent;
      text-align:left;
       }

    #content-container div#left {
    background:url('');
      top: 0;
    left: 0;
    }
    .reck {
      text-align:center;
      text-transform:none;
      align:center;
      float:center;
        margin-top:150px;
      height:150px;
      background-color:#07080F;
      border-bottom: 4px solid #160101;
      color:#bcbcbc;
    }
    .postprofile {
    background-image: url(http://i48.tinypic.com/2aikcns.jpg);
    border-left: 9px double #120707;
    border-radius: 0 0 100px 0 / 0 0 50px 0;
    box-shadow: 0 2px 5px #000;
    color: #d4d4d4;
    float: right;
    font-family: arial;
    font-size: 12px;
    line-heighr: 90%;
    text-align: center;
    text-transform: uppercase;
    width: 220px;
    top: -27pc;
    }

    .rck {
        text-align:center;
        align:center;
        text-transform:none;
        padding-top:150px;
      float:center;
        margin-top:150px;
      font-family:tulpen one;
      font-size:50px;
      color:#bcbcbc;
    }
    .forabg li.row dd.topics {
    background: #070303;
    position: relative;
      padding-left:0px;
      padding-right:0px;
    left: 53px;
    bottom: -30px;
    width: 87px;
    padding-bottom: 10px;
    height: 11px;
    font-size: 9px;
    text-transform: uppercase;
    }
    .forabg li.row dd.posts {
    background: #070303;
    position: relative;
    left: 59px;
        padding-left:0px;
      padding-right:0px;
    bottom: -30px;
    width: 87px;
    height: 11px;
    font-size: 9px;
    padding-bottom: 10px;
    text-transform: uppercase;
    }
    .forabg li.row dd.lastpost {
      text-align:left;
      text-transform:uppercase;
      font-family:tahoma;
      font-size:10px;
    border-bottom: 10px solid #070303;
      border-right: 10px solid #070303;
      border-left: 10px solid #070303;
      border-top: 30px solid #070303;
    width: 175px;
    margin-left: 35px;
      margin-top:0px;
    background-color: #070303;
    padding: 7px !important;
    padding-top: 35px !important;
    box-shadow: 0px 0px 5px black;
    }
    ::-webkit-scrollbar {width: 8px;height: 13px;background-color: #07080F;}
    ::-webkit-scrollbar-thumb{background-color: #040101;}  
    .module {
    text-align:center;
      background-color:transparent;
    }
    .module .h3 {
    visibility:hidden;
    }
    .module .h3 {
    visibility:hidden;
    display: none;
    }
    li.header dd, li.header dt {
    margin-top: 10px;
    text-align: center;
    }
    .module .h3 {
    visibility:hidden;
    }
    a.mainmenu {
    background-color:
    transparent;
    padding: 3px;
    margin-top: 30px!important;
    margin-right: -8px !important;
    font-weight: 400!important;
    font-family: helvetica,Serif !important;
    font-size: 11px;
    color:
    #A1A1A1;
    width: 880px;
    text-transform: uppercase;
    border-bottom: 3px solid
    #2e222b;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    a.mainmenu:hover {
    background-color:
    transparent;
    padding: 3px;
    margin-top: 30px!important;
    margin-right: -8px !important;
    font-weight: 400!important;
    font-family: helvetica,Serif !important;
    font-size: 11px;
      color:transparent;
    text-shadow: 0px 0px 1px #A1A1A1;
    width: 880px;
    text-transform: uppercase;
    border-bottom: 3px solid
    #120c10;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .module .h3 {
    visibility:hidden;
    }
    #textarea_content {    
    margin-top: 3px;
    }
    #chatbox {
      background-color:#000000;
    }
    .chatbox-members{
    background-color:#000000;
    }
    #chatbox_header {
    background-color:transparent;
    }
    .opacity img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;}
    .opacity div {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opac div {
      opacity:0.8;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opac:hover div {
      opacity:0.8;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opacity:hover div {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }

    .opac {
      opacity:0.1;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opac:hover {
      opacity:0.9;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    }



    #wrap {
    background-color: #000000;
    border: 4px solid #;
    box-shadow: 0 0 10px 2px #000000;
    }
    p {
    overflow: auto;
    max-height: 300px;
    display: block;
    margin: auto;
    text-transform: uppercase;
    font-size: 9px;
    }
    .h3 {
    font-size: 12px;
    text-transform: uppercase;
    text-align: left;
    text-shadow: 1px 1px 1px #000000;
    letter-spacing: 0px;}
    li.header dl.icon {
    height: 42px;
      background-color:#120c10;
      border-bottom: 0px dotted #2e222b;
      background-repeat:repeat;
    font-family:arial;
    letter-spacing: 2px;
    padding: 10px 6px 0px;
    font-size: 8px;
    text-align: center;
    text-shadow: 0 2px 2px black;
    text-transform: uppercase;
    vertical-align: middle;
    }
      .table-title h2 {
    color: #BDBDBD;
      text-shadow: 1px 1px 1px #000000;
    font-family: wire one;
    font-size: 40px;
    letter-spacing: 4px;
    font-style: normal;
    text-transform: uppercase;
    }
    ul.forums {
    background: #030303;
        margin-top:-0px;
    background-repeat: repeat-yes;
    border-radius: 0px 0px 0px 0px;
    border-bottom: 8px solid #2e222b;
      box-shadow:0px 2px 8px #000000;
    }
    .desc9 {
      border-bottom:10px solid #70303;
      border-right: 10px solid #120c10;
      border-radius: 100px 0px 0px 100px;
     background-color:#120707;
    background-repeat: repeat;
      text-transform:uppercase;
    color: #565656;
      font-family:arial;
    display: block;
    font-size: 9.5px;
    line-height: 100%;
    margin-left: 70px;
    margin-top: 5px;
    padding: 10px;
    text-align: justify;
    text-shadow: 0px 0px 2px #000000;
    width: auto;
    letter-spacing: 0px;
    }
    .desc8 {
      border-bottom:10px solid #070303;
      border-right: 10px solid #070303;
      border-left: 10px solid #070303;
     background-color:#120707;
    background-repeat: repeat;
      text-transform:uppercase;
    color: #565656;
      font-family:arial;
    display: block;
    font-size: 9.5px;
    line-height: 100%;
    margin-left: 70px;
    margin-top: 5px;
    padding: 0px;
    text-align: justify;
    text-shadow: 0px 0px 2px #000000;
    width: auto;
    letter-spacing: 0px;
    }
    a.forumtitle {
      color:#bfbcbb;
    background-color: #070303;
    border-radius: 500px 0px 0px 0px;
      display: block;
      letter-spacing:2px;
      font-family:caviardreams;
    float: center;
    font-size: 18px;
    margin-bottom: -20px;
    margin-top: 10px;
    margin-left: 70px;
    padding: 3px;
    text-align: center;
    text-transform: lowercase;
    width: auto;
    height: 15px;
      text-shadow: 1px 1px 1px #000000;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    a.forumtitle:hover {
      margin-left: 70px;
      color:transparent;
      border-radius: 500px 0px 0px 0px;
    background-color: #070303;
    border-radius: 0px 0px 0px 0px;
      display: block;
      letter-spacing:2px;
      font-family:caviardreams;
    float: center;
      text-decoration:none;
    font-size: 18px;
    margin-bottom: -20px;
    margin-top: 10px;
    margin-left: 70px;
    padding: 3px;
    text-align: center;
    text-transform: uppercase;
    width: auto;
    height: 15px;
      text-shadow: 0px 0px 1px #BDBDBD;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .formdesc a:link, .formdesc a:visited, .formdesc a:active {
    background-color: transparent;
    color: #bdbdbd;
    font-size: 8px;
    letter-spacing: 1px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc a:link:hover {
    background-color: transparent;
    color: #ffffff;
    font-size: 8px;
    letter-spacing: 2px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc {
      border: 1px solid #120707;
    background-color: #120707;
    border-radius: 10px 10px 10px 10px;
      margin-bottom:-22px;
    display: block;
    font-size: 8px;
    margin-top: 5px;
    padding: 3px;
    text-align: center;
    text-shadow: 1px 1px 0 #COLOR;
      text-transform: uppercase;
    }
    p em b a.gensmall {
    font-family: Tulpen One;
    font-size: 30px;
      line-height:100%;
    letter-spacing: 0px;
    font-style: normal;
    text-align: center;
    text-transform: none;
    }
    p em {
    margin: 4px;
    color: transparent;
    display: block;
      width: 500px;
      margin-left:250px;
     align: center;
      line-height:100%;
    }



    .post {
    background: #030303;
    background-repeat: repeat;
    background-position: center;
      border-bottom: 8px solid #104E8B;
      padding:10px 10px 10px 10px;
      color:#070303;
    }
    .postprofile dd {
    text-align: left;
    }
    .postprofile dd, .postprofile dt {
    margin-top: 10px;
    margin-right: 5px;
    margin-left: 5px;
    }
    dl.codebox {
      background-color:#2B1313;
      background-image:url('http://illiweb.com/fa/pbucket.gif');
      border-radius: 15px 15px 15px 15px;
    color:white;
        text-transform:none;
      border: 1px solid #120707;
    }
    .spoiler_content.hidden {
      background-color:#2B1313;
      background-image:url('http://illiweb.com/fa/pbucket.gif');
      border-radius: 15px 15px 15px 15px;
    color:white;
      text-transform:none;
      border: 1px solid #120707;
    }
    blockquote {
      background-color:#2B1313;
      background-image:url('http://illiweb.com/fa/pbucket.gif');
      border-radius: 15px 15px 15px 15px;
    color:white;
        text-transform:none;
      border: 1px solid #120707;
    }
    .topics {
    text-shadow: 1px 1px 1px #000000;
    }
    .posts {
    text-shadow: 1px 1px 1px #000000;
    }
    .lastpost {
    text-shadow: 1px 1px 1px #000000;
    text-align:center;
    align:center;
    }
    .postprofile{
    text-align: center;
    }
    .postprofile dt a img {
    box-shadow: 1px 1px 2px #000000;
    margin-top: 0px;
    width:200px;
      margin-bottom:8px;
      height:400px;
    }

    p.author {
      background-image: url('http://i48.tinypic.com/2aikcns.jpg');
    position: relative;
    right: -7em;
    color:#e3e3e3;
    background-color:#000000;
    text-align: center;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 3px !important;
    text-transform: lowercase;
      box-shadow: 0px 2px 5px #000000;
    }
    .postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {
    color: #d4d4d4;  
    font-family: Wire One;
    font-size: 30px;
    line-height: 40%;
    font-weight:800;
      margin-bottom:-15px;
    letter-spacing: 1px;
    font-style:normal;
      text-transform:uppercase;
    text-decoration: none;
      text-shadow: 1px 1px 1px #000000;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .postprofile a:hover {  
        margin-top:0px;
    font-family: Wire One;
    font-size: 30px;
    letter-spacing: 3px;
    font-style:normal;
      text-transform:uppercase;
    text-shadow: 1px 1px 1px #000000;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }

    .subs a {
      text-transform:uppercase;
      text-color:#E7E7E7;
      font-size:9px;
    border-left: 4px solid #07080F;
    margin: 0px;
    padding: 2px;
          -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .subs a:active, .subs a:hover {
      background-color:#070303;
      text-transform:uppercase;
      color:#E7E7E7;
    border-left: 40px solid #07080F;
    margin: 0px;
    padding: 2px 0px 0px;
          -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .formdesc a:link, .formdesc a:visited, .formdesc a:active {
    background-color: transparent;
    color: #E1E1E1;
    font-size: 8px;
    letter-spacing: 1px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc a:link:hover {
    background-color: transparent;
    color: #E1E1E1;
    font-size: 8px;
    letter-spacing: 2px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc {

    background-color: #070303;
      border: solid 1px #070303;
    border-radius: 0px 0px 50px 50px;
      margin-bttom:-20px;
      width:400px;
      height:auto;
    float:center;
      position:relative;
      display:block;
      align:center;
    font-size: 8px;
    margin-top: 5px;
    text-align: center;
    text-shadow: 1px 1px 0 #COLOR;
      text-transform: uppercase;
    }


    /************LEGENDAS*********/

    #main-content em{
      font-size:0px
    }
    #main-content em::before{
      content:'Legenda: ';
      font-size:25px;
      font-style:normal;
      opacity: 0.0;
    }
    #main-content em b *{
      font-size:20px;
      font-style:normal;
      font-align:justify;
      font-family: ubuntu condensed;
      text-transform:lowercase;
    }
    #main-content em b *::hover{
      font-size:40px;
      font-style:normal;
      font-align:center;
      font-family:dorsa;
      text-transform: uppercase;
    }
    #main-content em b a::before{
      content:' • ';color:black
    }
    #main-content em b:first-child a::before{
      content:''
    }
    #main-content em,
    #main-content em *:link{
      cursor:default;
      color:inherit
    }

    /************FIM DAS LEGENDAS*********/

    /*-------------INICIO TABLON BLACKEST NIGHT BY PYRITE WOLF DE OUR SOURCE CODE!-------------*/
    /*-------------COLORES! HERMOSOS COLORES!-------------*/
    /*letra de negritas,cosas tachadas, subtitulos y título principal, links y botones (verde sersi, bah)*/
    #blackestnight b,#blackestnight s,#blackestnight #h1, #blackestnight #h2, #blackestnight a, #bnbot {
        color: #6c5065 !important;}
    /*letra general de la derecha, awards, créditos, staff*/
    .bnc3, #bnder, #bnaward span,.bnstaff span {color: #888;}
    /*letra principal*/
    #bnizq {color: #999;}
    /*fondo del cuerpo, textos descriptivos de staff y awards, fondo de texto de los botones*/
    #blackestnight, #bnaward span, .bnstaff span,#bnbot  {background: #333;}
    /*fondo de la caja de la derecha, cajas de awards, créditos, nombres del staff y de awards, links de staff y awards*/
    #bnder,.bnc3,.bnc2, #bnaward b,#bnaward a,.bnstaff b, .bnstaff a {background: #222;}
    /*fondo de las cajas principales de contenido*/
    #bnizq {background: #171717;}
    /*color de barra de navegación*/
    #blackestnight ::-webkit-scrollbar-thumb:horizontal, #blackestnight ::-webkit-scrollbar-thumb:vertical {background:#6c5065;}
    /*-------------IMAGENES SERSIS-------------*/
    /*primer boton*/
    .bn1 {background: url('http://imageshack.us/a/img28/2277/fogoconedebarra.png');}
    /*segundo boton*/
    .bn2 {background: url('http://imageshack.us/a/img12/8993/arconedebarra.png');}
    /*tercer boton*/
    .bn3 {background: url('http://img843.imageshack.us/img843/6158/guaconedebarra.png');}


    /*-------------CODES, CODES DEL TABLON, SERSIS CODES DEL TABLON (?)-------------*/
    /*cajas*/
    #blackestnight {position: relative;text-align: justify;margin: auto; width: 75%;border-radius: 10px; padding: 10px 15px 10px 50px;font: 12px ubuntu condensed;line-height:13px;right: -4%;}
    #bnder {border-radius: 10px; padding:5px 10px;font-size:11px; max-height: 125px; overflow: auto;line-height:12px;}
    #bnd {width: 170px;float:right;position: relative;}
    #bnizq {height: 105px; overflow: auto;margin-right: 175px; border-radius: 10px; padding:5px 10px;}
    .bncaja {overflow: hidden;}
    .bnc2 {text-align: center;border-radius: 10px; padding: 10px;}
    .bnc3 {border-radius: 10px; padding: 10px;height:215px;overflow-y: auto;overflow-x: hidden;}
    .bnescondida {width: 0px;padding: 0px;height: 0px;}
    /*Awards*/
    #bnaward {display: inline-block;height: 225px;padding: 5px 0px; width: 18%; margin: 0 0.5%;border-radius: 10px;background-position: center !important;background-size: 250% !important;}
    #bnaward b,#bnaward span,#bnaward a {opacity: 0;}
    #bnaward:hover b,#bnaward:hover span,#bnaward:hover a {opacity: 0.9;}
    #bnaward b {display: block; text-align: center;border-radius: 5px; margin:100px 5px 2px 5px;}
    #bnaward span {padding: 2px;display: block; border-radius: 5px; text-align: center;margin:0px 5px 2px 5px;height: 50px; overflow: auto;}
    #bnaward a {text-decoration: none; text-transform: uppercase; letter-spacing: 2px;display: block; text-align: center;border-radius: 5px;margin:0px 5px;}
    #bnaward a:hover {background: #333;}
    /*Subtitulos*/
    #blackestnight #h1 {margin:0px -5px 2px -5px;padding: 0px 0px 2px 10px; border-bottom: 1px dotted;font-size: 15px; text-transform: uppercase;letter-spacing:2px;}
    #blackestnight #h2 {font-size: 20px; text-transform: uppercase;letter-spacing:2px;width: 225px; text-align: center; -webkit-transform: rotate(90deg);transform: rotate(90deg);-moz-transform: rotate(90deg);position: absolute; top: 120px; right: -125px;}
    #blackestnight #h3 {font-size: 9px; text-transform: uppercase;text-align: center; color: #888;position: absolute; top: 225px;width: 170px;}
    /*Staff*/
    .bnstaff {overflow: hidden;width: 40px; height: 40px; background-size: 200%;background-position: center;border-radius: 5px;margin-left: 5px;display: inline-block;position: absolute;top:140px;}
    .bns5 {top: 183px;margin: 0px;} .bns6 {top: 183px;left: 42px;} .bns7 {top: 183px;left: 84px;} .bns8 {top: 183px;left: 126px;}
    .bnstaff b, .bnstaff span, .bnstaff a {opacity: 0;}
    .bnstaff:hover b, .bnstaff:hover span, .bnstaff:hover a {opacity: 0.8;}
    .bnstaff:hover {left:0px;top: 140px;z-index: 999; width: 150px; height: 63px;padding:10px; background-size: 100%;margin: 0px;}
    .bnstaff b {display: block; text-align: center;border-radius: 5px; margin-bottom: 2px;}
    .bnstaff span {display: block;border-radius: 5px; text-align: center;margin-bottom: 2px;}
    .bnstaff a {text-decoration: none; text-transform: uppercase; letter-spacing: 2px;display: inline-block; text-align: center;border-radius: 5px;width: 48%; margin: 0px 1%; }
    .bnstaff a:hover {background: #333;}
    /*botones*/
    .bnboton {filter: gray;-webkit-filter: grayscale(100%);width: 65px; height: 65px; border: 5px solid #222;background-size: 200%; position: absolute; left: -30px;border-radius:10px;cursor: pointer;}
    .bnboton:hover {width: 130px;left:-95px;background-size: 100%;filter: none;-webkit-filter: grayscale(0%);}
    #bnbot {margin: 20px auto; opacity: 0; width: 65px; text-transform: uppercase;letter-spacing: 2px; font-size: 10px;border-radius: 5px;text-align: center;padding: 5px 0px; }
    .bnboton:hover #bnbot {opacity: 0.9;}
    .bn2 {top: 90px;}
    .bn3 {top: 170px;}
    .bnselec {filter: none;-webkit-filter: grayscale(0%);}

    /*generales*/
    #blackestnight * {-webkit-backface-visibility: hidden;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;}

    #blackestnight ::-webkit-scrollbar { width: 8px; height: 8px; } #blackestnight ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {display: none;} #blackestnight ::-webkit-scrollbar-track-piece {background: transparent;} #blackestnight ::-webkit-scrollbar-thumb:horizontal, #blackestnight ::-webkit-scrollbar-thumb:vertical {border-radius: 10px;}

    @font-face {
      font-family: 'Ubuntu Condensed';
      font-style: normal;
      font-weight: 400;
      src: local('Ubuntu Condensed'), local('UbuntuCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/ubuntucondensed/v3/DBCt-NXN57MTAFjitYxdrFzqCfRpIA3W6ypxnPISCPA.woff) format('woff');
    }
    /*-------------FIN TABLON BLACKEST NIGHT BY PYRITE WOLF DE OUR SOURCE CODE!-------------*/
    p em {
            margin-right: 200px !important;
            float: left;
            width: 500px !important;;
            color: white !important;
    }
    p em a {
            font-size: 15px; text-transform: Normal !important;
    }
    #page-body p.page-bottom {
            padding-top: 4px;
            position: initial !important;
    }
avatar

Nicholas Turner Fox
Nível 4

Masculino
Inscrito dia : 28/06/2014
Mensagens : 31
Pontos Ativos : 53

Ver perfil do usuário http://got-rpg.forumeiros.com

Resolvido Re: Como eu deixo a aparência do meu fórum desse jeito?

Mensagem por Sennior em 20/10/14, 10:23 pm

Saudações,

Altere pelo abaixo:
Código:
/************FONTES****************/

    @font-face {
      font-family: 'Wire One';
      font-style: normal;
      font-weight: 400;
      src: local('Wire One'), local('WireOne'), url(http://themes.googleusercontent.com/static/fonts/wireone/v3/fas9dl2wmMkt5rCu-aBez_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
    }

    @font-face {
      font-family: 'Amatic SC';
      font-style: normal;
      font-weight: 400;
      src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://themes.googleusercontent.com/static/fonts/amaticsc/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }

    @font-face { font-family: "sueellen"; src: url('http://themes.googleusercontent.com/static/fonts/sueellenfrancisco/v2/TwHX4vSxMUnJUdEz1JIgrrtXaZAN_aGv07JTA91X2HI.woff'); }
   
    @font-face { font-family: "caviardreams"; src: url('http://static.tumblr.com/4yxykdm/xXTlrecqr/caviardreams.ttf'); }

    /************FIM DAS FONTES****************/

    .postbody .content {
    text-align:justify;
      padding:60px;
    }
    input#message {
    color: white!important;
    }
    .chatbox .post {
    background-color:#030303;
      border-bottom:none;
        padding:1px;
    }
    #chatbox_footer {
    background-color: transparent;
    }
    .chatbox_row_1 {
      padding-right: 20px;
        padding-left: 20px;
      font-size:11px;
      text-transform:none;
      background-color:  transparent;
      text-align:left;
      }
    .chatbox_row_2 {
      padding-right: 20px;
        padding-left: 20px;
      font-size:11px;
      text-transform:none;
      background-color:  transparent;
      text-align:left;
      }
    .chatbox_row_3 {
      padding-right: 20px;
        padding-left: 20px;
      font-size:11px;
      text-transform:none;
      background-color:  transparent;
      text-align:left;
      }

    #content-container div#left {
    background:url('');
      top: 0;
    left: 0;
    }
    .reck {
      text-align:center;
      text-transform:none;
      align:center;
      float:center;
        margin-top:150px;
      height:150px;
      background-color:#07080F;
      border-bottom: 4px solid #160101;
      color:#bcbcbc;
    }
    .postprofile {
    background-image: url(http://i48.tinypic.com/2aikcns.jpg);
    border-left: 9px double #120707;
    border-radius: 0 0 100px 0 / 0 0 50px 0;
    box-shadow: 0 2px 5px #000;
    color: #d4d4d4;
    float: right;
    font-family: arial;
    font-size: 12px;
    line-heighr: 90%;
    text-align: center;
    text-transform: uppercase;
    width: 220px;
    top: -27pc;
    }

    .rck {
        text-align:center;
        align:center;
        text-transform:none;
        padding-top:150px;
      float:center;
        margin-top:150px;
      font-family:tulpen one;
      font-size:50px;
      color:#bcbcbc;
    }
    .forabg li.row dd.topics {
    background: #070303;
    position: relative;
      padding-left:0px;
      padding-right:0px;
    left: 53px;
    bottom: -30px;
    width: 87px;
    padding-bottom: 10px;
    height: 11px;
    font-size: 9px;
    text-transform: uppercase;
    }
    .forabg li.row dd.posts {
    background: #070303;
    position: relative;
    left: 59px;
        padding-left:0px;
      padding-right:0px;
    bottom: -30px;
    width: 87px;
    height: 11px;
    font-size: 9px;
    padding-bottom: 10px;
    text-transform: uppercase;
    }
    .forabg li.row dd.lastpost {
      text-align:left;
      text-transform:uppercase;
      font-family:tahoma;
      font-size:10px;
    border-bottom: 10px solid #070303;
      border-right: 10px solid #070303;
      border-left: 10px solid #070303;
      border-top: 30px solid #070303;
    width: 175px;
    margin-left: 35px;
      margin-top:0px;
    background-color: #070303;
    padding: 7px !important;
    padding-top: 35px !important;
    box-shadow: 0px 0px 5px black;
    }
    ::-webkit-scrollbar {width: 8px;height: 13px;background-color: #07080F;}
    ::-webkit-scrollbar-thumb{background-color: #040101;} 
    .module {
    text-align:center;
      background-color:transparent;
    }
    .module .h3 {
    visibility:hidden;
    }
    .module .h3 {
    visibility:hidden;
    display: none;
    }
    li.header dd, li.header dt {
    margin-top: 10px;
    text-align: center;
    }
    .module .h3 {
    visibility:hidden;
    }
    a.mainmenu {
    background-color:
    transparent;
    padding: 3px;
    margin-top: 30px!important;
    margin-right: -8px !important;
    font-weight: 400!important;
    font-family: helvetica,Serif !important;
    font-size: 11px;
    color:
    #A1A1A1;
    width: 880px;
    text-transform: uppercase;
    border-bottom: 3px solid
    #2e222b;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    a.mainmenu:hover {
    background-color:
    transparent;
    padding: 3px;
    margin-top: 30px!important;
    margin-right: -8px !important;
    font-weight: 400!important;
    font-family: helvetica,Serif !important;
    font-size: 11px;
      color:transparent;
    text-shadow: 0px 0px 1px #A1A1A1;
    width: 880px;
    text-transform: uppercase;
    border-bottom: 3px solid
    #120c10;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .module .h3 {
    visibility:hidden;
    }
    #textarea_content {   
    margin-top: 3px;
    }
    #chatbox {
      background-color:#000000;
    }
    .chatbox-members{
    background-color:#000000;
    }
    #chatbox_header {
    background-color:transparent;
    }
    .opacity img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;}
    .opacity div {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opac div {
      opacity:0.8;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opac:hover div {
      opacity:0.8;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opacity:hover div {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }

    .opac {
      opacity:0.1;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opac:hover {
      opacity:0.9;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    }



    #wrap {
    background-color: #000000;
    border: 4px solid #;
    box-shadow: 0 0 10px 2px #000000;
    }
    p {
    overflow: auto;
    max-height: 300px;
    display: block;
    margin: auto;
    text-transform: uppercase;
    font-size: 9px;
    }
    .h3 {
    font-size: 12px;
    text-transform: uppercase;
    text-align: left;
    text-shadow: 1px 1px 1px #000000;
    letter-spacing: 0px;}
    li.header dl.icon {
    height: 42px;
      background-color:#120c10;
      border-bottom: 0px dotted #2e222b;
      background-repeat:repeat;
    font-family:arial;
    letter-spacing: 2px;
    padding: 10px 6px 0px;
    font-size: 8px;
    text-align: center;
    text-shadow: 0 2px 2px black;
    text-transform: uppercase;
    vertical-align: middle;
    }
      .table-title h2 {
    color: #BDBDBD;
      text-shadow: 1px 1px 1px #000000;
    font-family: wire one;
    font-size: 40px;
    letter-spacing: 4px;
    font-style: normal;
    text-transform: uppercase;
    }
    ul.forums {
    background: #030303;
        margin-top:-0px;
    background-repeat: repeat-yes;
    border-radius: 0px 0px 0px 0px;
    border-bottom: 8px solid #2e222b;
      box-shadow:0px 2px 8px #000000;
    }
    .desc9 {
      border-bottom:10px solid #70303;
      border-right: 10px solid #120c10;
      border-radius: 100px 0px 0px 100px;
    background-color:#120707;
    background-repeat: repeat;
      text-transform:uppercase;
    color: #565656;
      font-family:arial;
    display: block;
    font-size: 9.5px;
    line-height: 100%;
    margin-left: 70px;
    margin-top: 5px;
    padding: 10px;
    text-align: justify;
    text-shadow: 0px 0px 2px #000000;
    width: auto;
    letter-spacing: 0px;
    }
    .desc8 {
      border-bottom:10px solid #070303;
      border-right: 10px solid #070303;
      border-left: 10px solid #070303;
    background-color:#120707;
    background-repeat: repeat;
      text-transform:uppercase;
    color: #565656;
      font-family:arial;
    display: block;
    font-size: 9.5px;
    line-height: 100%;
    margin-left: 70px;
    margin-top: 5px;
    padding: 0px;
    text-align: justify;
    text-shadow: 0px 0px 2px #000000;
    width: auto;
    letter-spacing: 0px;
    }
a.forumtitle {
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
background-color: #070303;
border-radius: 500px 0 0 0;
color: #bfbcbb;
display: block;
float: center;
font-family: caviardreams;
font-size: 18px;
height: 15px;
letter-spacing: 2px;
margin-bottom: 30px;
margin-left: 70px;
margin-top: 10px;
padding: 3px;
text-align: center;
text-shadow: 1px 1px 1px #000;
text-transform: lowercase;
transition: all .5s ease-in-out;
width: auto;
}
dd.dterm {
text-align: center;
}
    a.forumtitle:hover {
      margin-left: 70px;
      color:transparent;
      border-radius: 500px 0px 0px 0px;
    background-color: #070303;
    border-radius: 0px 0px 0px 0px;
      display: block;
      letter-spacing:2px;
      font-family:caviardreams;
    float: center;
      text-decoration:none;
    font-size: 18px;
    margin-bottom: -20px;
    margin-top: 10px;
    margin-left: 70px;
    padding: 3px;
    text-align: center;
    text-transform: uppercase;
    width: auto;
    height: 15px;
      text-shadow: 0px 0px 1px #BDBDBD;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .formdesc a:link, .formdesc a:visited, .formdesc a:active {
    background-color: transparent;
    color: #bdbdbd;
    font-size: 8px;
    letter-spacing: 1px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc a:link:hover {
    background-color: transparent;
    color: #ffffff;
    font-size: 8px;
    letter-spacing: 2px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc {
      border: 1px solid #120707;
    background-color: #120707;
    border-radius: 10px 10px 10px 10px;
      margin-bottom:-22px;
    display: block;
    font-size: 8px;
    margin-top: 5px;
    padding: 3px;
    text-align: center;
    text-shadow: 1px 1px 0 #COLOR;
      text-transform: uppercase;
    }
    p em b a.gensmall {
    font-family: Tulpen One;
    font-size: 30px;
      line-height:100%;
    letter-spacing: 0px;
    font-style: normal;
    text-align: center;
    text-transform: none;
    }
    p em {
    margin: 4px;
    color: transparent;
    display: block;
      width: 500px;
      margin-left:250px;
    align: center;
      line-height:100%;
    }



    .post {
    background: #030303;
    background-repeat: repeat;
    background-position: center;
      border-bottom: 8px solid #104E8B;
      padding:10px 10px 10px 10px;
      color:#070303;
    }
    .postprofile dd {
    text-align: left;
    }
    .postprofile dd, .postprofile dt {
    margin-top: 10px;
    margin-right: 5px;
    margin-left: 5px;
    }
    dl.codebox {
      background-color:#2B1313;
      background-image:url('http://illiweb.com/fa/pbucket.gif');
      border-radius: 15px 15px 15px 15px;
    color:white;
        text-transform:none;
      border: 1px solid #120707;
    }
    .spoiler_content.hidden {
      background-color:#2B1313;
      background-image:url('http://illiweb.com/fa/pbucket.gif');
      border-radius: 15px 15px 15px 15px;
    color:white;
      text-transform:none;
      border: 1px solid #120707;
    }
    blockquote {
      background-color:#2B1313;
      background-image:url('http://illiweb.com/fa/pbucket.gif');
      border-radius: 15px 15px 15px 15px;
    color:white;
        text-transform:none;
      border: 1px solid #120707;
    }
    .topics {
    text-shadow: 1px 1px 1px #000000;
    }
    .posts {
    text-shadow: 1px 1px 1px #000000;
    }
    .lastpost {
    text-shadow: 1px 1px 1px #000000;
    text-align:center;
    align:center;
    }
    .postprofile{
    text-align: center;
    }
    .postprofile dt a img {
    box-shadow: 1px 1px 2px #000000;
    margin-top: 0px;
    width:200px;
      margin-bottom:8px;
      height:400px;
    }

    p.author {
      background-image: url('http://i48.tinypic.com/2aikcns.jpg');
    position: relative;
    right: -7em;
    color:#e3e3e3;
    background-color:#000000;
    text-align: center;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 3px !important;
    text-transform: lowercase;
      box-shadow: 0px 2px 5px #000000;
    }
    .postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {
    color: #d4d4d4; 
    font-family: Wire One;
    font-size: 30px;
    line-height: 40%;
    font-weight:800;
      margin-bottom:-15px;
    letter-spacing: 1px;
    font-style:normal;
      text-transform:uppercase;
    text-decoration: none;
      text-shadow: 1px 1px 1px #000000;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .postprofile a:hover { 
        margin-top:0px;
    font-family: Wire One;
    font-size: 30px;
    letter-spacing: 3px;
    font-style:normal;
      text-transform:uppercase;
    text-shadow: 1px 1px 1px #000000;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }

    .subs a {
      text-transform:uppercase;
      text-color:#E7E7E7;
      font-size:9px;
    border-left: 4px solid #07080F;
    margin: 0px;
    padding: 2px;
          -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .subs a:active, .subs a:hover {
      background-color:#070303;
      text-transform:uppercase;
      color:#E7E7E7;
    border-left: 40px solid #07080F;
    margin: 0px;
    padding: 2px 0px 0px;
          -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .formdesc a:link, .formdesc a:visited, .formdesc a:active {
    background-color: transparent;
    color: #E1E1E1;
    font-size: 8px;
    letter-spacing: 1px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc a:link:hover {
    background-color: transparent;
    color: #E1E1E1;
    font-size: 8px;
    letter-spacing: 2px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc {

    background-color: #070303;
      border: solid 1px #070303;
    border-radius: 0px 0px 50px 50px;
      margin-bttom:-20px;
      width:400px;
      height:auto;
    float:center;
      position:relative;
      display:block;
      align:center;
    font-size: 8px;
    margin-top: 5px;
    text-align: center;
    text-shadow: 1px 1px 0 #COLOR;
      text-transform: uppercase;
    }


    /************LEGENDAS*********/

    #main-content em{
      font-size:0px
    }
    #main-content em::before{
      content:'Legenda: ';
      font-size:25px;
      font-style:normal;
      opacity: 0.0;
    }
    #main-content em b *{
      font-size:20px;
      font-style:normal;
      font-align:justify;
      font-family: ubuntu condensed;
      text-transform:lowercase;
    }
    #main-content em b *::hover{
      font-size:40px;
      font-style:normal;
      font-align:center;
      font-family:dorsa;
      text-transform: uppercase;
    }
    #main-content em b a::before{
      content:' • ';color:black
    }
    #main-content em b:first-child a::before{
      content:''
    }
    #main-content em,
    #main-content em *:link{
      cursor:default;
      color:inherit
    }

    /************FIM DAS LEGENDAS*********/

    /*-------------INICIO TABLON BLACKEST NIGHT BY PYRITE WOLF DE OUR SOURCE CODE!-------------*/
    /*-------------COLORES! HERMOSOS COLORES!-------------*/
    /*letra de negritas,cosas tachadas, subtitulos y título principal, links y botones (verde sersi, bah)*/
    #blackestnight b,#blackestnight s,#blackestnight #h1, #blackestnight #h2, #blackestnight a, #bnbot {
        color: #6c5065 !important;}
    /*letra general de la derecha, awards, créditos, staff*/
    .bnc3, #bnder, #bnaward span,.bnstaff span {color: #888;}
    /*letra principal*/
    #bnizq {color: #999;}
    /*fondo del cuerpo, textos descriptivos de staff y awards, fondo de texto de los botones*/
    #blackestnight, #bnaward span, .bnstaff span,#bnbot  {background: #333;}
    /*fondo de la caja de la derecha, cajas de awards, créditos, nombres del staff y de awards, links de staff y awards*/
    #bnder,.bnc3,.bnc2, #bnaward b,#bnaward a,.bnstaff b, .bnstaff a {background: #222;}
    /*fondo de las cajas principales de contenido*/
    #bnizq {background: #171717;}
    /*color de barra de navegación*/
    #blackestnight ::-webkit-scrollbar-thumb:horizontal, #blackestnight ::-webkit-scrollbar-thumb:vertical {background:#6c5065;}
    /*-------------IMAGENES SERSIS-------------*/
    /*primer boton*/
    .bn1 {background: url('http://imageshack.us/a/img28/2277/fogoconedebarra.png');}
    /*segundo boton*/
    .bn2 {background: url('http://imageshack.us/a/img12/8993/arconedebarra.png');}
    /*tercer boton*/
    .bn3 {background: url('http://img843.imageshack.us/img843/6158/guaconedebarra.png');}


    /*-------------CODES, CODES DEL TABLON, SERSIS CODES DEL TABLON (?)-------------*/
    /*cajas*/
    #blackestnight {position: relative;text-align: justify;margin: auto; width: 75%;border-radius: 10px; padding: 10px 15px 10px 50px;font: 12px ubuntu condensed;line-height:13px;right: -4%;}
    #bnder {border-radius: 10px; padding:5px 10px;font-size:11px; max-height: 125px; overflow: auto;line-height:12px;}
    #bnd {width: 170px;float:right;position: relative;}
    #bnizq {height: 105px; overflow: auto;margin-right: 175px; border-radius: 10px; padding:5px 10px;}
    .bncaja {overflow: hidden;}
    .bnc2 {text-align: center;border-radius: 10px; padding: 10px;}
    .bnc3 {border-radius: 10px; padding: 10px;height:215px;overflow-y: auto;overflow-x: hidden;}
    .bnescondida {width: 0px;padding: 0px;height: 0px;}
    /*Awards*/
    #bnaward {display: inline-block;height: 225px;padding: 5px 0px; width: 18%; margin: 0 0.5%;border-radius: 10px;background-position: center !important;background-size: 250% !important;}
    #bnaward b,#bnaward span,#bnaward a {opacity: 0;}
    #bnaward:hover b,#bnaward:hover span,#bnaward:hover a {opacity: 0.9;}
    #bnaward b {display: block; text-align: center;border-radius: 5px; margin:100px 5px 2px 5px;}
    #bnaward span {padding: 2px;display: block; border-radius: 5px; text-align: center;margin:0px 5px 2px 5px;height: 50px; overflow: auto;}
    #bnaward a {text-decoration: none; text-transform: uppercase; letter-spacing: 2px;display: block; text-align: center;border-radius: 5px;margin:0px 5px;}
    #bnaward a:hover {background: #333;}
    /*Subtitulos*/
    #blackestnight #h1 {margin:0px -5px 2px -5px;padding: 0px 0px 2px 10px; border-bottom: 1px dotted;font-size: 15px; text-transform: uppercase;letter-spacing:2px;}
    #blackestnight #h2 {font-size: 20px; text-transform: uppercase;letter-spacing:2px;width: 225px; text-align: center; -webkit-transform: rotate(90deg);transform: rotate(90deg);-moz-transform: rotate(90deg);position: absolute; top: 120px; right: -125px;}
    #blackestnight #h3 {font-size: 9px; text-transform: uppercase;text-align: center; color: #888;position: absolute; top: 225px;width: 170px;}
    /*Staff*/
    .bnstaff {overflow: hidden;width: 40px; height: 40px; background-size: 200%;background-position: center;border-radius: 5px;margin-left: 5px;display: inline-block;position: absolute;top:140px;}
    .bns5 {top: 183px;margin: 0px;} .bns6 {top: 183px;left: 42px;} .bns7 {top: 183px;left: 84px;} .bns8 {top: 183px;left: 126px;}
    .bnstaff b, .bnstaff span, .bnstaff a {opacity: 0;}
    .bnstaff:hover b, .bnstaff:hover span, .bnstaff:hover a {opacity: 0.8;}
    .bnstaff:hover {left:0px;top: 140px;z-index: 999; width: 150px; height: 63px;padding:10px; background-size: 100%;margin: 0px;}
    .bnstaff b {display: block; text-align: center;border-radius: 5px; margin-bottom: 2px;}
    .bnstaff span {display: block;border-radius: 5px; text-align: center;margin-bottom: 2px;}
    .bnstaff a {text-decoration: none; text-transform: uppercase; letter-spacing: 2px;display: inline-block; text-align: center;border-radius: 5px;width: 48%; margin: 0px 1%; }
    .bnstaff a:hover {background: #333;}
    /*botones*/
    .bnboton {filter: gray;-webkit-filter: grayscale(100%);width: 65px; height: 65px; border: 5px solid #222;background-size: 200%; position: absolute; left: -30px;border-radius:10px;cursor: pointer;}
    .bnboton:hover {width: 130px;left:-95px;background-size: 100%;filter: none;-webkit-filter: grayscale(0%);}
    #bnbot {margin: 20px auto; opacity: 0; width: 65px; text-transform: uppercase;letter-spacing: 2px; font-size: 10px;border-radius: 5px;text-align: center;padding: 5px 0px; }
    .bnboton:hover #bnbot {opacity: 0.9;}
    .bn2 {top: 90px;}
    .bn3 {top: 170px;}
    .bnselec {filter: none;-webkit-filter: grayscale(0%);}

    /*generales*/
    #blackestnight * {-webkit-backface-visibility: hidden;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;}

    #blackestnight ::-webkit-scrollbar { width: 8px; height: 8px; } #blackestnight ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {display: none;} #blackestnight ::-webkit-scrollbar-track-piece {background: transparent;} #blackestnight ::-webkit-scrollbar-thumb:horizontal, #blackestnight ::-webkit-scrollbar-thumb:vertical {border-radius: 10px;}

    @font-face {
      font-family: 'Ubuntu Condensed';
      font-style: normal;
      font-weight: 400;
      src: local('Ubuntu Condensed'), local('UbuntuCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/ubuntucondensed/v3/DBCt-NXN57MTAFjitYxdrFzqCfRpIA3W6ypxnPISCPA.woff) format('woff');
    }
    /*-------------FIN TABLON BLACKEST NIGHT BY PYRITE WOLF DE OUR SOURCE CODE!-------------*/
    p em {
            margin-right: 200px !important;
            float: left;
            width: 500px !important;;
            color: white !important;
    }
    p em a {
            font-size: 15px; text-transform: Normal !important;
    }
    #page-body p.page-bottom {
            padding-top: 4px;
            position: initial !important;
    }

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Como eu deixo a aparência do meu fórum desse jeito?

Mensagem por Nicholas Turner Fox em 21/10/14, 03:09 pm

Não ficou do jeito que eu quria :c
avatar

Nicholas Turner Fox
Nível 4

Masculino
Inscrito dia : 28/06/2014
Mensagens : 31
Pontos Ativos : 53

Ver perfil do usuário http://got-rpg.forumeiros.com

Resolvido Re: Como eu deixo a aparência do meu fórum desse jeito?

Mensagem por [F]lames em 21/10/14, 09:57 pm

Olá,

Altere seu CSS para este:
Código:
/************FONTES****************/

    @font-face {
      font-family: 'Wire One';
      font-style: normal;
      font-weight: 400;
      src: local('Wire One'), local('WireOne'), url(http://themes.googleusercontent.com/static/fonts/wireone/v3/fas9dl2wmMkt5rCu-aBez_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
    }

    @font-face {
      font-family: 'Amatic SC';
      font-style: normal;
      font-weight: 400;
      src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://themes.googleusercontent.com/static/fonts/amaticsc/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }

    @font-face { font-family: "sueellen"; src: url('http://themes.googleusercontent.com/static/fonts/sueellenfrancisco/v2/TwHX4vSxMUnJUdEz1JIgrrtXaZAN_aGv07JTA91X2HI.woff'); }
   
    @font-face { font-family: "caviardreams"; src: url('http://static.tumblr.com/4yxykdm/xXTlrecqr/caviardreams.ttf'); }

    /************FIM DAS FONTES****************/

    .postbody .content {
    text-align:justify;
      padding:60px;
    }
    input#message {
    color: white!important;
    }
    .chatbox .post {
    background-color:#030303;
      border-bottom:none;
        padding:1px;
    }
    #chatbox_footer {
    background-color: transparent;
    }
    .chatbox_row_1 {
      padding-right: 20px;
        padding-left: 20px;
      font-size:11px;
      text-transform:none;
      background-color:  transparent;
      text-align:left;
      }
    .chatbox_row_2 {
      padding-right: 20px;
        padding-left: 20px;
      font-size:11px;
      text-transform:none;
      background-color:  transparent;
      text-align:left;
      }
    .chatbox_row_3 {
      padding-right: 20px;
        padding-left: 20px;
      font-size:11px;
      text-transform:none;
      background-color:  transparent;
      text-align:left;
      }

    #content-container div#left {
    background:url('');
      top: 0;
    left: 0;
    }
    .reck {
      text-align:center;
      text-transform:none;
      align:center;
      float:center;
        margin-top:150px;
      height:150px;
      background-color:#07080F;
      border-bottom: 4px solid #160101;
      color:#bcbcbc;
    }
    .postprofile {
    background-image: url(http://i48.tinypic.com/2aikcns.jpg);
    border-left: 9px double #120707;
    border-radius: 0 0 100px 0 / 0 0 50px 0;
    box-shadow: 0 2px 5px #000;
    color: #d4d4d4;
    float: right;
    font-family: arial;
    font-size: 12px;
    line-heighr: 90%;
    text-align: center;
    text-transform: uppercase;
    width: 220px;
    top: -27pc;
    }

    .rck {
        text-align:center;
        align:center;
        text-transform:none;
        padding-top:150px;
      float:center;
        margin-top:150px;
      font-family:tulpen one;
      font-size:50px;
      color:#bcbcbc;
    }
    .forabg li.row dd.topics {
    background: #070303;
    position: relative;
      padding-left:0px;
      padding-right:0px;
    left: 53px;
    bottom: -30px;
    width: 87px;
    padding-bottom: 10px;
    height: 11px;
    font-size: 9px;
    text-transform: uppercase;
    }
    .forabg li.row dd.posts {
    background: #070303;
    position: relative;
    left: 59px;
        padding-left:0px;
      padding-right:0px;
    bottom: -30px;
    width: 87px;
    height: 11px;
    font-size: 9px;
    padding-bottom: 10px;
    text-transform: uppercase;
    }
    .forabg li.row dd.lastpost {
      text-align:left;
      text-transform:uppercase;
      font-family:tahoma;
      font-size:10px;
    border-bottom: 10px solid #070303;
      border-right: 10px solid #070303;
      border-left: 10px solid #070303;
      border-top: 30px solid #070303;
    width: 175px;
    margin-left: 35px;
      margin-top:0px;
    background-color: #070303;
    padding: 7px !important;
    padding-top: 35px !important;
    box-shadow: 0px 0px 5px black;
    }
    ::-webkit-scrollbar {width: 8px;height: 13px;background-color: #07080F;}
    ::-webkit-scrollbar-thumb{background-color: #040101;} 
    .module {
    text-align:center;
      background-color:transparent;
    }
    .module .h3 {
    visibility:hidden;
    }
    .module .h3 {
    visibility:hidden;
    display: none;
    }
    li.header dd, li.header dt {
    margin-top: 10px;
    text-align: center;
    }
    .module .h3 {
    visibility:hidden;
    }
    a.mainmenu {
    background-color:
    transparent;
    padding: 3px;
    margin-top: 30px!important;
    margin-right: -8px !important;
    font-weight: 400!important;
    font-family: helvetica,Serif !important;
    font-size: 11px;
    color:
    #A1A1A1;
    width: 880px;
    text-transform: uppercase;
    border-bottom: 3px solid
    #2e222b;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    a.mainmenu:hover {
    background-color:
    transparent;
    padding: 3px;
    margin-top: 30px!important;
    margin-right: -8px !important;
    font-weight: 400!important;
    font-family: helvetica,Serif !important;
    font-size: 11px;
      color:transparent;
    text-shadow: 0px 0px 1px #A1A1A1;
    width: 880px;
    text-transform: uppercase;
    border-bottom: 3px solid
    #120c10;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .module .h3 {
    visibility:hidden;
    }
    #textarea_content {   
    margin-top: 3px;
    }
    #chatbox {
      background-color:#000000;
    }
    .chatbox-members{
    background-color:#000000;
    }
    #chatbox_header {
    background-color:transparent;
    }
    .opacity img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;}
    .opacity div {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opac div {
      opacity:0.8;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opac:hover div {
      opacity:0.8;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opacity:hover div {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }

    .opac {
      opacity:0.1;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opac:hover {
      opacity:0.9;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .opacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    }



    #wrap {
    background-color: #000000;
    border: 4px solid #;
    box-shadow: 0 0 10px 2px #000000;
    }
    p {
    overflow: auto;
    max-height: 300px;
    display: block;
    margin: auto;
    text-transform: uppercase;
    font-size: 9px;
    }
    .h3 {
    font-size: 12px;
    text-transform: uppercase;
    text-align: left;
    text-shadow: 1px 1px 1px #000000;
    letter-spacing: 0px;}
    li.header dl.icon {
    height: 42px;
      background-color:#120c10;
      border-bottom: 0px dotted #2e222b;
      background-repeat:repeat;
    font-family:arial;
    letter-spacing: 2px;
    padding: 10px 6px 0px;
    font-size: 8px;
    text-align: center;
    text-shadow: 0 2px 2px black;
    text-transform: uppercase;
    vertical-align: middle;
    }
      .table-title h2 {
    color: #BDBDBD;
      text-shadow: 1px 1px 1px #000000;
    font-family: wire one;
    font-size: 40px;
    letter-spacing: 4px;
    font-style: normal;
    text-transform: uppercase;
    }
    ul.forums {
    background: #030303;
        margin-top:-0px;
    background-repeat: repeat-yes;
    border-radius: 0px 0px 0px 0px;
    border-bottom: 8px solid #2e222b;
      box-shadow:0px 2px 8px #000000;
    }
    .desc9 {
      border-bottom:10px solid #70303;
      border-right: 10px solid #120c10;
      border-radius: 100px 0px 0px 100px;
    background-color:#120707;
    background-repeat: repeat;
      text-transform:uppercase;
    color: #565656;
      font-family:arial;
    display: block;
    font-size: 9.5px;
    line-height: 100%;
    margin-left: 70px;
    margin-top: 5px;
    padding: 10px;
    text-align: justify;
    text-shadow: 0px 0px 2px #000000;
    width: auto;
    letter-spacing: 0px;
    }
    .desc8 {
      border-bottom:10px solid #070303;
      border-right: 10px solid #070303;
      border-left: 10px solid #070303;
    background-color:#120707;
    background-repeat: repeat;
      text-transform:uppercase;
    color: #565656;
      font-family:arial;
    display: block;
    font-size: 9.5px;
    line-height: 100%;
    margin-left: 70px;
    margin-top: 5px;
    padding: 0px;
    text-align: justify;
    text-shadow: 0px 0px 2px #000000;
    width: auto;
    letter-spacing: 0px;
    }
    ul.topiclist.forums li.row dl.icon dd.dterm {
      text-align: center;
    }
    ul.topiclist.forums li.row dl.icon dd.dterm h3.hierarchy {
    margin-bottom: 10px;
    display: block !important;
    }
    a.forumtitle {
      -moz-transition: all .5s ease-in-out;
      -o-transition: all .5s ease-in-out;
      -webkit-transition: all .5s ease-in-out;
      background-color: #070303;
      border-radius: 500px 0 0 0;
      color: #bfbcbb;
      display: block;
      float: center;
      font-family: 'Algerian';
      font-weight: normal;
      font-size: 20px;
      height: 15px;
      letter-spacing: 2px;
      margin-bottom: -20px;
      margin-left: 70px;
      margin-top: 10px;
      padding: 3px;
      text-align: center;
      text-shadow: 1px 1px 1px #000;
      text-transform: lowercase;
      transition: all .5s ease-in-out;
      width: auto;
    }
    a.forumtitle:hover {
      margin-left: 70px;
      color:transparent;
      border-radius: 500px 0px 0px 0px;
    background-color: #070303;
    border-radius: 0px 0px 0px 0px;
      display: block;
      letter-spacing:2px;
      font-family:caviardreams;
    float: center;
      text-decoration:none;
    font-size: 18px;
    margin-bottom: -20px;
    margin-top: 10px;
    margin-left: 70px;
    padding: 3px;
    text-align: center;
    text-transform: uppercase;
    width: auto;
    height: 15px;
      text-shadow: 0px 0px 1px #BDBDBD;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .formdesc a:link, .formdesc a:visited, .formdesc a:active {
    background-color: transparent;
    color: #bdbdbd;
    font-size: 8px;
    letter-spacing: 1px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc a:link:hover {
    background-color: transparent;
    color: #ffffff;
    font-size: 8px;
    letter-spacing: 2px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc {
      border: 1px solid #120707;
    background-color: #120707;
    border-radius: 10px 10px 10px 10px;
      margin-bottom:-22px;
    display: block;
    font-size: 8px;
    margin-top: 5px;
    padding: 3px;
    text-align: center;
    text-shadow: 1px 1px 0 #COLOR;
      text-transform: uppercase;
    }
    p em b a.gensmall {
    font-family: Tulpen One;
    font-size: 30px;
      line-height:100%;
    letter-spacing: 0px;
    font-style: normal;
    text-align: center;
    text-transform: none;
    }
    p em {
    margin: 4px;
    color: transparent;
    display: block;
      width: 500px;
      margin-left:250px;
    align: center;
      line-height:100%;
    }



    .post {
    background: #030303;
    background-repeat: repeat;
    background-position: center;
      border-bottom: 8px solid #104E8B;
      padding:10px 10px 10px 10px;
      color:#070303;
    }
    .postprofile dd {
    text-align: left;
    }
    .postprofile dd, .postprofile dt {
    margin-top: 10px;
    margin-right: 5px;
    margin-left: 5px;
    }
    dl.codebox {
      background-color:#2B1313;
      background-image:url('http://illiweb.com/fa/pbucket.gif');
      border-radius: 15px 15px 15px 15px;
    color:white;
        text-transform:none;
      border: 1px solid #120707;
    }
    .spoiler_content.hidden {
      background-color:#2B1313;
      background-image:url('http://illiweb.com/fa/pbucket.gif');
      border-radius: 15px 15px 15px 15px;
    color:white;
      text-transform:none;
      border: 1px solid #120707;
    }
    blockquote {
      background-color:#2B1313;
      background-image:url('http://illiweb.com/fa/pbucket.gif');
      border-radius: 15px 15px 15px 15px;
    color:white;
        text-transform:none;
      border: 1px solid #120707;
    }
    .topics {
    text-shadow: 1px 1px 1px #000000;
    }
    .posts {
    text-shadow: 1px 1px 1px #000000;
    }
    .lastpost {
    text-shadow: 1px 1px 1px #000000;
    text-align:center;
    align:center;
    }
    .postprofile{
    text-align: center;
    }
    .postprofile dt a img {
    box-shadow: 1px 1px 2px #000000;
    margin-top: 0px;
    width:200px;
      margin-bottom:8px;
      height:400px;
    }

    p.author {
      background-image: url('http://i48.tinypic.com/2aikcns.jpg');
    position: relative;
    right: -7em;
    color:#e3e3e3;
    background-color:#000000;
    text-align: center;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 3px !important;
    text-transform: lowercase;
      box-shadow: 0px 2px 5px #000000;
    }
    .postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {
    color: #d4d4d4; 
    font-family: Wire One;
    font-size: 30px;
    line-height: 40%;
    font-weight:800;
      margin-bottom:-15px;
    letter-spacing: 1px;
    font-style:normal;
      text-transform:uppercase;
    text-decoration: none;
      text-shadow: 1px 1px 1px #000000;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .postprofile a:hover { 
        margin-top:0px;
    font-family: Wire One;
    font-size: 30px;
    letter-spacing: 3px;
    font-style:normal;
      text-transform:uppercase;
    text-shadow: 1px 1px 1px #000000;
      -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }

    .subs a {
      text-transform:uppercase;
      text-color:#E7E7E7;
      font-size:9px;
    border-left: 4px solid #07080F;
    margin: 0px;
    padding: 2px;
          -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .subs a:active, .subs a:hover {
      background-color:#070303;
      text-transform:uppercase;
      color:#E7E7E7;
    border-left: 40px solid #07080F;
    margin: 0px;
    padding: 2px 0px 0px;
          -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    }
    .formdesc a:link, .formdesc a:visited, .formdesc a:active {
    background-color: transparent;
    color: #E1E1E1;
    font-size: 8px;
    letter-spacing: 1px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc a:link:hover {
    background-color: transparent;
    color: #E1E1E1;
    font-size: 8px;
    letter-spacing: 2px;
    padding: 3px;
    text-transform: uppercase;
    }
    .formdesc {

    background-color: #070303;
      border: solid 1px #070303;
    border-radius: 0px 0px 50px 50px;
      margin-bttom:-20px;
      width:400px;
      height:auto;
    float:center;
      position:relative;
      display:block;
      align:center;
    font-size: 8px;
    margin-top: 5px;
    text-align: center;
    text-shadow: 1px 1px 0 #COLOR;
      text-transform: uppercase;
    }


    /************LEGENDAS*********/

    #main-content em{
      font-size:0px
    }
    #main-content em::before{
      content:'Legenda: ';
      font-size:25px;
      font-style:normal;
      opacity: 0.0;
    }
    #main-content em b *{
      font-size:20px;
      font-style:normal;
      font-align:justify;
      font-family: ubuntu condensed;
      text-transform:lowercase;
    }
    #main-content em b *::hover{
      font-size:40px;
      font-style:normal;
      font-align:center;
      font-family:dorsa;
      text-transform: uppercase;
    }
    #main-content em b a::before{
      content:' • ';color:black
    }
    #main-content em b:first-child a::before{
      content:''
    }
    #main-content em,
    #main-content em *:link{
      cursor:default;
      color:inherit
    }

    /************FIM DAS LEGENDAS*********/

    /*-------------INICIO TABLON BLACKEST NIGHT BY PYRITE WOLF DE OUR SOURCE CODE!-------------*/
    /*-------------COLORES! HERMOSOS COLORES!-------------*/
    /*letra de negritas,cosas tachadas, subtitulos y título principal, links y botones (verde sersi, bah)*/
    #blackestnight b,#blackestnight s,#blackestnight #h1, #blackestnight #h2, #blackestnight a, #bnbot {
        color: #6c5065 !important;}
    /*letra general de la derecha, awards, créditos, staff*/
    .bnc3, #bnder, #bnaward span,.bnstaff span {color: #888;}
    /*letra principal*/
    #bnizq {color: #999;}
    /*fondo del cuerpo, textos descriptivos de staff y awards, fondo de texto de los botones*/
    #blackestnight, #bnaward span, .bnstaff span,#bnbot  {background: #333;}
    /*fondo de la caja de la derecha, cajas de awards, créditos, nombres del staff y de awards, links de staff y awards*/
    #bnder,.bnc3,.bnc2, #bnaward b,#bnaward a,.bnstaff b, .bnstaff a {background: #222;}
    /*fondo de las cajas principales de contenido*/
    #bnizq {background: #171717;}
    /*color de barra de navegación*/
    #blackestnight ::-webkit-scrollbar-thumb:horizontal, #blackestnight ::-webkit-scrollbar-thumb:vertical {background:#6c5065;}
    /*-------------IMAGENES SERSIS-------------*/
    /*primer boton*/
    .bn1 {background: url('http://imageshack.us/a/img28/2277/fogoconedebarra.png');}
    /*segundo boton*/
    .bn2 {background: url('http://imageshack.us/a/img12/8993/arconedebarra.png');}
    /*tercer boton*/
    .bn3 {background: url('http://img843.imageshack.us/img843/6158/guaconedebarra.png');}


    /*-------------CODES, CODES DEL TABLON, SERSIS CODES DEL TABLON (?)-------------*/
    /*cajas*/
    #blackestnight {position: relative;text-align: justify;margin: auto; width: 75%;border-radius: 10px; padding: 10px 15px 10px 50px;font: 12px ubuntu condensed;line-height:13px;right: -4%;}
    #bnder {border-radius: 10px; padding:5px 10px;font-size:11px; max-height: 125px; overflow: auto;line-height:12px;}
    #bnd {width: 170px;float:right;position: relative;}
    #bnizq {height: 105px; overflow: auto;margin-right: 175px; border-radius: 10px; padding:5px 10px;}
    .bncaja {overflow: hidden;}
    .bnc2 {text-align: center;border-radius: 10px; padding: 10px;}
    .bnc3 {border-radius: 10px; padding: 10px;height:215px;overflow-y: auto;overflow-x: hidden;}
    .bnescondida {width: 0px;padding: 0px;height: 0px;}
    /*Awards*/
    #bnaward {display: inline-block;height: 225px;padding: 5px 0px; width: 18%; margin: 0 0.5%;border-radius: 10px;background-position: center !important;background-size: 250% !important;}
    #bnaward b,#bnaward span,#bnaward a {opacity: 0;}
    #bnaward:hover b,#bnaward:hover span,#bnaward:hover a {opacity: 0.9;}
    #bnaward b {display: block; text-align: center;border-radius: 5px; margin:100px 5px 2px 5px;}
    #bnaward span {padding: 2px;display: block; border-radius: 5px; text-align: center;margin:0px 5px 2px 5px;height: 50px; overflow: auto;}
    #bnaward a {text-decoration: none; text-transform: uppercase; letter-spacing: 2px;display: block; text-align: center;border-radius: 5px;margin:0px 5px;}
    #bnaward a:hover {background: #333;}
    /*Subtitulos*/
    #blackestnight #h1 {margin:0px -5px 2px -5px;padding: 0px 0px 2px 10px; border-bottom: 1px dotted;font-size: 15px; text-transform: uppercase;letter-spacing:2px;}
    #blackestnight #h2 {font-size: 20px; text-transform: uppercase;letter-spacing:2px;width: 225px; text-align: center; -webkit-transform: rotate(90deg);transform: rotate(90deg);-moz-transform: rotate(90deg);position: absolute; top: 120px; right: -125px;}
    #blackestnight #h3 {font-size: 9px; text-transform: uppercase;text-align: center; color: #888;position: absolute; top: 225px;width: 170px;}
    /*Staff*/
    .bnstaff {overflow: hidden;width: 40px; height: 40px; background-size: 200%;background-position: center;border-radius: 5px;margin-left: 5px;display: inline-block;position: absolute;top:140px;}
    .bns5 {top: 183px;margin: 0px;} .bns6 {top: 183px;left: 42px;} .bns7 {top: 183px;left: 84px;} .bns8 {top: 183px;left: 126px;}
    .bnstaff b, .bnstaff span, .bnstaff a {opacity: 0;}
    .bnstaff:hover b, .bnstaff:hover span, .bnstaff:hover a {opacity: 0.8;}
    .bnstaff:hover {left:0px;top: 140px;z-index: 999; width: 150px; height: 63px;padding:10px; background-size: 100%;margin: 0px;}
    .bnstaff b {display: block; text-align: center;border-radius: 5px; margin-bottom: 2px;}
    .bnstaff span {display: block;border-radius: 5px; text-align: center;margin-bottom: 2px;}
    .bnstaff a {text-decoration: none; text-transform: uppercase; letter-spacing: 2px;display: inline-block; text-align: center;border-radius: 5px;width: 48%; margin: 0px 1%; }
    .bnstaff a:hover {background: #333;}
    /*botones*/
    .bnboton {filter: gray;-webkit-filter: grayscale(100%);width: 65px; height: 65px; border: 5px solid #222;background-size: 200%; position: absolute; left: -30px;border-radius:10px;cursor: pointer;}
    .bnboton:hover {width: 130px;left:-95px;background-size: 100%;filter: none;-webkit-filter: grayscale(0%);}
    #bnbot {margin: 20px auto; opacity: 0; width: 65px; text-transform: uppercase;letter-spacing: 2px; font-size: 10px;border-radius: 5px;text-align: center;padding: 5px 0px; }
    .bnboton:hover #bnbot {opacity: 0.9;}
    .bn2 {top: 90px;}
    .bn3 {top: 170px;}
    .bnselec {filter: none;-webkit-filter: grayscale(0%);}

    /*generales*/
    #blackestnight * {-webkit-backface-visibility: hidden;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;}

    #blackestnight ::-webkit-scrollbar { width: 8px; height: 8px; } #blackestnight ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {display: none;} #blackestnight ::-webkit-scrollbar-track-piece {background: transparent;} #blackestnight ::-webkit-scrollbar-thumb:horizontal, #blackestnight ::-webkit-scrollbar-thumb:vertical {border-radius: 10px;}

    @font-face {
      font-family: 'Ubuntu Condensed';
      font-style: normal;
      font-weight: 400;
      src: local('Ubuntu Condensed'), local('UbuntuCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/ubuntucondensed/v3/DBCt-NXN57MTAFjitYxdrFzqCfRpIA3W6ypxnPISCPA.woff) format('woff');
    }
    /*-------------FIN TABLON BLACKEST NIGHT BY PYRITE WOLF DE OUR SOURCE CODE!-------------*/
    p em {
            margin-right: 200px !important;
            float: left;
            width: 500px !important;;
            color: white !important;
    }
    p em a {
            font-size: 15px; text-transform: Normal !important;
    }
    #page-body p.page-bottom {
            padding-top: 4px;
            position: initial !important;
    }

Passar bem.
avatar

[F]lames
Usuário destaque

Masculino
Inscrito dia : 05/10/2012
Mensagens : 866
Pontos Ativos : 1207

Ver perfil do usuário http://www.bestskins.net/

Resolvido Re: Como eu deixo a aparência do meu fórum desse jeito?

Mensagem por Nicholas Turner Fox em 22/10/14, 11:03 am

Funcionou perfeitamente, mas não teria como colocar como nesse fórum?
http://www.rpghogwarts.org/forum

Com a imagem e o título no centro, com esse quadrado por trás ><
avatar

Nicholas Turner Fox
Nível 4

Masculino
Inscrito dia : 28/06/2014
Mensagens : 31
Pontos Ativos : 53

Ver perfil do usuário http://got-rpg.forumeiros.com

Resolvido Re: Como eu deixo a aparência do meu fórum desse jeito?

Mensagem por Alex Habilidade em 23/10/14, 07:02 pm

Olá,

Primeiramente, adicione o código abaixo em sua folha CSS:
Código:

.descricao {
background-color: #090909;
color: #696969;
font-size: 11px;
margin: -45px auto 0;
padding: 15px;
text-align: center;
width: 530px;
}

Salve!

Feito isso, vá na categoria que quer colocar a descrição e clique em modificar, dentro da descrição substitua sua descrição por essa:
Código:

<div class="descricao">
   Corvinal, Grifinória, Lufa-lufa ou Sonserina? Faça aqui o teste do Chapéu Seletor!
</div>

E salvar!
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Como eu deixo a aparência do meu fórum desse jeito?

Mensagem por Sennior em 24/10/14, 02:28 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

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

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