News:

Wondering if this will always be free?  See why free is better.

Main Menu

Que necesito para crear un tema?

Started by falcon1221, April 06, 2015, 08:03:17 PM

Previous topic - Next topic

falcon1221

Hola a todos, saludos, quiero saber que necesito para crear temas para mi foro, se que diran, necesitas saber css, html, etc. si ya se eso, pero lo que les pregunto es:

como creo temas propios para foro?

que programa necesito?, donde lo diseño?


espero respuestas, gracias
TweetModificar mensaje

Diego Andrés

Quote from: falcon1221 on April 06, 2015, 08:03:17 PM
se que diran, necesitas saber css, html, etc. si ya se eso, pero lo que les pregunto es:

Pues es lo más normal, porque si ya sabes eso, las dificultades deberían ser mínimas

Quote from: falcon1221 on April 06, 2015, 08:03:17 PM
que programa necesito?, donde lo diseño?

Va de la mano con lo anterior, si ya sabes por lo menos CSS y HTML, sabrás que necesitas un editor de texto como Notepad++, Sublime Text o Dreamweaver.




Y antes de que me respondas algo como "Eso no ayuda en nada", te dejo este tema: http://www.simplemachines.org/community/index.php?topic=524831.0
Si le echas un vistazo notarás que lo único que el usuario hizo fue modificar el css (index.css) ni siquiera html

¿Necesitas más ayuda todavía? Revisa estos temas (gías) que yo mismo escribí
http://www.simplemachines.org/community/index.php?topic=518652.0 (Preparar un theme para descarga y conocer los archivos que contiene o debería contener)

Este otro nunca lo publiqué, así que te lo dejo en quote
Quote from: Diego Andrés
Hola que tal a todos en SMF.
Esta será la segunda guía acerca de la creación de themes.
Nota: En esta guía usted no necesitará editar ningun archivo adicional del contenido, por lo que su Theme puede permanecer únicamente con su index.template.php e index.php

Editando nuestro primer theme (main_block)

Primero empezaremos desde lo más básico, lo cual es la edición de las imágenes de Themes/{theme}/images/theme/main_block.png y Themes/{theme}/images/theme/menu_gfx.png.
Para algunos esto será algo completamente sencillo, pan comido. Sin embargo, para otro será algo nuevo así que comenzaré...


1. Explicando los sprites de Themes/{theme}/images/theme/main_block.png
A continuación les explicaré con números qué parte del foro afecta cada parte de nuestra imagen.

main_block.png Ver imagen
Nota: Sólo mostraré imagen de lo que se requiera.

  • Este afectará la cabecera de nuestro foro. Puede variar el tamaño del alto del color que le quieras dar dependiendo de su contenido.
  • Esto es la parte baja de nuestro foro que se encuentra arriba del footer, puedes estirarla y hacerla más alta para cubrir el footer.
  • Es preferible dejarlo así, este es el fondo de los mensajes que están esperando aprobación.
  • Nuestro primer color de windowbg. (windowbg) Ver imagen
  • Nuestro segundo color de windobg. (windowbg2) Ver imagen
  • El color de fondo de roundframe. Ver imagen
  • Nuestro title_barIC y titlebg. (roundframe) Ver imagen
  • Nuestro cat_bar y catbg. (roundframe) Ver imagen
  • Nuestro titlebg y title_bar. Ver imagen
  • Nuestro catbg y cat_bar. Ver imagen
  • Nuestro catbg. (tablas) Ver imagen
  • Nuestro titlebg. (tablas) Ver imagen
  • Por lo general si el theme no será obscuro no haría falta que lo edites, esa parte puede afectar el color blanco del fondo del contenido de nuestro foro.



2. Explicando los sprites de Themes/{theme}/images/theme/menu_gfx.png
Esta imagen no sólo funciona para los botones de nuestro menú, sino para los botones que se encuentran por todo el foro y cuentan con el mismo estilo.

menu_gfx.png Ver imagen
Nota: Aquí me parece innecesario mostrar imágenes.

  • Este será el estilo del botón activo. (se puede ver en algún menú). Además también es el estilo que se muestra al pasar encima el ratón a algún botón de las opciones de un tema o de otro lugar del foro.
  • Estilo que se verá al pasar el ratón sobre algún botón de los menús.
  • Estilo de los botones inactivos. (buttonlist) Puedes verlo en algún post del foro.
  • Estilo del botón activo. (buttonlist) Lo puedes ver en algun post del foro.
  • Estilo que tienen los submenú del foro. (Puedes verlo en el menú principal)



3. Editando las imágenes
Aquí les dejo la descarga de los archivos PSD del theme default.
Adjunto al final del post

Bueno pues obviamente necesitaremos Photoshop para editar los PSD de main_block y menu_gfx.
No hace falta que les diga algo extra para este paso. Yo aquí les mostraré mis sprites y como me quedó el foro.

Ver resultado de ejemplo
main_block
menu_gfx

Como pueden ver yo no edité windowbg ni los demás estilos de ese tipo.



Así finaliza esta guía, es de lo más sencillo y les mostrará un camino fácil para iniciarse en la creación de themes.

Esta última es únicamente usando imágenes (algo obsoleta para los estándares actuales)

SMF Tricks - Free & Premium Responsive Themes for SMF.

Advertisement: