Quadro dos Tópicos

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

Resolvido Quadro dos Tópicos

Mensagem por ShaDownS em 06/06/14, 12:09 am

  • Descrição:
Olá,

Queria o code completo do quadro dos tópicos, queria organizar isto.
Ficaria assim:
• Espaço do perfil ter largura de 250px
• Bordas Laranjas de 1px
• Pontas das bordas arredondadas em 15px
• Ícones de contatos separados por uma borda mas no mesmo espaço do perfil, porem no seu rodapé, uma barra na parte de cima deste.
• Tamanho padrão da fonte em todas as mensagens ser 10px
• Ficha RPG encima de um campo de imagem um chamado "Rank" mas tá invisível por não possuir imagem.
• Separador entre o perfil e a mensagem laranja que fique ligado com as bordas inferiores e superiores do quadro do fórum, desimportando o tamanho da mensagem.
• Uma barra ou borda, separando os botões e titulo da mensagem. Pode ser laranja.

E acho que é isso. Espero ter explicado bem.

~ Abraços, Ulti.

  • Informações:
Fórum:htt://forumnarutoultimate.forumeiros.comVersão:PHPBB3
Tipo:Pedido de códigoTags:Quadro,Tópicos



Última edição por UltimaterX em 10/06/14, 01:38 am, editado 2 vez(es)
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Quadro dos Tópicos

Mensagem por Hancki em 06/06/14, 10:05 am

Olá!

Se faltar algum detalhe, especifique quais faltam!
Código:
.postbody {
   border-left: 1px solid orange !important;
   padding-left: 30px !important;
   margin-right: 30px !important;
}
.postprofile {
   border-right: 0px !important;
}
.postbody .content div {
   font-size: 10px;
}
#main-content .post {
   border: 1px solid orange;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
}
.postprofile dd:last-of-type {
   border-top: 1px solid orange;
   padding-top: 10px;
   width: 90%;
}
.postprofile {
   width: 250px !important;
}
Adicione este CSS na sua folha de estilos.

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Quadro dos Tópicos

Mensagem por ShaDownS em 07/06/14, 06:06 pm

@Hancki escreveu:Olá!

Se faltar algum detalhe, especifique quais faltam!
Código:
.postbody {
   border-left: 1px solid orange !important;
   padding-left: 30px !important;
   margin-right: 30px !important;
}
.postprofile {
   border-right: 0px !important;
}
.postbody .content div {
   font-size: 10px;
}
#main-content .post {
   border: 1px solid orange;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
}
.postprofile dd:last-of-type {
   border-top: 1px solid orange;
   padding-top: 10px;
   width: 90%;
}
.postprofile {
   width: 250px !important;
}
Adicione este CSS na sua folha de estilos.

Hancki

O code funcionou... Porem, teve desiquilíbrio, mas ajustei

veja ~> http://forumnarutoultimate.forumeiros.com/t1-

E como se deixa o espaço, em 3px, entre o perfil e a borda que está a esquerda dele?
E borda que divide o perfil e a mensagem, não consegui também botar os 3px de espaçamento entre o perfil e ela.

Ajude-me amigo.
~ Abraços, Ulti.
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Quadro dos Tópicos

Mensagem por Lima 3005 em 07/06/14, 06:13 pm

Código:
.postprofile {
margin-left: 3px;
}

Código:
.postprofile dd, .postprofile dt {
margin-bottom: 3px;
}

Isto?
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Quadro dos Tópicos

Mensagem por ShaDownS em 07/06/14, 07:40 pm

Não resultou...


Andei vasculhando minha base do CSS, e achei isto:
Código:

.post {

   padding: 0 10px;
   margin-bottom: 4px;
   background-repeat: no-repeat;
   background-position: 100% 0;
   }
*+ html .post {

   word-wrap: break-word;
   }
* html .post {

   word-wrap: break-word;
   }

.post ul {

   list-style-type: disc;
   }
.postprofile {

   color: #000000;
   margin: 5px 0 0px 0;
   min-height: 80px;
   border-right-style: solid;
   border-right-width: 1px;
   border-color: #dddddd;
   width: 22%;
   float: left;
   display: inline;
   word-wrap: break-word;
   position: relative;
   }
* html .postprofile {

   overflow: hidden;

   }
.postprofile dd, .postprofile dt {

   line-height: 1.2em;
   margin-left: 8px;
   }
.postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {

   font-weight: bold;
   color: #ff773d;
   text-decoration: none;
   }
.postprofile a:hover, .postprofile dt.author a:hover {

   text-decoration: underline;
   color: #ff773d;
   }
.vote {


   float: right;
   width: 9px;
   margin-left: 4px;
   }
.vote .vote-button {

   text-align: center;
   font-weight: bold;
   margin-left: -1px;
   }
.vote .vote-button a {

   text-decoration: none !important;
   }
.vote .vote-bar {

   width: 3px;
   height: 50px;
   margin: 0 auto;
   border: 1px solid #000000;
   font-size: 0;

   }
.vote .vote-no-bar {

   letter-spacing:-2px;
   margin-left:-2px;
   white-space:nowrap;
   }
.vote .vote-bar-plus {

   background-color: #0f0;
   }
.vote .vote-bar-minus {

   background-color: #f00;
   }
/* dl dt dd----------------------------------------------*/

dd.lastpost {

   width: 20%;
   font-size: 1.1em;

   }
dd.mark {

   float: right !important;
   width: 9%;
   text-align: center;
   line-height: 200%;
   font-size: 1.2em;
   }
dd.posts, dd.topics, dd.views {

   width: 8%;
   text-align: center;
   line-height: 2.2em;
   font-size: 1.2em;
   border: none;
   }
dd.info {

   width: 30%;
   }

dl.details {

   font-size: 1.1em;
   }
dl.details dt {

   float: left;
   width: 10em;
   text-align: right;
   color: #000000;
   display: block;
   }
dl.details dd {

   margin-left: 10em;
   padding-left: 5px;
   margin-bottom: 5px;
   color: #000000;
   }
.span-tab {

   font-size: 0.9em;

   }

Deve ser útil Feliz
Vêm o problema disto. E aproposito, eu deixei apenas os codes de postbody que o Hancki postou.

~ Abraços, Ulti.
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Quadro dos Tópicos

Mensagem por ShaDownS em 08/06/14, 11:11 am

UP! Estudar
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Quadro dos Tópicos

Mensagem por Lima 3005 em 08/06/14, 11:23 am

O código que eu lhe forneci dá o espaçamento desejado não era isso que queria?
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Quadro dos Tópicos

Mensagem por ShaDownS em 08/06/14, 11:32 am

Eu tirei o code... Vou pôr denovo... Já te aviso por aqui.

Ele deixa o perfil no espaço inferior em relação ao seu próprio espaço. E é por causa da borda que divide o perfil da mensagem. Vou lá recolocar o code.

~ Abraços, Ulti.
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Quadro dos Tópicos

Mensagem por Lima 3005 em 08/06/14, 11:46 am

Código:
.postprofile {
color: #000000;
margin: 5px px 3px 3px;
min-height: 80px;
border-right-style: solid;
border-right-width: 1px;
border-color: #dddddd;
width: 22%;
float: left;
display: inline;
word-wrap: break-word;
position: relative;
margin-left: 6px;
}

substitua esta parte do código e depois ajuste a margin-left: 6px; altere o valor "6" para o desejado

Código:
.postprofile dd, .postprofile dt {
line-height: 1.2em;
margin-left: 8px;
}

neste a mesma coisa entre o perfil e a borda adicione mais valor a margin-left para obter o resultado pretendido
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Quadro dos Tópicos

Mensagem por ShaDownS em 08/06/14, 11:51 am

@Hancki escreveu:Olá!

Se faltar algum detalhe, especifique quais faltam!
Código:
.postbody {
   border-left: 1px solid orange !important;
   padding-left: 30px !important;
   margin-right: 30px !important;
}
.postprofile {
   border-right: 0px !important;
}
.postbody .content div {
   font-size: 10px;
}
#main-content .post {
   border: 1px solid orange;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
}
.postprofile dd:last-of-type {
   border-top: 1px solid orange;
   padding-top: 10px;
   width: 90%;
}
.postprofile {
   width: 250px !important;
}
Adicione este CSS na sua folha de estilos.

Hancki

Eu adicionei o code...
Olha o resultado ~> http://forumnarutoultimate.forumeiros.com/t1-seu-primeiro-topico
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Quadro dos Tópicos

Mensagem por Lima 3005 em 08/06/14, 11:53 am

e o que você deseja? como quer que fique?
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Quadro dos Tópicos

Mensagem por ShaDownS em 08/06/14, 11:58 am

Parece que o único problema, é o perfil e essa borda laranja que divide este da mensagem ao lado.

Nota que ele ficou la embaixo, por esta borda ficar muito pra esquerda, que se notar bem, "subiu" encima do perfil.

E eu queria deixar essa borda longe do perfil em 3px, o mesmo que a da esquerda, do quadro do tópico, ela esta uns 5px longe se não me engano.
Se esta for padrão, ok.
Mas contante que essa borda que divide o perfil da mensagem fique longe dele a uns 3px

~> http://forumnarutoultimate.forumeiros.com/t1-
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Quadro dos Tópicos

Mensagem por Lima 3005 em 08/06/14, 12:00 pm

poderá colocar um printscreen explicando? é que não estou percebendo, a borda não está em cima do perfil
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Quadro dos Tópicos

Mensagem por ShaDownS em 08/06/14, 12:09 pm

UltimaterX escreveu:Desculpe, mas não posso tirar print. Uso celular, ele tira print, mas não carrega eles por serem muito grandes de tamanho (500-700kb)
E não upa pro servidor.


Eu uso celular... ",

E como ele tem a tela menor que a do PC, talvez o problema seje a versão que uso, mas ela esta otimizada pra computador .-.

E eu vejo o site como se estivesse no PC ^^
Mesmo assim o perfil buga com esta borda .-.
Eu não entendo a diferença entre Margin, Spacing e Padding, ai tento mudar o code, coisa que eu fiz pra deixar a meu gosto, e ckml não entendo, eu faço sem saber pra que serve o atributo ou tag... Ai vou na sorte de pegar do jeito que eu penso xD

Bem, vou editar denovo...pois já deixei como eu queria, mas com os botões de contato próximo do perfil. E eu queria que ficassem no rodapé ^^ do quadro da mensagem.

~ A esperança de que eu coloque de volta o code que editei daquela vez. Abraços, Ulti.
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Quadro dos Tópicos

Mensagem por ShaDownS em 08/06/14, 01:15 pm

Tive uma idéia! consegui!!!!

Agora, só falta eu ajeitar o titulo dos fóruns e subfóruns dentro de uma categoria... Os Cabeçalhos de nível 2 ou 3 (aqueles que na main page, que abaixo tem a descrição) quero aumentar para 14 e os link para os subfóruns ^^ aqueles abaixo da descrição do fórum dentro da categoria.
Vê ~> http://forumnarutoultimate.forumeiros.com

Aqui o resultado da minha edição no code do quadro do tópico ~> http://forumnarutoultimate.forumeiros.com/t1-
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Quadro dos Tópicos

Mensagem por Sennior em 09/06/14, 01:14 am

Saudações,

Os títulos dos Sub-fóruns estão corretos e sem erros... Poderia nos mandar um Print Screen do erro?

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: Quadro dos Tópicos

Mensagem por ShaDownS em 10/06/14, 01:37 am

Não, não é erro.
É pedido de código. Pode bloquear o tópico.
Ta resolvido ^^
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

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