Entendendo o código para phpbb3

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

Resolvido Entendendo o código para phpbb3

Mensagem por V Giacobbo em 04/04/13, 09:32 pm

Qual é minha questão:
Olá pessoal :3

Preciso de uma ajudinha com um tema que eu peguei no Hitskin.com, se alguém puder me ajudar. Eu gosto de personalizar o tema com alguns detalhes, alterando cores e imagens colocados no código. Mas esse código eu não consegui entender. Seria possível que alguém pudesse me explicar o que cada sessão faz, ou a função delas?

Código abaixo.


Código:
#wrap {
margin-top: -10px;
margin-bottom: -10px;
border-left: solid 15px #2a0101; 
border-right: solid 15px #2a0101;
width: 85%;
}
/*Borde foro Abajo categorias*/
.forabg {
    border-bottom: 20px solid #000000;
    border-radius: 0px 0px 0px 0px;
    }

/*Quienestaenlinea y estadisticas*/
ul + .h3, #i_whosonline + p {
  width: 49%;
}

.clear + .h3, #page-body p.page-bottom {
  float: right;
  width: 49%;
}
  
.clear + .h3 {
  position: relative;
  bottom: 17.7em;
}

#page-body p.page-bottom {
  position: relative;
  bottom: 13em;
  left: 38em;
}

/*Quitar el Buscar*/
#search-box {visibility:hidden}

/*Subir el Navar*/
#page-header .navbar{
margin-top: -25px;
}
/*widgets*/

#content-container div#right {
border-top-left-radius: 0px;
margin-left: 0px;
margin-top: -69px;
width: 230px;
}

.module .h3 {
visibility:hidden;
}

#content-container div#left {
background-image: url('');
}
.module {
background-url:('');
}

    .module {
    background: url('');
    }

#comments_scroll_div{
   background: url('');
   background-repeat: no-repeat;
   margin-top:-40px;
   margin-left:-7px;
   text-align: left;
   width: 230px;
   height:268px;
   }

#content-container div#left {
    background: URL('');
    margin-left: 7px;
    box-shadow: 0 0 6px #COLOR;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 40px;
    }

    .module{
    background-color:transparent;
    }

/*Logo foro*/
#logo {margin-left: -13px;
margin-top: -12px;}

/*categorias la caja*/
.desc3 {
background-color: #fefefe;
border: 1px solid #COLOR;
border-radius: 0px 00px 0px 0px;
text: Trebuchet MS;
font-size: 9.5px;
color: #COLOR;
display: block;
border-left: 0px solid #241014;  
line-height: 9px;
text-shadow: 1px 1px 0 #COLOR;
margin-left: 15px;
margin-top: 5px;
padding: 10px;
text-align: justify;
width: 350px;
  border-left: solid 15px #4D123F; 
border-right: solid 15px #4D123F;
}

/*aspecto del nombre de los usuarios*/
.postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {
font-weight: bold;
font-size: 2em;
font-style: italic !important;
font-family: georgia;
text-decoration: none;
letter-spacing: -2px;
}

.postprofile {
display: block;
text-align: center;}

.postprofile dd {
text-align: left;
margin-top: 4px;
}

/*estilo de las leyendas*/
p em b a.gensmall {
color: #000000;
font-family: georgia;
font-size: 17px;
font-style: italic;
text-align: center;
text-shadow: 0 0 4px #COLOR;
text-transform: lowercase;
}

p em {
font-style: normal;
color: transparent;
}

/*color de fondo a los autores de un post*/
p.author {
background-color: #090706;
border-radius: 0px 0px 0px 0px;
margin-top: 20px;
padding: 3px !important;
position: relative;
right: -7em;
text-align: center;
text-shadow: 1px 1px 0 #COLOR;
}

p.author {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
line-height: 1.2em;
margin: 0 15em 0.6em 0;
padding: 0 0 5px;
}

/*Barra Editar,Borrar y citar movimiento*/
.postbody ul.profile-icons{margin-top:-4px;margin-right:-37px}

/*perfil*/
.postprofile a img{
      opacity: 0.7;
      transition: all 0.5s ease 0s;
      -moz-transition: all 0.5s ease 0s;
      -webkit-transition: all 0.5s ease 0s;
    }

    .postprofile a img:hover {
      opacity: 1;
    }

.postprofile {
    display: block;
    text-align: left;}

    .postprofile dd {
            text-align: left;
            margin-top: 4px;
      }

/*mensajes*/
ul#picture_legend {
background-color: #090706;
background-position: center center;
background-repeat: no-repeat;
padding: 18px 0;
border-radius: 0px 0px 0px 0px;
text-align: center;
}

/*Título de Categorias*/
li.header {
text-transform: none;
font-size:0px;
padding: 10px;
background: url('http://i51.tinypic.com/20pwmy8.jpg');
border-left: 20px solid #2a0101;
  border-rigth: 20px solid #2a0101;
text-align: left;
}

.table-title, .table-title h2 {
color: #COLOR;
font: 33px Megrim;
letter-spacing: 3px;
text-shadow: 1px 1px 1px #COLOR;
}

/*Títulos de los foros*/
a.forumtitle {
border-left: 0px solid #241014;
display: block;
font: 12px Arial;
letter-spacing: 3px;  
margin-top: 10px;
margin-bottom: -10px;
width: 1175px;
padding: 5px;
height: 5px;
width: 400px;
position: relative;
text-transform: none;
-webkit-transition:0.8s;
-o-transition:0.8s;
-moz-transitio:0.8s;
}

a.forumtitle:hover{
padding-left: 20px;
-webkit-transition:0.2s;
-o-transition:0.2s;
-moz-transitio:0.2s;
}

/*lo que hace que se baje el cuadro del chrome*/
#helpbox.helpline {
display:none;
}

/*Code, Spoiler y Quote*/
dl.codebox {
background-color: #f9f8f8;
border-left: 20px solid #241014;
border-top:none;
border-right: none;
border-bottom: none;
padding:5px;
}

dl.codebox dt {
display:block;
font-size:0.8em;
font-weight:700;
color:#7a7a7a;
text-align: center;
margin-bottom:3px;
text-transform:uppercase;
font-family:,Arial,Helvetica,sans-serif;
border-bottom:none;}

dl.codebox code {
color:#7a7a7a;
font-family:,Arial,Helvetica,sans-serif;
text-shadow:1px 1px 1px 141414;
font-size:11px;
border-bottom:none;
}

blockquote {
background-color: #f9f8f8;
border-left: 20px solid #241014;
border-top:none;
border-right: none;
border-bottom: none;
padding:5px;
}

blockquote blockquote {
background-color: #f9f8f8;
border-left: 20px solid #241014;
border-top:none;
border-right: none;
border-bottom: none;
padding: 5px;
}

.content blockquote {
color:#7a7a7a;
font-family:,Arial,Helvetica,sans-serif;
text-shadow:1px 1px 1px 141414;
font-size:11px;
border-bottom: none;
}



Agradeço a atenção :3

Endereço do meu fórum:
http://atlantiscityrpg.forumeiros.com

Versão do fórum:
PHPBB3
avatar

V Giacobbo
Nível 7

Feminino
Inscrito dia : 21/07/2012
Mensagens : 88
Pontos Ativos : 122

Ver perfil do usuário http://atlantiscityrpg.forumeiros.com/forum

Resolvido Re: Entendendo o código para phpbb3

Mensagem por Convidado em 05/04/13, 12:33 pm

Saudações!

Dividi o que cada função faz, veja abaixo.
Código:
/*estrutura do fórum*/
#wrap {
margin-top: -10px;
margin-bottom: -10px;
border-left: solid 15px #2a0101;
border-right: solid 15px #2a0101;
width: 85%;
}
/*Borda das categorias*/
.forabg {
    border-bottom: 20px solid #000000;
    border-radius: 0px 0px 0px 0px;
    }

/*Estatisticas*/
ul + .h3, #i_whosonline + p {
  width: 49%;
}

.clear + .h3, #page-body p.page-bottom {
  float: right;
  width: 49%;
}
 
.clear + .h3 {
  position: relative;
  bottom: 17.7em;
}

#page-body p.page-bottom {
  position: relative;
  bottom: 13em;
  left: 38em;
}

/*Botão de buscar*/
#search-box {visibility:hidden}

/*Subir el Navar*/
#page-header .navbar{
margin-top: -25px;
}
/*widgets*/

#content-container div#right {
border-top-left-radius: 0px;
margin-left: 0px;
margin-top: -69px;
width: 230px;
}

.module .h3 {
visibility:hidden;
}

#content-container div#left {
background-image: url('');
}
.module {
background-url:('');
}

    .module {
    background: url('');
    }

#comments_scroll_div{
  background: url('');
  background-repeat: no-repeat;
  margin-top:-40px;
  margin-left:-7px;
  text-align: left;
  width: 230px;
  height:268px;
  }

#content-container div#left {
    background: URL('');
    margin-left: 7px;
    box-shadow: 0 0 6px #COLOR;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 40px;
    }

    .module{
    background-color:transparent;
    }

/*Logo do fórum*/
#logo {margin-left: -13px;
margin-top: -12px;}

/*categorias*/
.desc3 {
background-color: #fefefe;
border: 1px solid #COLOR;
border-radius: 0px 00px 0px 0px;
text: Trebuchet MS;
font-size: 9.5px;
color: #COLOR;
display: block;
border-left: 0px solid #241014; 
line-height: 9px;
text-shadow: 1px 1px 0 #COLOR;
margin-left: 15px;
margin-top: 5px;
padding: 10px;
text-align: justify;
width: 350px;
  border-left: solid 15px #4D123F;
border-right: solid 15px #4D123F;
}

/*aspecto dos nomes dos usuários*/
.postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {
font-weight: bold;
font-size: 2em;
font-style: italic !important;
font-family: georgia;
text-decoration: none;
letter-spacing: -2px;
}

.postprofile {
display: block;
text-align: center;}

.postprofile dd {
text-align: left;
margin-top: 4px;
}

/*estilo das legendas*/
p em b a.gensmall {
color: #000000;
font-family: georgia;
font-size: 17px;
font-style: italic;
text-align: center;
text-shadow: 0 0 4px #COLOR;
text-transform: lowercase;
}

p em {
font-style: normal;
color: transparent;
}

/*color de fundo dos post*/
p.author {
background-color: #090706;
border-radius: 0px 0px 0px 0px;
margin-top: 20px;
padding: 3px !important;
position: relative;
right: -7em;
text-align: center;
text-shadow: 1px 1px 0 #COLOR;
}

p.author {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
line-height: 1.2em;
margin: 0 15em 0.6em 0;
padding: 0 0 5px;
}

/*Barra Editar,Borrar de citar e mover*/
.postbody ul.profile-icons{margin-top:-4px;margin-right:-37px}

/*perfil*/
.postprofile a img{
      opacity: 0.7;
      transition: all 0.5s ease 0s;
      -moz-transition: all 0.5s ease 0s;
      -webkit-transition: all 0.5s ease 0s;
    }

    .postprofile a img:hover {
      opacity: 1;
    }

.postprofile {
    display: block;
    text-align: left;}

    .postprofile dd {
            text-align: left;
            margin-top: 4px;
      }

/*mensagens*/
ul#picture_legend {
background-color: #090706;
background-position: center center;
background-repeat: no-repeat;
padding: 18px 0;
border-radius: 0px 0px 0px 0px;
text-align: center;
}

/*Título de Categorias*/
li.header {
text-transform: none;
font-size:0px;
padding: 10px;
background: url('http://i51.tinypic.com/20pwmy8.jpg');
border-left: 20px solid #2a0101;
  border-rigth: 20px solid #2a0101;
text-align: left;
}

.table-title, .table-title h2 {
color: #COLOR;
font: 33px Megrim;
letter-spacing: 3px;
text-shadow: 1px 1px 1px #COLOR;
}

/*Títulos dos fóruns*/
a.forumtitle {
border-left: 0px solid #241014;
display: block;
font: 12px Arial;
letter-spacing: 3px; 
margin-top: 10px;
margin-bottom: -10px;
width: 1175px;
padding: 5px;
height: 5px;
width: 400px;
position: relative;
text-transform: none;
-webkit-transition:0.8s;
-o-transition:0.8s;
-moz-transitio:0.8s;
}

a.forumtitle:hover{
padding-left: 20px;
-webkit-transition:0.2s;
-o-transition:0.2s;
-moz-transitio:0.2s;
}

/*face do quadro*/
#helpbox.helpline {
display:none;
}

/*Code, Spoiler e Quote*/
dl.codebox {
background-color: #f9f8f8;
border-left: 20px solid #241014;
border-top:none;
border-right: none;
border-bottom: none;
padding:5px;
}

dl.codebox dt {
display:block;
font-size:0.8em;
font-weight:700;
color:#7a7a7a;
text-align: center;
margin-bottom:3px;
text-transform:uppercase;
font-family:,Arial,Helvetica,sans-serif;
border-bottom:none;}

dl.codebox code {
color:#7a7a7a;
font-family:,Arial,Helvetica,sans-serif;
text-shadow:1px 1px 1px 141414;
font-size:11px;
border-bottom:none;
}

blockquote {
background-color: #f9f8f8;
border-left: 20px solid #241014;
border-top:none;
border-right: none;
border-bottom: none;
padding:5px;
}

blockquote blockquote {
background-color: #f9f8f8;
border-left: 20px solid #241014;
border-top:none;
border-right: none;
border-bottom: none;
padding: 5px;
}

.content blockquote {
color:#7a7a7a;
font-family:,Arial,Helvetica,sans-serif;
text-shadow:1px 1px 1px 141414;
font-size:11px;
border-bottom: none;
}

Até Piscada

Convidado
Convidado


Resolvido Re: Entendendo o código para phpbb3

Mensagem por V Giacobbo em 05/04/13, 12:58 pm

Ah sim *-* consegui entender muito melhor agora.

Poderia me dizer o que preciso adicionar à este trecho para que o titulo ficasse centralizado verticalmente?

Código:
/*Título de Categorias*/
li.header {
text-transform: none;
font-size:0px;
padding: 10px;
background: url('http://i51.tinypic.com/20pwmy8.jpg');
border-left: 20px solid #2a0101;
  border-rigth: 20px solid #2a0101;
text-align: left;
}

text-align: center-left; seria a solução?
avatar

V Giacobbo
Nível 7

Feminino
Inscrito dia : 21/07/2012
Mensagens : 88
Pontos Ativos : 122

Ver perfil do usuário http://atlantiscityrpg.forumeiros.com/forum

Resolvido Re: Entendendo o código para phpbb3

Mensagem por Convidado em 05/04/13, 01:18 pm

Saudações!

Adicione este em que se referiu, e adicione mais este
Código:
position: center;
E veja se resulta.

Até Piscada

Convidado
Convidado


Resolvido Re: Entendendo o código para phpbb3

Mensagem por V Giacobbo em 05/04/13, 01:30 pm

Não houve diferença
avatar

V Giacobbo
Nível 7

Feminino
Inscrito dia : 21/07/2012
Mensagens : 88
Pontos Ativos : 122

Ver perfil do usuário http://atlantiscityrpg.forumeiros.com/forum

Resolvido Re: Entendendo o código para phpbb3

Mensagem por Convidado em 05/04/13, 01:53 pm

Saudações!

Adicione este código na CSS
Código:
.statused h3.hierarchy {
position: relative;
left: 50%;
}

Até Piscada

Convidado
Convidado


Resolvido Re: Entendendo o código para phpbb3

Mensagem por BrunoH. em 05/04/13, 02:09 pm

Olá!
Aceda a Folha de Estilo CSS:
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de estilo CSS
Código:
Código:
.table-title, .table-title h2 {text-align: center;margin-left: 100px;}
e Valide!

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Entendendo o código para phpbb3

Mensagem por V Giacobbo em 05/04/13, 07:50 pm

Não houve alteração com seu código, Pablo.

Já, Bruno, o seu funcionou, mas não do modo que eu queria. Ele ficou centralizado horizontalmente e eu quero que ele fique centralizado na vertical.
avatar

V Giacobbo
Nível 7

Feminino
Inscrito dia : 21/07/2012
Mensagens : 88
Pontos Ativos : 122

Ver perfil do usuário http://atlantiscityrpg.forumeiros.com/forum

Resolvido Re: Entendendo o código para phpbb3

Mensagem por Sennior em 05/04/13, 08:25 pm

Saudações! Muito feliz

Penso eu que sim há como por CSS3, mas como assim na vertical amigo? Poderia mostrar uma imagem?

Até mais!
avatar

Sennior
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16313
Pontos Ativos : 20815

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

Resolvido Re: Entendendo o código para phpbb3

Mensagem por V Giacobbo em 05/04/13, 10:28 pm

Posso mostrar um exemplo desse tipo de centralização, neste fórum: http://heroesofolympus.forumeiros.com/forum

Tanto o menu de navegação quanto os títulos das categorias estão perfeitamente centralizadas. As palavras não estão coladas no topo do fundo nem na base, entende? >-<
avatar

V Giacobbo
Nível 7

Feminino
Inscrito dia : 21/07/2012
Mensagens : 88
Pontos Ativos : 122

Ver perfil do usuário http://atlantiscityrpg.forumeiros.com/forum

Resolvido Re: Entendendo o código para phpbb3

Mensagem por V Giacobbo em 08/04/13, 05:30 pm

Se não foi compreensível, por favor me avisem >.<
avatar

V Giacobbo
Nível 7

Feminino
Inscrito dia : 21/07/2012
Mensagens : 88
Pontos Ativos : 122

Ver perfil do usuário http://atlantiscityrpg.forumeiros.com/forum

Resolvido Re: Entendendo o código para phpbb3

Mensagem por .Danni. em 08/04/13, 10:30 pm

Olá,

Vá em:

Painel de Controle Seta Visualização Seta Cabeçalho e Navegação

Escolha a opção para centralizar.

Cordialmente,
The Boss
avatar

.Danni.
Membro do Fórum

Feminino
Inscrito dia : 13/01/2010
Mensagens : 1860
Pontos Ativos : 2592

Ver perfil do usuário http://castelobruxo.tk https://www.facebook.com/dannielagoes

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum