• 1
  • 25 RepliesReplies
  • 19794 ReadTimes Read
  • 4 PointsPoints

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

Usuario: Cesar
Rango: Friend de SMFSimple
Mensajes: 1227
Points: 254
Mi web: http://www.genomapc.com
Perfil: View Profile
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:

Code: [Select]
// Show information about the poster of this message.
echo '
<div class="poster">
<h4>';

Reemplazamos por:

Code: [Select]
// 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

Code: [Select]
<hr />
Buscamos:

Code: [Select]
<li class="title">', $message['member']['title'], '</li>';
Reemplazamos:

Code: [Select]
<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:

Code: [Select]
<li class="membergroup">', $message['member']['group'], '</li>';
Reemplazamos:

Code: [Select]
<hr /><li class="membergroup">', $message['member']['group'], '</li>';

Buscamos:

Code: [Select]
<li class="postgroup">', $message['member']['post_group'], '</li>';
Reemplazamos:

Code: [Select]
<hr /><li class="postgroup">', $message['member']['post_group'], '</li>';

Buscamos:

Code: [Select]
<li class="stars">', $message['member']['group_stars'], '</li>';
Reemplazamos:

Code: [Select]
<hr /><li class="stars">', $message['member']['group_stars'], '</li>';

Buscamos:

Code: [Select]
<li class="avatar">
Reemplazamos:

Code: [Select]
<hr /><li class="avatar">

Buscamos:

Code: [Select]
<li class="postcount">', $txt['member_postcount'], ': ', $message['member']['posts'], '</li>';
Reemplazamos:

Code: [Select]
<hr /><li class="postcount">', $txt['member_postcount'], ': ', $message['member']['posts'], '</li>';

Buscamos:

Code: [Select]
<li class="karma">', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '</li>';
Reemplazamos:

Code: [Select]
<hr /><li class="karma">', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '</li>';

Buscamos:

Code: [Select]
<li class="gender">', $txt['gender'], ': ', $message['member']['gender']['image'], '</li>';
Reemplazamos:

Code: [Select]
<hr /><li class="gender">', $txt['gender'], ': ', $message['member']['gender']['image'], '</li>';

Buscamos:

Code: [Select]
<li class="blurb">', $message['member']['blurb'], '</li>';
Reemplazamos:

Code: [Select]
<hr /><li class="blurb">', $message['member']['blurb'], '</li>';

Buscamos:

Code: [Select]
<li class="im_icons">
Reemplazamos:

Code: [Select]
<hr /><li class="im_icons">

Buscamos:

Code: [Select]
// Done with the information about the poster... on to the post itself.
echo '
</ul>
</div>

Reemplazamos:

Code: [Select]
// 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:

Code: [Select]
.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 :)
You do not have permission to give points
point 4 Points

Users who gave points in this topic » do///gd (1 Pts) 

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

no avatar
Usuario: Zoom
Rango: Friend de SMFSimple
Mensajes: 384
Points: 13
Mi web: http://www.portalzone.net
Perfil: View Profile
Pais:
mx
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Reply #2 October 07, 2011 - 03:18 15:18
Muy buen aporte +1
deberian agregar esas celdas a este theme

Usuario: Lean
Rango: Fundador
Mensajes: 6782
Points: 236
Perfil: View Profile
Pais:
ar
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Reply #3 October 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: 1227
Points: 254
Mi web: http://www.genomapc.com
Perfil: View Profile
Pais:
ar
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Reply #4 October 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: Moderador Global
Mensajes: 4916
Points: 8111
Mi web: http://www.smfsimple.com
Perfil: View Profile
Pais:
ar
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Reply #5 October 07, 2011 - 03:46 15:46
Queda espectacular!
+1 Cech te pasaste!
Saludos!

Usuario: Papá distante
Rango: Moderador Global
Mensajes: 3504
Points: 168
Perfil: View Profile
Pais:
de
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Reply #6 October 07, 2011 - 04:46 16:46
+1 !!!!

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

Usuario: Toro
Rango: Nuevo Usuario
Mensajes: 242
Points: 18
Mi web: http://cfgamers.com
Perfil: View Profile
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Reply #8 October 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: 1227
Points: 254
Mi web: http://www.genomapc.com
Perfil: View Profile
Pais:
ar
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Reply #9 October 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
Points: 18
Mi web: http://cfgamers.com
Perfil: View Profile
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Reply #10 October 08, 2011 - 01:45 13:45
Sale muchas gracias..

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

no avatar
Usuario: Taburete
Rango: Recién Llegado
Mensajes: 11
Points: 0
Mi web: http://www.zonadjs.com.ar/foro/index.php
Perfil: View Profile
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Reply #12 October 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: 1227
Points: 254
Mi web: http://www.genomapc.com
Perfil: View Profile
Pais:
ar
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Reply #13 October 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
Points: 0
Mi web: http://www.zonadjs.com.ar/foro/index.php
Perfil: View Profile
Re:[Tutorial] The Elegant User Menu [SMF 2.0 - 2.0.1]
Reply #14 October 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