Entendendo o código para phpbb3

4 participantes

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

Tópico resolvido Entendendo o código para phpbb3

Mensagem por V Giacobbo 05.04.13 1:32

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
V Giacobbo

V Giacobbo
**

Membro desde : 21/07/2012
Mensagens : 88
Pontos : 122

http://atlantiscityrpg.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Entendendo o código para phpbb3

Mensagem por Convidado 05.04.13 16:33

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
Anonymous

Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Entendendo o código para phpbb3

Mensagem por V Giacobbo 05.04.13 16:58

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?
V Giacobbo

V Giacobbo
**

Membro desde : 21/07/2012
Mensagens : 88
Pontos : 122

http://atlantiscityrpg.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Entendendo o código para phpbb3

Mensagem por Convidado 05.04.13 17:18

Saudações!

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

Até Piscada
Anonymous

Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Entendendo o código para phpbb3

Mensagem por V Giacobbo 05.04.13 17:30

Não houve diferença
V Giacobbo

V Giacobbo
**

Membro desde : 21/07/2012
Mensagens : 88
Pontos : 122

http://atlantiscityrpg.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Entendendo o código para phpbb3

Mensagem por Convidado 05.04.13 17:53

Saudações!

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

Até Piscada
Anonymous

Convidado
Convidado


Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Entendendo o código para phpbb3

Mensagem por BrunoH. 05.04.13 18:09

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.
BrunoH.

BrunoH.
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10385

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Entendendo o código para phpbb3

Mensagem por V Giacobbo 05.04.13 23:50

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.
V Giacobbo

V Giacobbo
**

Membro desde : 21/07/2012
Mensagens : 88
Pontos : 122

http://atlantiscityrpg.forumeiros.com/forum

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Entendendo o código para phpbb3

Mensagem por Sennior 06.04.13 0:25

Saudações! Muito feliz

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

Até mais!
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Entendendo o código para phpbb3

Mensagem por V Giacobbo 06.04.13 2:28

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? >-<
V Giacobbo

V Giacobbo
**

Membro desde : 21/07/2012
Mensagens : 88
Pontos : 122

http://atlantiscityrpg.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Entendendo o código para phpbb3

Mensagem por V Giacobbo 08.04.13 21:30

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

V Giacobbo
**

Membro desde : 21/07/2012
Mensagens : 88
Pontos : 122

http://atlantiscityrpg.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Entendendo o código para phpbb3

Mensagem por .Danni. 09.04.13 2:30

Olá,

Vá em:

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

Escolha a opção para centralizar.

Cordialmente,
The Boss
.Danni.

.Danni.
Super Membro

Membro desde : 13/01/2010
Mensagens : 1880
Pontos : 2623

https://coletivomistico.forumbrasil.net/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos