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

[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


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


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