Centralizar o perfil

[AlvoErrado2]

Qual a URL do seu fórum: http://forum.autoclandestinos.com/forum/index.php
Tipo de Hospedagem:Pago
Qual a versão do phpBB: 3.0.10
É um novo ou uma conversão: Instalação Limpa
Usuário de teste: Usuário: N/D Senha: N/D
Estilos instalados: prosilver
Artodia: Mobile Blue
Artodia: Ultra Blue
subsilver2
Absolution
proglass
Terayon 4
proFormell
Saphic
IDLaunch_Black
IDLaunch_Blue
IDLaunch_Fresh
Artodia: Deluxe *
Modificações instaladas: Automod
Advanced BBcode Box 3
BBcode Buttons for quick reply
Full Style Refresh
Qual seu nivel de experiência: Intermediario
Quando começou o problema: Quando instalei o style Artodia: Deluxe
Descreva seu problema: Gostaria de saber o que preciso fazer para deixar centralizada as informações do perfil, já tentei mexer em vários códigos css e nada surtiru efeito, o style padrão é o Artodia Deluxe, mas já tentei em outros styles e nada surtiu efeito.

Eu conseguir centralizar o perfil, mas a forma que busco é apenas deslocar os elementos para o meio da área, mas mantendo o mesmo formato que está, ou seja só deslocar os elementos para o centro sem ficar naquele formato centralizado (que eu já conseguir fazer dessa forma).

Estou testando todas as modificações numa versão local e só depois de chegar ao resultado esperado é que passarei as modificações para a versão online.

[gssilva]

Abra o aquivo layout_topic.css que está no diretório theme e ache o código:

Código: Selecionar todos

.postprofile {
	margin: 2px 0 10px 0;
	min-height: 80px;
	color: #444;
	border-left: 1px solid #ccc;
	width: 22%;
	float: right;
	word-wrap: break-word;
}

Então adicione logo antes de }:

Código: Selecionar todos

	text-align: center;

Atualize o tema na aba Estilos.

Qualquer dúvida basta postar.

[AlvoErrado2]

Eu já testei esse código, ele centraliza tudo, tanto nome de usuário quanto rank e todas as informações abaixo.

Eu estou querendo um código aonde desloque as informações para o meio, mas mantendo o aspecto justificado, não quero que fique com aquele aspecto de centralizado, se não for possível, um código que centralize apenas o rank e o nome de usuário e avatar já seria satisfatório.

Este código abaixo centralizou o nome do usuário e avatar

Código: Selecionar todos

.postprofile dt {
text-align: center;
}

Agora estou testando uns para centralizar o rank e o nome do rank, mas até agora sem sucesso, até agora foi ou tudo ou nada.

Existe algum código que delimite as margens das informações: por exemplo margem esquerda xpx e margem direita xpx, fazendo assim que as informações comecem a partir de tantos pixels da margem esquerda e vão até tantos pixels na margem direita. sendo x um número ou porcentagem qualquer.

[Holmes]

vc já usou o inspecionar elementos da página com o navegador chrome? talvez ele possa te ajudar a encontrar as variáveis para realizar as modificações. veja esse tutorial

kb.php?a=106

vlw fwi, Holmes

[gssilva]

Abra o arquivo layout_topic.css e ache o código:

Código: Selecionar todos

.postprofile {
	margin: 2px 0 10px 0;
	min-height: 80px;
	color: #444;
	border-left: 1px solid #ccc;
	width: 22%;
	float: right;
	word-wrap: break-word;
}

Adicione logo abaixo:

Código: Selecionar todos

.postprofile .profile_center{
	text-align: center;
}

Abra o arquivo viewtopic_body.html e ache o código:

Código: Selecionar todos

			<dt>
				<!-- IF postrow.POSTER_AVATAR -->
					<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
				<!-- ENDIF -->
				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
			</dt>

Substitua por:

Código: Selecionar todos

			<dt>
				<!-- IF postrow.POSTER_AVATAR -->
					<!-- IF postrow.U_POST_AUTHOR --><div class="profile_center"><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}</div><!-- ENDIF --><br />
				<!-- ENDIF -->
				<!-- IF not postrow.U_POST_AUTHOR --><div class="profile_center><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}</div><!-- ENDIF -->
			</dt>

Atualize a templete e o tema do estilo.

Qualquer dúvida basta postar.

[robra]

Eu conseguir centralizar o perfil, mas a forma que busco é apenas deslocar os elementos para o meio da área, mas mantendo o mesmo formato que está, ou seja só deslocar os elementos para o centro sem ficar naquele formato centralizado (que eu já conseguir fazer dessa forma).

Só para esclarecer:
Você quer extamente isso:

img000.jpg

Não é isso...

img001.jpg

... e nem isso também.

img002.jpg

Correto ?

Abraço.

[AlvoErrado2]

Consegui parcialmente o que queria usando o código que citei mais acima e mais esse abaixo, mudando os valores de margin-left, mas ainda não consegui alterar a posição da imagem do rank, ainda estou batendo cabeça com isso.

Código: Selecionar todos

.postprofile dd, .postprofile dt {
	line-height: 1.2em;
	margin-left: 8px;
	font-size: 11px;

robra,

Eu quero que o avatar, o nome de usuário é rank (nome e a imagem) fiquem centralizados como na segunda imagem, e que as informações como mensagens e registrado em fiquem igual na primeira imagem. Eu já consegui mexendo aqui mudar o lugar de mensagens e registrado em mais para o meio do perfil, e também o avatar e o nome do usuário, ainda não consegui alinhar o rank com o avatar e o nome de usuário, todo código que tento ele fica alinhado com o as informações (mensagens e registrado em).

[AlvoErrado2]

Problema resolvido usando o código abaixo e alterando os valores em margin-left como disse na mensagem anterior, obrigado a todos que fizeram sugestões para ajudar-me.

Abra o arquivo viewtopic_body.html no Notepad++ e encontre o seguinte código:

Código: Selecionar todos

             <dt>
                <!-- IF postrow.POSTER_AVATAR -->
                   <!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
                <!-- ENDIF -->
                <!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
             </dt>

             <!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd>{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->

E substitua por este:

Código: Selecionar todos

             <dt style="text-align: center;">
                <!-- IF postrow.POSTER_AVATAR -->
                   <!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
                <!-- ENDIF -->
                <!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
             </dt>

             <!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd style="text-align: center;">{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->

Obrigado a todos, problema resolvido.

[gssilva]

Que bom que conseguiu solucionar o problema e compartilhou a solução conosco. :)

Qualquer dúvida basta criar um tópico novo. ;)

[robra]

Fica difícil de passar a orientação correta porque todas estas informações do perfil estão dentro de uma <div>, que por sua vez, originalmente estava do lado direito da página.
Você mudou a informação do perfil para o lado esquerdo da página e agora não sabemos de a largura do campo onde estão as informações vai até a barra que divide com o campo da mensagem postada ou se é menor.
Não tem como você colocar ele online para que se possa analisar corretamente ?

Abraço.