Template de boas vindas (inicio)

Eu gostaria de um template de mensagem de inicio, igual a deste fórum:

http://percyjacksonrpgams.forumeiros.com/forum

Bom dia!

Adicione o código na mensagem da página principal:

Código:

<div id="pw-dexstarr">
   
   <div class="pw-ds-c1 pw-ds-caja">
      
      <div id="pw-ds-rojo">
         
         <div id="pw-ds-title">
             <span> SEJAM BEM VINDOS AO ACAMPAMENTO</span> MEIO SANGUE!
         </div>
         
         <div id="pw-ds-intro">
             O AMS É UM FÓRUM QUE DETÉM DE TUDO E MAIS UM POUCO DO MUNDO FANTÁSTICO NARRADO PELO NOSSO QUERIDO TIO RICK. SEJA UM SEMIDEUS, UMA CRIATURA, SEJA UM DOS NOSSOS! -Q
         </div>
          <span> </span>
         <center style="">
            
         </center><span> </span> <img src="IMAGEN 120X120" />
         <div id="pw-quicklinks">
             <a href="Link Ambient">Ambientación</a> <a href="Link reglas">Reglas</a> <a href="Link registros">Registros</a> <a href="Link fichas">Expedientes</a> <a href="Link pide rol">Pide Rol</a>
         </div>
         
      </div>
      
      <div id="pw-ds-negro">
         
         <div class="pw-ds-subtit">
             Últimas Noticias
         </div>
         
         <div class="pw-ds-box">
            
            <div class="pw-novedad">
                <strong>dd/mm/aaaa ❇</strong> Dex Starr hizo cosas malas.
            </div>
            
            <div class="pw-novedad">
                <strong>dd/mm/aaaa ❇</strong> Dex Starr hizo cosas malas.
            </div>
            
            <div class="pw-novedad">
                <strong>dd/mm/aaaa ❇</strong> Dex Starr hizo cosas malas.
            </div>
            
            <div class="pw-novedad">
                <strong>dd/mm/aaaa ❇</strong> Dex Starr hizo cosas malas.
            </div>
            
         </div>
         
         <div class="pw-ds-subtit">
             TRAMA
         </div>
         
         <div class="pw-ds-box">
             AS VAGAS PARA CANNONS AINDA NÃO FORAM TODAS PREENCHIDAS, ESTÁ ESPERANDO O QUE? CLIQUE <a href="http://percyjacksonrpgams.forumeiros.com/t1548-ficha-para-cannon">AQUI</a> E FAÇA FICHA PARA O PERSONAGEM QUE MAIS SE IDENTIFICA COM VOCÊ!
         </div>
         
      </div>
      
   </div>
   
   <div class="pw-ds-c2 pw-ds-caja">
      
      <div class="pw-ds-subtit">
          Awards
      </div>
      
      <div class="pw-ds-box">
         
         <div style="background: url('IMAGEN 272X89')" class="pw-ds-award">
            
            <p>
                <strong>NOMBRE</strong> PREMIO DADO
            </p>
            
         </div>
         
         <div style="background: url('IMAGEN 272X89')" class="pw-ds-award">
            
            <p>
                <strong>NOMBRE</strong> PREMIO DADO
            </p>
            
         </div>
         
         <div style="background: url('IMAGEN 272X89')" class="pw-ds-award">
            
            <p>
                <strong>NOMBRE</strong> PREMIO DADO
            </p>
            
         </div>
         
         <div style="background: url('IMAGEN 272X89')" class="pw-ds-award">
            
            <p>
                <strong>NOMBRE</strong> PREMIO DADO
            </p>
            
         </div>
         
         <div style="background: url('IMAGEN 272X89')" class="pw-ds-award">
            
            <p>
                <strong>NOMBRE</strong> PREMIO DADO
            </p>
            
         </div>
         
         <div style="background: url('IMAGEN 272X89')" class="pw-ds-award">
            
            <p>
                <strong>NOMBRE</strong> PREMIO DADO
            </p>
            
         </div>
         
      </div>
      
   </div>
   
   <div class="pw-ds-caja pw-ds-c3">
      
      <div id="pw-ds-rojo">
         
         <div class="pw-ds-subtit">
             Agradecimientos
         </div>
         
         <div class="pw-ds-box">
             Aquí puedes hablar de todas las personas sin las cuales tu foro no existiría.
         </div>
         
         <div class="pw-ds-subtit">
             Créditos
         </div>
         
         <div class="pw-ds-box">
             Aquí puedes hablar de todas las personas sin las cuales el contenido de tu foro no existiría (ambientación, sistemas, diseño, tablillas).
         </div>
         
      </div>
      
      <div class="pw-staff" id="pw-ds-negro">
         
         <div style="background:url('IMAGEN 130X80')">
             <strong>NOMBRE</strong> <a href="link a mp">MP</a>
         </div>
         
         <div style="background:url('IMAGEN 130X80')">
             <strong>NOMBRE</strong> <a href="link a mp">MP</a>
         </div>
         
         <div style="background:url('IMAGEN 130X80')">
             <strong>NOMBRE</strong> <a href="link a mp">MP</a>
         </div>
         
         <div style="background:url('IMAGEN 130X80')">
             <strong>NOMBRE</strong> <a href="link a mp">MP</a>
         </div>
         
      </div>
      
   </div>
   
   <div id="pw-ds-botones">
      
      <div class="pw-ds-b1 selec">
         
      </div>
      
      <div class="pw-ds-b2">
         
      </div>
      
      <div class="pw-ds-b3">
         
      </div>
      
   </div>
   
   <div id="credito">
       Código por <a href="http://sourcecode.jcink.net/index.php?showtopic=189&view=findpost&p=544">Pyrite Wolf</a> de SC
   </div>
</div>

Em seguida, acesse Visualização > Imagens e Cores > Cores > Folha de estilos CSS > e cole

Código:

#pw-dexstarr {
   border-left: 300px solid #3f3c51;
   font-family: dosis;
   font-size: 12px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   height: 350px;
   left: 12px;
   margin: auto;
   position: relative;
   width: 300px
 }
 
.pw-ds-box,.pw-ds-subtit {border-bottom: 1px solid #3f3c51}
 
.pw-staff div {
   border: 3px double #3f3c51;
   display: inline-blocK;
   font-size: 9px;
   height: 74px;
   margin: 2px 4px;
   position: relative;
   text-align: center;
   text-transform: uppercase;
   width: 124px
 }
 
#pw-ds-botones .selec {background: #3f3c51;cursor:default}
 
.pw-novedad {border-bottom: 1px dashed #3f3c51;padding:5px 0}
 
#pw-dexstarr #credito a,.pw-ds-caja b,.pw-staff a {color: #3f3c51}
 
#pw-dexstarr,#pw-ds-botones div,.pw-ds-award p,.pw-staff b {background: #333}
 
#pw-ds-rojo img,.pw-ds-award {border: 3px double #333}
 
#pw-quicklinks a {
   background: rgba(51,51,51,0.6);
   display: block;
   font-family: dosis;
   font-size: 9px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   letter-spacing: 2px;
   margin-left: 107px;
   margin-top: 1px;
   opacity: .7;
   padding: 1.65px 0;
   text-align: center;
   text-transform: uppercase
 }
 
#pw-dexstarr,#pw-quicklinks a {color: #ddd}
 
.pw-ds-box,.pw-staff a {background: #222}
 
#pw-ds-rojo {
   bottom: 0;
   left: 0;
   margin-right: 20px;
   position: absolute;
   top: 0;
   width: 280px
 }
 
   #pw-ds-rojo img {
      float: left;
      margin: 3px 3px 0 0;
      width: 100px
    }
 
#pw-ds-negro {
   bottom: 0;
   height: 330px;
   overflow: auto;
   position: absolute;
   right: 0;
   top: 0;
   width: 280px
 }
 
.pw-ds-box {
   font-family: dosis;
   font-size: 13px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   overflow: auto;
   padding: 5px;
   text-align: justify
 }
 
#pw-ds-title {
   font-family: inder;
   font-size: 20px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   letter-spacing: 2px;
   line-height: 16px;
   text-align: right;
   text-transform: uppercase
 }
 
.pw-ds-subtit {
   font-family: inder;
   font-size: 14px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   letter-spacing: 1px;
   text-transform: uppercase
 }
 
.pw-ds-box + .pw-ds-subtit {margin-top: 5px}
 
.pw-ds-award {
   display: inline-block;
   height: 87px;
   margin-bottom: 7px;
   width: 270px
 }
 
   .pw-ds-award:last-of-type,.pw-ds-award:nth-child(5) {margin-bottom: 0}
 
   .pw-ds-award:nth-child(5) {margin-right: 13px}
 
   .pw-ds-award p {
      display: block;
      height: 32px;
      margin: 21px auto;
      overflow: hidden;
      padding: 5px 0;
      text-align: center;
      width: 0
    }
 
      .pw-ds-award p b {display: block;text-transform:uppercase}
 
   .pw-ds-award:hover p {padding: 5px;width:150px}
 
.pw-staff a {
   bottom: 1px;
   display: block;
   left: 1px;
   opacity: .8;
   position: absolute;
   right: 1px
 }
 
.pw-staff b {
   display: block;
   left: 1px;
   position: absolute;
   right: 1px;
   top: 1px
 }
 
.pw-novedad:first-of-type {padding-top: 0}
 
.pw-novedad:last-of-type {border: 0;padding-bottom:0}
 
#pw-ds-title span {
   display: block;
   font-family: dosis;
   font-size: 7px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal
 }
 
#pw-ds-intro {
   font-family: dosis;
   font-size: 12px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   height: 190px;
   line-height: 14px;
   margin-top: 5px;
   overflow: auto;
   padding-right: 2px;
   position: relative;
   text-align: justify
 }
 
#pw-ds-intro+span {
   bottom: -150px;
   font-family: "times new roman";
   font-size: 100px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   opacity: .3;
   position: absolute;
   right: 0
 }
 
#pw-quicklinks {height: 100px;margin-top:3px}
 
   #pw-quicklinks *,.pw-ds-award * {
      -moz-transition: .5s;
      -webkit-transition: .5s;
      transition: .5s
    }
 
   #pw-quicklinks a:hover {opacity: 1}
 
#pw-ds-botones {
   bottom: 0;
   left: -312px;
   position: absolute
 }
 
   #pw-ds-botones div {
      cursor: pointer;
      height: 10px;
      margin-top: 2px;
      width: 10px
    }
 
#pw-dexstarr #credito {
   -moz-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   font-size: 7px;
   position: absolute;
   right: -50px;
   text-transform: uppercase;
   top: 53px;
   transform: rotate(90deg)
 }
 
#pw-dexstarr a {text-decoration: none}
 
.pw-ds-caja {
   display: none;
   left: -290px;
   position: absolute;
   right: 10px;
   top: 10px
 }
 
.pw-ds-c1 {display: block}

Olá!. Se você puder alterar a cor em geral dele, para laranja e branco, ficaria agradecido ^^'. Obrigado.

Manda CSS, Coloco laranja e branco.  

É esse o do Shek mesmo -q

Saudações,

Altere o código CSS pelo abaixo:

Código:

#pw-dexstarr {
  border-left: 300px solid  #9E4C00;
  font-family: dosis;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  height: 350px;
  left: 12px;
  margin: auto;
  position: relative;
  width: 300px
 }
 
.pw-ds-box,.pw-ds-subtit {border-bottom: 1px solid #3f3c51}
 
.pw-staff div {
  border: 3px double #3f3c51;
  display: inline-blocK;
  font-size: 9px;
  height: 74px;
  margin: 2px 4px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: 124px
 }
 
#pw-ds-botones .selec {background: #3f3c51;cursor:default}
 
.pw-novedad {border-bottom: 1px dashed #3f3c51;padding:5px 0}
 
#pw-dexstarr #credito a,.pw-ds-caja b,.pw-staff a {color: #3f3c51}
 
#pw-dexstarr,#pw-ds-botones div,.pw-ds-award p,.pw-staff b {background: #FFF}
 
#pw-ds-rojo img,.pw-ds-award {border: 3px double #333}
 
#pw-quicklinks a {
  background: rgba(51,51,51,0.6);
  display: block;
  font-family: dosis;
  font-size: 9px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  letter-spacing: 2px;
  margin-left: 107px;
  margin-top: 1px;
  opacity: .7;
  padding: 1.65px 0;
  text-align: center;
  text-transform: uppercase
 }
 
#pw-dexstarr,#pw-quicklinks a {color: #C9C9C9}
 
.pw-ds-box,.pw-staff a {background: #222}
 
#pw-ds-rojo {
  bottom: 0;
  left: 0;
  margin-right: 20px;
  position: absolute;
  top: 0;
  width: 280px
 }
 
  #pw-ds-rojo img {
      float: left;
      margin: 3px 3px 0 0;
      width: 100px
    }
 
#pw-ds-negro {
  bottom: 0;
  height: 330px;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 280px
 }
 
.pw-ds-box {
  font-family: dosis;
  font-size: 13px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  overflow: auto;
  padding: 5px;
  text-align: justify
 }
 
#pw-ds-title {
  font-family: inder;
  font-size: 20px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 16px;
  text-align: right;
  text-transform: uppercase
 }
 
.pw-ds-subtit {
  font-family: inder;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase
 }
 
.pw-ds-box + .pw-ds-subtit {margin-top: 5px}
 
.pw-ds-award {
  display: inline-block;
  height: 87px;
  margin-bottom: 7px;
  width: 270px
 }
 
  .pw-ds-award:last-of-type,.pw-ds-award:nth-child(5) {margin-bottom: 0}
 
  .pw-ds-award:nth-child(5) {margin-right: 13px}
 
  .pw-ds-award p {
      display: block;
      height: 32px;
      margin: 21px auto;
      overflow: hidden;
      padding: 5px 0;
      text-align: center;
      width: 0
    }
 
      .pw-ds-award p b {display: block;text-transform:uppercase}
 
  .pw-ds-award:hover p {padding: 5px;width:150px}
 
.pw-staff a {
  bottom: 1px;
  display: block;
  left: 1px;
  opacity: .8;
  position: absolute;
  right: 1px
 }
 
.pw-staff b {
  display: block;
  left: 1px;
  position: absolute;
  right: 1px;
  top: 1px
 }
 
.pw-novedad:first-of-type {padding-top: 0}
 
.pw-novedad:last-of-type {border: 0;padding-bottom:0}
 
#pw-ds-title span {
  display: block;
  font-family: dosis;
  font-size: 7px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal
 }
 
#pw-ds-intro {
  font-family: dosis;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  height: 190px;
  line-height: 14px;
  margin-top: 5px;
  overflow: auto;
  padding-right: 2px;
  position: relative;
  text-align: justify
 }
 
#pw-ds-intro+span {
  bottom: -150px;
  font-family: "times new roman";
  font-size: 100px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  opacity: .3;
  position: absolute;
  right: 0
 }
 
#pw-quicklinks {height: 100px;margin-top:3px}
 
  #pw-quicklinks *,.pw-ds-award * {
      -moz-transition: .5s;
      -webkit-transition: .5s;
      transition: .5s
    }
 
  #pw-quicklinks a:hover {opacity: 1}
 
#pw-ds-botones {
  bottom: 0;
  left: -312px;
  position: absolute
 }
 
  #pw-ds-botones div {
      cursor: pointer;
      height: 10px;
      margin-top: 2px;
      width: 10px
    }
 
#pw-dexstarr #credito {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  font-size: 7px;
  position: absolute;
  right: -50px;
  text-transform: uppercase;
  top: 53px;
  transform: rotate(90deg)
 }
 
#pw-dexstarr a {text-decoration: none}
 
.pw-ds-caja {
  display: none;
  left: -290px;
  position: absolute;
  right: 10px;
  top: 10px
 }
 
.pw-ds-c1 {display: block}

Até mais.

Bem, poderia altera-lo para todo laranja? Tipo, o fundo, ao invés de branco, um laranja claro...

Olá,

Qual laranja o senhor deseja? Nos forneça a cor hexadecimal por favor..

Supondo que este seja de seu agrado eu modifiquei da seguinte maneira:

Código:

body{
  background: #e67e22;
}
#pw-dexstarr {
  border-left: 300px solid  #e67e22;
  font-family: dosis;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  height: 350px;
  left: 12px;
  margin: auto;
  position: relative;
  width: 300px
 }
 
.pw-ds-box,.pw-ds-subtit {border-bottom: 1px solid #3f3c51}
 
.pw-staff div {
  border: 3px double #3f3c51;
  display: inline-blocK;
  font-size: 9px;
  height: 74px;
  margin: 2px 4px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: 124px
 }
 
#pw-ds-botones .selec {background: #3f3c51;cursor:default}
 
.pw-novedad {border-bottom: 1px dashed #3f3c51;padding:5px 0}
 
#pw-dexstarr #credito a,.pw-ds-caja b,.pw-staff a {color: #3f3c51}
 
#pw-dexstarr,#pw-ds-botones div,.pw-ds-award p,.pw-staff b {background: #FFF}
 
#pw-ds-rojo img,.pw-ds-award {border: 3px double #333}
 
#pw-quicklinks a {
  background: rgba(51,51,51,0.6);
  display: block;
  font-family: dosis;
  font-size: 9px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  letter-spacing: 2px;
  margin-left: 107px;
  margin-top: 1px;
  opacity: .7;
  padding: 1.65px 0;
  text-align: center;
  text-transform: uppercase
 }
 
#pw-dexstarr,#pw-quicklinks a {color: #C9C9C9}
 
.pw-ds-box,.pw-staff a {background: #222}
 
#pw-ds-rojo {
  bottom: 0;
  left: 0;
  margin-right: 20px;
  position: absolute;
  top: 0;
  width: 280px
 }
 
  #pw-ds-rojo img {
      float: left;
      margin: 3px 3px 0 0;
      width: 100px
    }
 
#pw-ds-negro {
  bottom: 0;
  height: 330px;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 280px
 }
 
.pw-ds-box {
  font-family: dosis;
  font-size: 13px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  overflow: auto;
  padding: 5px;
  text-align: justify
 }
 
#pw-ds-title {
  font-family: inder;
  font-size: 20px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 16px;
  text-align: right;
  text-transform: uppercase
 }
 
.pw-ds-subtit {
  font-family: inder;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase
 }
 
.pw-ds-box + .pw-ds-subtit {margin-top: 5px}
 
.pw-ds-award {
  display: inline-block;
  height: 87px;
  margin-bottom: 7px;
  width: 270px
 }
 
  .pw-ds-award:last-of-type,.pw-ds-award:nth-child(5) {margin-bottom: 0}
 
  .pw-ds-award:nth-child(5) {margin-right: 13px}
 
  .pw-ds-award p {
      display: block;
      height: 32px;
      margin: 21px auto;
      overflow: hidden;
      padding: 5px 0;
      text-align: center;
      width: 0
    }
 
      .pw-ds-award p b {display: block;text-transform:uppercase}
 
  .pw-ds-award:hover p {padding: 5px;width:150px}
 
.pw-staff a {
  bottom: 1px;
  display: block;
  left: 1px;
  opacity: .8;
  position: absolute;
  right: 1px
 }
 
.pw-staff b {
  display: block;
  left: 1px;
  position: absolute;
  right: 1px;
  top: 1px
 }
 
.pw-novedad:first-of-type {padding-top: 0}
 
.pw-novedad:last-of-type {border: 0;padding-bottom:0}
 
#pw-ds-title span {
  display: block;
  font-family: dosis;
  font-size: 7px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal
 }
 
#pw-ds-intro {
  font-family: dosis;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  height: 190px;
  line-height: 14px;
  margin-top: 5px;
  overflow: auto;
  padding-right: 2px;
  position: relative;
  text-align: justify
 }
 
#pw-ds-intro+span {
  bottom: -150px;
  font-family: "times new roman";
  font-size: 100px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  opacity: .3;
  position: absolute;
  right: 0
 }
 
#pw-quicklinks {height: 100px;margin-top:3px}
 
  #pw-quicklinks *,.pw-ds-award * {
      -moz-transition: .5s;
      -webkit-transition: .5s;
      transition: .5s
    }
 
  #pw-quicklinks a:hover {opacity: 1}
 
#pw-ds-botones {
  bottom: 0;
  left: -312px;
  position: absolute
 }
 
  #pw-ds-botones div {
      cursor: pointer;
      height: 10px;
      margin-top: 2px;
      width: 10px
    }
 
#pw-dexstarr #credito {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  font-size: 7px;
  position: absolute;
  right: -50px;
  text-transform: uppercase;
  top: 53px;
  transform: rotate(90deg)
 }
 
#pw-dexstarr a {text-decoration: none}
 
.pw-ds-caja {
  display: none;
  left: -290px;
  position: absolute;
  right: 10px;
  top: 10px
 }
 
.pw-ds-c1 {display: block}