Advertisement:

Author Topic: [Tutorial] Cómo preparar tu Theme para descarga/aprobación  (Read 4835 times)

Offline Diego Andrés

  • Customizer
  • SMF Hero
  • *
  • Posts: 3,357
  • Gender: Male
    • DiegoSetroc on GitHub
    • @bihgetter on Twitter
    • SMF Tricks - Free & Premium Themes
[Tutorial] Cómo preparar tu Theme para descarga/aprobación
« on: February 15, 2014, 02:45:26 PM »
Hola a todos, hoy les explicaré como tener nuestro theme listo para ser enviado al Theme Site y posteriormente aprobado.
Bueno, primero que nada nuestro Theme va a requerir de 4 carpetas y cuatro archivos necesariamente para que todo esté perfecto.

¿Cuáles carpetas y archivos?
Pues las carpetas serían css, images, scripts, languages
Los archivos que si son necesarios son cuatro: index.template.php, index.php, theme_info.xml, license.txt

Cualquiera sabría que se necesita la carpeta css e images.
Sin embargo probablemente algunos no sabían que se requieren las otras.
Bueno además de la carpeta images que ya sabemos que es necesaria y que lleva, les explicaré que archivos llevan todas estas carpetas, o qué archivos deben llevar.



Themes/nuestrotheme/css/
En esta carpeta deberíamos encontrarnos con dos archivos:
  • index.css
    En este archivo tendremos toda la plantilla de estilos de nuestro theme como bien saben
  • rtl.css
    Este archivo es necesario incluirlo en nuestro theme, lo pueden copiar del theme default. En este archivo se utiliza para aquellos usuarios que utilizan un languaje de derecha-izquierda, en su mayoría árabes o hebreos



Themes/nuestrotheme/images/
En esta carpeta encontraremos todas las imágenes que son necesarias para el theme. Por lo regular debe o debería de haber un aproximado de 281 archivos y 8 carpetas incluyendo la carpeta llamada english la cual incluye una imagen llamada new.gif y un archivo index.php.
¿Qué deberíamos editar en esta carpeta?
Todo lo que sea requerido en tu theme, si es necesario puedes eliminar imágenes que no sean requeridas en tu theme, por ejemplo el main_block.png en caso de que solo uses CSS. Sin embargo hay una imagen que si es necesario que sea editada.
  • Themes/nuestrotheme/images/thumbnail.gif
    Esta imagen la debemos reemplazar por una imagen "distintiva" de nuestro theme y debe ser exactamente del mismo tamaño de preferencia. Puedes poner una previa en miniatura del Theme o una imagen con el nombre del Theme.



Themes/nuestrotheme/scripts/
En esta carpeta solamente un archivo es obligatorio/necesario.
  • theme.js
    En este archivo nos encontraremos funciones que son necesarias para el theme, y además en este archivo podemos añadir cualquier función jquery, por ejemplo de un login o un accordion.
Fuera de este archivo, podemos incluir todo lo que nuestro theme requiera, como por ejemplo alguna librería jquery que podríamos agregarla como jquery.js y luego incluirla en nuestro index.template.php. Sin embargo, las únicas fuentes externas que se permiten son Google CDN y Jquery.



Themes/nuestrotheme/languages/
Por lo general esta carpeta solo necesita un archivo obligatoriamente el cuál sería Settings.english.php (lo podemos copiar del theme default).
  • Settings.english.php
    En este archivo solamente hay dos strings de texto, a la primera no le cambiaremos nada. La segunda variable de texto ($txt['theme_description']). Debajo les explico como editar esto.
  • ThemeStrings.english.php
    Este archivo solo se va a incluir si en tu Theme has indicado que se va a ocupar. Sirve para agregar variables de texto con cosas que tal vez SMF no tiene.
¿Qué edito en Settings.english.php?
Tomamos esta línea:
Code: [Select]
$txt['theme_description'] = 'The default theme from Simple Machines.<br /><br />Author: The Simple Machines Team';Y aquí nosotros pondremos nuestros créditos, algo como:
Code: [Select]
$txt['theme_description'] = 'Nuevo Theme.<br /><br />Author: <a href="http://simplemachines.org" target="_blank">SimpleMachines</a>';


Themes/nuestrotheme/license.txt
Para publicar un theme en SimpleMachines, es necesario que tenga una licencia.
Puedes utilizar cualquiera de las que se ofrecen en internet para usarla en tu trabajo, o redactar una propia.
No hay mucho que decir, puedes revisar alguno de nuestros themes o incluso otros del Theme Site de smf en los que las personas incluyen sus propias licencias.
Puedes encontrar información en inglés, en el siguiente enlace: http://www.simplemachines.org/community/index.php?topic=461016
Y acá puedes revisar un poco más: http://wiki.simplemachines.org/smf/Customization_approval_guidelines#Copyright_and_Credit



Themes/nuestrotheme/theme_info.xml
Este archivo es súpero importante y obligatorio/necesario para que tu Theme se pueda instalar en cualquier foro una vez que lo pongas en descarga.
En este archivo nosotros tendremos algo como esto:
Code: [Select]
<?xml version="1.0"?>
<theme-info xmlns="http://www.simplemachines.org/xml/theme-info" xmlns:smf="http://www.simplemachines.org/">
<!-- For the id, always use something unique - put your name, a colon, and then the package name. -->
<id>tunombre:nombre_de_nuestro_theme</id>
<version>Versión de SMF</version>
<!-- Theme name, used purely for aesthetics. -->
<name>El nombre de nuestro theme, puedes usar espacios</name>
<!-- Author: your email address or contact information. The name attribute is optional. -->
<author name="tu nombre">Tu correo</author>
<!-- Website... where to get updates and more information. -->
<website>Algún link de tu web</website>
<!-- Template layers to use, defaults to "html,body". -->
<layers>html,body</layers>
<!-- Templates to load on startup. Default is "index". -->
<templates>index</templates>
<!-- Base this theme off another? Default is blank, or no. It could be "default". -->
<based-on></based-on>
</theme-info>

El de arriba es una ejemplo, ahora veamos como quedaría bien.
Code: [Select]
<?xml version="1.0"?>
<theme-info xmlns="http://www.simplemachines.org/xml/theme-info" xmlns:smf="http://www.simplemachines.org/">
<!-- For the id, always use something unique - put your name, a colon, and then the package name. -->
<id>diego:mi_nuevo_theme</id>
<version>2.0.7</version>
<!-- Theme name, used purely for aesthetics. -->
<name>Mi Nuevo Theme</name>
<!-- Author: your email address or contact information. The name attribute is optional. -->
<author name="Diego Andrés">diegoandres_cortes@outlook.com</author>
<!-- Website... where to get updates and more information. -->
<website>http://www.smfhispano.net/</website>
<!-- Template layers to use, defaults to "html,body". -->
<layers>html,body</layers>
<!-- Templates to load on startup. Default is "index". -->
<templates>index</templates>
<!-- Base this theme off another? Default is blank, or no. It could be "default". -->
<based-on></based-on>
</theme-info>



Themes/nuestrotheme/index.template.php
Pues es muy simple y todos lo saben, en ese archivo se encuentra toda la estructura básica del theme.

Themes/nuestrotheme/index.php
Este archivo básicamente solo contiene lo siguiente:
Code: [Select]
<?php

// Try to handle it with the upper level index.php. (it should know what to do.)
if (file_exists(dirname(dirname(__FILE__)) . '/index.php'))
include (dirname(dirname(__FILE__)) . '/index.php');
else
exit;

?>

Lo pueden copiar y pegar del Theme default.



Bueno y prácticamente eso sería todo, pero faltaría una cosa más... Empaquetarlo

¿Cómo empaqueto mi Theme?
Pues con cualquier compresor como Winrar. Debes seleccionar las carpetas mencionadas (css,images,languages,scripts) y los archivos que tenga nuestro theme y le damos en añadir al archivo escogemos de preferencia .zip y también de preferencia no usar espacios en blanco en el nombre del zip.

Lo que NO debes hacer es comprimir la carpeta del Theme, eso NO es correcto, sino los archivos del Theme son los que se seleccionan y se comprimen.

¡Felicidades, tu theme ya está listo para ser propagado y posteriormente descargado! Envíalo al Theme Site a través del siguiente enlace http://custom.simplemachines.org/themes/index.php?action=posttheme;sa=new

Recuerda que debe de estar en inglés la descripción.

¡Saludos!

Más información en.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,167
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
Re: [Tutorial] Cómo preparar tu Theme para descarga/aprobación
« Reply #1 on: July 02, 2014, 04:55:19 PM »
xD ahora entiendo por q ningún thema mio fue aprobado 
por cierto es necesario que pase la validación  XHTML?

Offline Diego Andrés

  • Customizer
  • SMF Hero
  • *
  • Posts: 3,357
  • Gender: Male
    • DiegoSetroc on GitHub
    • @bihgetter on Twitter
    • SMF Tricks - Free & Premium Themes
Re: [Tutorial] Cómo preparar tu Theme para descarga/aprobación
« Reply #2 on: July 02, 2014, 06:46:58 PM »
xD ahora entiendo por q ningún thema mio fue aprobado 
por cierto es necesario que pase la validación  XHTML?

Sí es necesaria.
Bueno en sí este tema es más que nada sobre cómo tener listo el theme para ponerlo en descarga, más no se hace referencia a los lineamientos de aprobación tales como la validación de HTML.
Por eso mismo dejé el link este al final del post http://wiki.simplemachines.org/smf/Customization_approval_guidelines  :P

Saludos

SMF Tricks - Free & Premium Responsive Themes for SMF.