• 2 FavoritosFavoritos
  • 25 RespuestasRespuestas
  • 5511 LeídoVeces Leído
  • 3 PuntosPuntos

Tema: [Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]

Usuario: Cesar
Rango: Friend de SMFSimple
Mensajes: 1225
Puntos: 242
Mi web: http://www.genomapc.com
Perfil: Ver Perfil
Pais:
ar
[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]


Buenas y santas a todo SMFSimple, les traigo este tutorial en el cual se explica como hacer este elegante menu de usuario, el cual es usado en el theme "The Elegant" diseñado por Lean para SMFSimple.

Para comenzar vamos a bajar a traves de nuestro FTP de Confianza el Display.template.php y el index.css del theme default o del theme que usemos.


Recuerda que si tu theme no tiene Display.template.php es porque usa el del theme default no alarmarse :P


El primer paso sera hacer las lineas horizontales que dividen cada item de nuestro perfil y agregar algunos codigos que llamaran al estilo del menu cuando lo agreguemos en el index.css, para esto iremos a nuestro editor amigo y abriremos el archivo Display.template.php


Recuerda NUNCA usar el block de notas de windows para editar archivos, ya que este llena de basura nuestro archivo y puede traernos muchos errores en nuestro foro, si no sabes que editor usar prueba bajando Notepad++ (notepad plus plus)


http://notepad-plus-plus.org/download/v5.9.3.html

tiene muchas herramientas que te hacen mas facil la vida a la hora de editar y escribir codigos en diferentes formatos :P


En nuestro Display.template.php buscamos:

Código: [Seleccionar]
// Show information about the poster of this message.
echo '
<div class="poster">
<h4>';

Reemplazamos por:

Código: [Seleccionar]
// Show information about the poster of this message.
echo '
<div class="poster">
<div class="elegantposter">
<h4>';

para hacer la lineas divisiones se usa la etiqueta

Código: [Seleccionar]
<hr />
Buscamos:

Código: [Seleccionar]
<li class="title">', $message['member']['title'], '</li>';
Reemplazamos:

Código: [Seleccionar]
<hr /><li class="title">', $message['member']['title'], '</li>';

como podemos ver lo unico que hicimos es agregar la etiqueta <hr /> antes de ese codigo.

Buscamos:

Código: [Seleccionar]
<li class="membergroup">', $message['member']['group'], '</li>';
Reemplazamos:

Código: [Seleccionar]
<hr /><li class="membergroup">', $message['member']['group'], '</li>';

Buscamos:

Código: [Seleccionar]
<li class="postgroup">', $message['member']['post_group'], '</li>';
Reemplazamos:

Código: [Seleccionar]
<hr /><li class="postgroup">', $message['member']['post_group'], '</li>';

Buscamos:

Código: [Seleccionar]
<li class="stars">', $message['member']['group_stars'], '</li>';
Reemplazamos:

Código: [Seleccionar]
<hr /><li class="stars">', $message['member']['group_stars'], '</li>';

Buscamos:

Código: [Seleccionar]
<li class="avatar">
Reemplazamos:

Código: [Seleccionar]
<hr /><li class="avatar">

Buscamos:

Código: [Seleccionar]
<li class="postcount">', $txt['member_postcount'], ': ', $message['member']['posts'], '</li>';
Reemplazamos:

Código: [Seleccionar]
<hr /><li class="postcount">', $txt['member_postcount'], ': ', $message['member']['posts'], '</li>';

Buscamos:

Código: [Seleccionar]
<li class="karma">', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '</li>';
Reemplazamos:

Código: [Seleccionar]
<hr /><li class="karma">', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '</li>';

Buscamos:

Código: [Seleccionar]
<li class="gender">', $txt['gender'], ': ', $message['member']['gender']['image'], '</li>';
Reemplazamos:

Código: [Seleccionar]
<hr /><li class="gender">', $txt['gender'], ': ', $message['member']['gender']['image'], '</li>';

Buscamos:

Código: [Seleccionar]
<li class="blurb">', $message['member']['blurb'], '</li>';
Reemplazamos:

Código: [Seleccionar]
<hr /><li class="blurb">', $message['member']['blurb'], '</li>';

Buscamos:

Código: [Seleccionar]
<li class="im_icons">
Reemplazamos:

Código: [Seleccionar]
<hr /><li class="im_icons">

Buscamos:

Código: [Seleccionar]
// Done with the information about the poster... on to the post itself.
echo '
</ul>
</div>

Reemplazamos:

Código: [Seleccionar]
// Done with the information about the poster... on to the post itself.
echo '
</ul></div>
</div>




Con esto terminamos las modificaciones del Display.template.php

Como segundo y ultimo paso agregaremos el estilo a nuestro index.css



Vamos al final de nuestro Index.css buscamos:

Y Agregamos debajo:

Código: [Seleccionar]
.elegantposter
{
padding: 0 10px;
margin-top: -3px;
text-align: center;
background: #f9f9f9;
margin-left: 3px;
border: 1px solid #dadada;
-moz-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-border-radius: 4px;
}
.elegantposter dl, .elegantposter dt, .elegantposter p
{
margin: 0;
}
.elegantposter p
{
padding: 0.5em;
}


Luego de hacer estas modificaciones nos quedara asi :)




Ojala este tutorial les sea de mucha utilidad :)
Cualquier problema creen un tema nuevo en la seccion correspondiente para que los podamos ayudar mejor y mas rapidamente

Cesar :)
No Tienes Permisos Para Dar Puntos
point 3 Puntos

Usuarios que puntuaron el tema » Isaac (3 Pts) 

Usuario: Toro
Rango: Nuevo Usuario
Mensajes: 242
Puntos: 16
Mi web: http://cfgamers.com
Perfil: Ver Perfil
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #1 Octubre 07, 2011 - 03:12 15:12
Wow, exelente aporte Cesar un poco largo pero muy bueno saludos!

Usuario: Zoom
Rango: Friend de SMFSimple
Mensajes: 382
Puntos: 12
Mi web: http://www.portalzone.net
Perfil: Ver Perfil
Pais:
mx
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #2 Octubre 07, 2011 - 03:18 15:18
Muy buen aporte +1
deberian agregar esas celdas a este theme

Usuario: Lean
Rango: Fundador
Mensajes: 6787
Puntos: 154
Perfil: Ver Perfil
Pais:
ar
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #3 Octubre 07, 2011 - 03:26 15:26
GEnial! Siempre tenia la idea de hacer el tutorial pero nunca tuve tiempo! Gracias por hacerlo!
Saludos

Usuario: Cesar
Rango: Friend de SMFSimple
Mensajes: 1225
Puntos: 242
Mi web: http://www.genomapc.com
Perfil: Ver Perfil
Pais:
ar
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #4 Octubre 07, 2011 - 03:37 15:37
GEnial! Siempre tenia la idea de hacer el tutorial pero nunca tuve tiempo! Gracias por hacerlo!
Saludos
no es nada lean :) gracias a todos por sus comentarios :D

Usuario: 4kstore
Rango: Administrador
Mensajes: 4061
Puntos: 7735
Mi web: http://www.compramosxinternet.com
Perfil: Ver Perfil
Pais:
ar
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #5 Octubre 07, 2011 - 03:46 15:46
Queda espectacular!
+1 Cech te pasaste!
Saludos!

Usuario: distante
Rango: Administrador
Mensajes: 3225
Puntos: 113
Mi web: http://www.desadaptados.net
Perfil: Ver Perfil
Pais:
pe
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #6 Octubre 07, 2011 - 04:46 16:46
+1 !!!!

no avatar
Usuario: FELIP123
Rango: Visitante
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #7 Octubre 07, 2011 - 09:58 21:58
Estaa era la que buscabaaaaaaaaaa bna tio +1

Usuario: Toro
Rango: Nuevo Usuario
Mensajes: 242
Puntos: 16
Mi web: http://cfgamers.com
Perfil: Ver Perfil
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #8 Octubre 08, 2011 - 01:41 13:41
Oie Cesar una preguntita, donde se edita el ancho del recuadro bro? lo tengo un poco ancho...

Usuario: Cesar
Rango: Friend de SMFSimple
Mensajes: 1225
Puntos: 242
Mi web: http://www.genomapc.com
Perfil: Ver Perfil
Pais:
ar
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #9 Octubre 08, 2011 - 01:44 13:44
estoy solucionando unos asuntos al respecto de este estilo de perfil te pido un poquito de paciencia por favor :)
saludos
cesar

Usuario: Toro
Rango: Nuevo Usuario
Mensajes: 242
Puntos: 16
Mi web: http://cfgamers.com
Perfil: Ver Perfil
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #10 Octubre 08, 2011 - 01:45 13:45
Sale muchas gracias..

no avatar
Usuario: Daniiel
Rango: Excelente User
Mensajes: 715
Puntos: 81
Mi web: http://www.mundonet.org/foro/
Perfil: Ver Perfil
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #11 Octubre 08, 2011 - 03:56 15:56
Excelente estilo del perfil! +1 Te quedo excelente.

no avatar
Usuario: Taburete
Rango: Recién Llegado
Mensajes: 11
Puntos: 0
Mi web: http://www.zonadjs.com.ar/foro/index.php
Perfil: Ver Perfil
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #12 Octubre 09, 2011 - 10:56 22:56
este tutorial se puede hacer en los themes adaptados de vb? esque yo intente editar y al momento de buscar lo primero  aparecia diferente. estoy usando el theme totally pro

Usuario: Cesar
Rango: Friend de SMFSimple
Mensajes: 1225
Puntos: 242
Mi web: http://www.genomapc.com
Perfil: Ver Perfil
Pais:
ar
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #13 Octubre 09, 2011 - 11:02 23:02
no sabria decirte si se puede usar en un theme adaptado u.u

no avatar
Usuario: Taburete
Rango: Recién Llegado
Mensajes: 11
Puntos: 0
Mi web: http://www.zonadjs.com.ar/foro/index.php
Perfil: Ver Perfil
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Respuesta #14 Octubre 09, 2011 - 11:10 23:10
y si te paso el display te podrias fijar¿

 

TAGS




top

Smfsimple.com es un sitio destinado a brindar un servicio de soporte y herramientas para foros realizados con el sistema de foros gratuito simplemachines.org. Contamos con un selecto equipo de desarrolladores y conocedores del sistema, sus foros estaran en buenas manos.
This site is not affiliated with or endorsed by Simple Machines