Ulzurrun de Asanza i Sàez

Aprende a crear themes para Simple Machines Forum

Al comienzo del desarrollo de proSilver para SMF (a falta de un nombre definitivo) me topé con un gran problema: no encontraba tutoriales para aprender a crear themes (temas) para Simple Machines Forum (SMF) y toda la documentación que encontré estaba completamente en inglés.

En vista a que no encontraba nada, comencé a diseñar el theme partiendo del tema Core (el que hasta la versión 2.0 venía por defecto en SMF) y a la vez estuve tratando de aprender cómo funcionan los themes, las variables a tener en cuenta, el funcionamiento de cada archivo, etc.

Todo lo que he ido aprendiendo creo que le puede ser de mucha utilidad a cualquiera que esté interesado en el tema de la creación de themes para SMF y no encuentre información al respecto. Lo que voy a publicar no es una traducción del contenido de la documentación de SMF, sinó todas las notas mentales, aclaraciones, descubrimientos y demás que he ido viendo a lo largo del desarrollo del theme (que por cierto, cada día está más cerca).

No voy a publicarlo todo en un único artículo, ya que sería demasiado largo, y tardaría mucho en escribirlo, así que voy a ir poco a poco, comenzando desde los primeros archivos que modifiqué hasta llegar a los últimos que estoy modificando.

Introducción al sistema de themes de Simple Machines Forum

Antes de crear un theme, tenemos que tener claro qué es un theme y cómo funciona.

En líneas generales, un theme es un conjunto de archivos que son llamados por SMF cuando accedemos a cada página. Estos archivos contienen las instrucciones (en PHP) para mostrar el contenido de cada página: estructura, imágenes, textos, colores, etc.

¿Qué pasaría si no tuviésemos theme? Pues que al acceder a cualquier página, todo lo que veríamos sería un fondo blanco, aunque el foro en sí, sí que funcionaría, pero no se podría mostrar el contenido al que se pretende acceder.

El theme sólo toma valores de las variables que define SMF y los muestra. La diferencia básica entre los themes de SMF y los de otros CMS es que los temas de SMF no sólo muestran las variables, sinó que definen algunas funciones importantes del diseño (como la función de crear el menú, la de mostrar los botones, etc), llevando al máximo la personalización que ofrece el foro.

Sin embargo, esto también tiene un lado negativo, y es que crear un theme para SMF es más complicado (aunque tampoco muchísimo más) que crearlo para otro CMS y se requieren unos conocimientos básicos de PHP, aunque mejor avanzados (y como en cualquier otro CMS, de HTML y CSS).

Por último, hay que destacar el funcionamiento de los themes del SMF. Cuando se accede a un foro con un determinado theme activado, SMF comprobará la carpeta que contiene el theme en busca de los archivos necesarios para crear la página (index.template.php, boardindex.template.php, etc). En el caso de que no encuentre uno de los archivos del theme, SMF pasará a sustituirlo por el archivo correspondiente del theme default (Core).

Pero también hay que tener en cuenta que cada archivo incluye las funciones que muestran el contenido, así que si el archivo index.template.php existe, SMF lo cargará, pero si no está definida la función que muestra el contenid0 (no el código que muestra el contenido, sinó la función, en este caso template_init, que lo muestra), SMF mostrará un error.

Así que hay que diferenciar en el código que muestra el contenido (echo ‘contenido’) y la función que muestra el contenido, que en cada archivo es diferente (en index.template.php, template_init()). Aunque esto se verá de forma mucho más clara a lo largo de las próximas publicaciones.

En las próximas semanas iré publicando más información y seguiré continuando el tutorial.


4 replies on “Aprende a crear themes para Simple Machines Forum

  1. Muchas gracias por toda la información, ya que también estoy interesado en crear mi propio theme y me veo un poco verde, tengo conocimientos básicos, pero no me veo capaz xD Espero la próxima parte *-* También me gustaría que hicieses un tutorial para hacer la estructura del calendario como la que has puesto al proSilver para SMF, me encanta como te ha quedado, el calendario de SMF es bastante cutre >_> xD
     
    Muchas gracias, saludos ^^

  2. Jaja pues precisamente el calendario es una de las cosas que menos he modificado del theme.
    Para adaptarlo lo único que he modificado ha sido el style.css, he añadido al final:
    <pre name="code" class="css">
    tr td.catbg {
    background:#FFF;
    padding:10px;
    -moz-border-radius:5px;
    }

    tr td.windowbg {
    background:#FFF;
    padding:5px;
    -moz-border-radius:5px;
    }

    tr td.calendar_today {
    background:#0A90D2;
    padding:5px;
    -moz-border-radius:5px;
    color:#FFF;
    }

    td.windowbg2 table {
    background:#FFF;
    -moz-border-radius:5px;
    padding:5px;
    margin:2%;
    width:96%;
    }
    </pre>
    Ten en cuenta que yo he modificado el resto de las tablas del theme. Si usas este código CSS con el theme default, conseguirás un calendario parecido, pero el resto del foro se deformará :-( .

    La próxima parte espero publicarla pronto. Me gustaría detallar un poco qué hace cada archivo y luego pasar a editar el index.template.php, pero tengo que pensar cómo explicar el archivo… creo que explicar línea a línea que hace cada cosa es muy pesado, así que puede que explique cómo crear uno mismo el theme proSilver para SMF, así me facilitaría bastante la redacción del tutorial.

  3. Gracias por la respuesta y tan rápida =D Aun que yo no me refería al estilo, me refería a la estructura (los 3 minicalendarios a la izquierda), pero lo que pasa es que no había caído que estás usando SMF 2 y yo estoy utilizando el 1.1.x, creía que eso lo habías editado tú, pero ya he visto que SMF 2 trae el calendario más bonito. A si que tendré que esperarme hasta que me cambie de versión.
     
    He visto que ya has publicado la siguiente parte, me voy a leerla =D . Muchas gracias, saludos ^^

Leave a Reply to Sermax Cancel reply

Your email address will not be published.

Required fields are marked *

Your avatar