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
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: 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

- Tópicos similares

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