Blogger invitada: Nekko 13 de mayo de 2009 a las 10.08
   Imprimir artículo
elWebmaster.com

Taller de vBulletin: Editar mis plantillas


En esta clase vamos a editar dos plantillas de nuestro style: Header y Postbit_Legacy. 驴Porqu茅 s贸lo estas dos? Porque servir谩n bien de ejemplo para que puedas entender c贸mo funciona el sistema de edici贸n de plantillas y porque son las dos plantillas que m谩s te van a interesar para empezar con el foro.

隆Despu茅s de esta clase estar谩s listo para comenzar con la edici贸n de tus propias plantillas!

Antes que nada, recordemos que vamos a tener que manejarnos con styles basados en tablas, reci茅n en la esperada vbulletin 4 vamos a tener styles “tableless”.

Personalizando el header

Busquemos la plantilla header, en donde se encuentra el encabezado de nuestro foro. Desde el AdminCP vamos a Styles & Templates > Search in Templates y colocamos la palabra “header” seleccionando el Style en el que lo queremos buscar. Esta b煤squeda puede utilizarse para porciones de c贸digo que debemos buscar o para nombres de plantillas.

editar01

Obtendremos el siguiente listado:

editar02

Bastar谩 con hacer doble clic en la plantilla llamada “header”, marcada en rojo en este caso, para que se abra el editor y podamos comenzar a trabajar.

editar03

Podr谩s ver un entorno de edici贸n bastante sencillo, en donde creo que vale la pena remarcar dos funciones:

  1. Por un lado la funci贸n integrada del Search dentro de la misma plantilla.
  2. Por otro la opci贸n para ir guardando en el historial de la plantilla agregando nuestros comentarios. Esto 煤ltimo nos permite revertir cambios realizados que no den el resultado esperado.

En el caso de querer modificar el logo, simplemente nos dirigimos a Styles & Templates > Style Manager y buscamos la opci贸n de “StyleVar” en nuestro Style. Podr谩s ver que modificar la imagen por defecto es sencillo si has comprendido c贸mo almacena y busca las im谩genes el foro.

editar04

Si prefieres hacerlo a tu modo, puedes tomar la porci贸n del template en donde forma el logo y reescribirlo de un modo diferente. Por ejemplo, si quisieras un header con espacio para dos im谩genes (tu logo a la izquierda y un banner a la derecha), podr铆as reemplazar lo que est谩 entre comentarios <!-- logo --> por algo como esto:

<a name="top"></a>
<table border="0" cellspacing="0" cellpadding="0" width="$stylevar[outertablewidth]" align="center">
<tr>
<td width="400"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img class="logo" src="style/misc/logo.gif" border="0" alt="$vboptions[bbtitle]" width="400" height="122" /></a></td>
<td width="420"><a href="http://www.dirdelbanner.com/promo.html"><img src="style/ads/banner.jpg" border="0" alt="" width="420" height="100" /></a></td>
</tr>
</table>

De ese modo indicamos espec铆ficamente d贸nde guardamos nuestros archivos tanto del logo como del banner que pondremos a la derecha. Si conocemos algo de html veremos que es muy rudimentario. No tendremos problemas en encontrar documentaci贸n googleando para aprender a usar las tablas.

Si est谩s seguro del cambio que has efectuado en la plantilla, haz clic en “Save” para guardar los cambios. A continuaci贸n, ir谩s al men煤 principal. Si haces clic en “Save and Reload”, recargar谩 la plantilla por si deseas efectuar cualquier cambio adicional.

Personalizando el postbit_legacy

Esta plantilla es la que genera el modo en que se ven los mensajes dentro de un thread, incluida la informaci贸n del usuario a la izquierda y su firma. Nos van a interesar los dos 煤ltimos items por el momento.

Echando un vistazo a la plantilla, podemos empezar a identificar lo que vemos en la informaci贸n del usuario:

editar05

<if condition="$show['profile']">
<a class="bigusername" href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a>
<script type="text/javascript">
vbmenu_register("postmenu_$post[postid]", true); </script>
<else />
$post[musername]
</if>
</div>

Podemos ver que esa secci贸n es la que muestra el nickname y el link al men煤 desplegable caracter铆stico de la plataforma.

Luego vemos c贸mo verifica si debe mostrar t铆tulo de usuario y llama a la variable que almacena al mismo:

<if condition="$post['usertitle']"><div class="smallfont">$post[usertitle]</div></if>

Siguiente condicional para聽el rango o las im谩genes de rango聽(esta funci贸n se usa para las famosas “chapitas del moderador”)

<if condition="$post['rank']"><div class="smallfont">$post[rank]</div></if>

El avatar:

<if condition="$show['avatar']">
<div class="smallfont">
&nbsp;<br /><a聽聽 href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>
</div>
</if>

Y sigue enunciando condicionales, en donde verifica si la funci贸n est谩 o no activada, y el respectivo llamado a la variable que almacena la informaci贸n en cuesti贸n.

Lo que debemos saber es que si hay algo que queremos activar o desactivar, tenemos que hacerlo desde vBulletin Options o desde la solapa que corresponda. Editar sobre la plantilla es recomendable para cuando queremos modificar el orden en el que se muestra la informaci贸n. Para cambiar el orden, s贸lo debemos cortar y pegar la sentencia que comienza, generalmente, en <if..> hasta </if>.

Si tenemos necesidad de modificar el modo en que se muestran las firmas, tambi茅n debemos hacerlo desde esta plantilla. Una modificaci贸n recomendada es Forzar las firmas hacia abajo, la cual no lleva mucho esfuerzo.

La edici贸n de plantillas tambi茅n se utiliza para completar la instalaci贸n de la gran mayor铆a de los hacks, aunque versi贸n a versi贸n los coders mejoran su t茅cnica y logran que se inserten autom谩ticamente las modificaciones. En la pr贸xima clase vamos a ver que tambi茅n es necesario dominar un poco esta secci贸n para poder insertar anuncios, publicidades y banners en general en donde lo necesitemos.

Finalmente, ver谩s que puedes definir clases CSS adicionales en Styles & Templates > Style Manager > Main CSS. Hacia el final de esa secci贸n encontrar谩s el recuadro de Additional CSS Definitions en donde podr谩s agregar clases para usar en cualquier secci贸n del foro. Con conocimientos muy b谩sicos de la materia, podr谩s introducir cambios en el dise帽o de tu foro, de modo que puedas personalizarlo totalmente.

<< CLASE ANTERIOR
CLASE SIGUIENTE >>

Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Erick dice:

    Hey! no existe algo asi para editar plantillas de joomla,o por favor no podrian crear un toturial para hacer eso mas facil en joomla?
    porque los tutoriales sobre edicion de plantillas joomla que he encontrado me dejaron mas perdido jeje

    Saludos

  2. Nekko dice:

    Para Joomla ten茅s (o ten铆as) un plugin para Dreamweaver que te ayudaba en la creaci贸n y modificiaci贸n de plantillas. El que en su momento hizo unos excelentes tutoriales sobre creaci贸n de plantillas para Joomla fue Leandro D麓Onofrio, de qui茅n te dejo un link para que mires y veas si algo te sirve. http://www.leandrodonofrio.com/recursos/joomla/tutorial-crear-un-template-para-joomla-15-desde-cero

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder