Una de las cosas que siempre queremos, es tener un foro con un diseño original, por eso en este pequeña guía abordaremos un poco sobre como personalizar un theme SMF a nuestro gusto y crear un theme sencillo pero bonito para nuestro foro.
En la guía iremos personalizando paso a paso el
theme Curve default de SMF 2.0.2 hasta conseguir un nuevo diseño.
Pueden ir siguiendo la guía para que vayamos aprendiendo juntos y si alguien tiene ideas o aportes serán bien recibidas de esa forma seria mas interactiva y entretenida.
Los pasos que describire no son ley, ni estan escritos en piedra, es solo mi punto de vista y la forma en que yo lo hago. Tal vez lo sientan un poco lento ya que iré redactando mientras edito, pero con paciencia aprenderemos mejor.
Si van siguiendo la guía paso a paso les aseguro que al terminar el theme ustedes también habrán aprendido algo.
Herramientas necesarias:-Servidor local para instalar SMF
-Editor de imagenes (Gimp, Photoshop, ect)
-Editor de texto (Notedpad++)
Comencemos:
I- Visualizar el diseño y decidir a que va orientado.[/color]
Este probablemente sea uno de los puntos mas difíciles en la creación de un theme y consiste en definir los colores y ver hacia que publico orientaremos el theme. Si nuestro foro es sobre bodas lógicamente el theme no será negro o si es sobre bandas de rock no lo haremos rosado con amarillo, entonces esta parte es importante. yo ya tengo una idea en la cabeza así que a comenzar (
espero me salga).
II-Cambiando el color de fondo[/color]
lo primero que haremos será cambiar el fondo del theme por el color que queramos.
En Index.css[/color]
Buscamos:
body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}
Este es el codigo CSS que define el estilo del fondo de nuestro foro
Explicación el código:background: la propiedad background define el color o imagen que tendra el fondo,
#E9EEF2 establece el color,
url(../images/theme/backdrop.png) es la imagen de fondo,
repeat-x que se repetira de manera horizontal,
repeat-y repite de manera vertical,
no-repeat es para que la imagen no se repita
font: establece el tamaño de la fuente en el foro, el primer porcentaje es el tamaño de la fuente y el segundo el tamaño del interlineado
Nosotros podemos experimentar con los valores y asi adecuarnos al que mas nos guste.
Ya hice la primer modificación al theme default y me quedo así.
III- Cambiando diseño y color en las categorias y subforos.El theme curve de SMF utiliza una imagen llama da main_block.png para definir el diseño y los colores del foro esta imagen se puede modificar para darle a nuestro diseño los colores o el estilo que queramos. Esta imagen la encontramos en la carpeta
Themes\default\images\theme.
Esta es la imagen
/*En algunos diseños la imagen puede variar y otros no la traen dependiendo el estilo del theme, como esta guia esta totalmente basada en el theme curve si la usaremos.*/Modificando las categoriasEl fondo de las categorias esta definido por este codigo:
buscamos:
h4.catbg, h4.catbg2 , h3.catbg , h3.catbg2 , .table_list tbody.header td.catbg
{
background: url(../images/theme/main_block.png) no-repeat 100% -160px;
padding-right: 9px;
}
y
div.cat_bar
{
background: #99abbf url(../images/theme/main_block.png) no-repeat 0 -160px;
padding-left: 9px;
height: 31px;
overflow: hidden;
margin-bottom: 1px;
}
Esta parte establece el diseño que tendrán las categorías, como dije antes la imagen main_block.png se encarga de la forma y el color de esta seccion.
background: url(../images/theme/main_block.png) no-repeat 100% -160px; (Establece que parte de la imagen main_block.png se usará de fondo,
100% -160px; estas son las coordenadas de el area de la imagen que usaremos,100% es el final de la imagen de izquierda a derecha, y -160 es el pixel 160 de ariba hacia abajo mas adelante explicare lo de las coordenadas de manera gráfica así me entenderán mejor )
en el segundo código esta la altura que tendrá
height: 31px;.
Para darle un color diferente basta con cambiarle el color a esta sección en la imagen main_block.png
Les dejo una imagen de main_block.png con su equivalente en el foro para que vean que sección modificar para cada área del foro
Una ves modificado un poco el archivo main_block.png me quedo así.
Hasta el momento he hecho poco pero voy editando el theme y al mismo tiempo redactando la guia asi que me toma algo de tiempo. Instalare un foro DEMO para que vayan viendo las modificaciones al diseño.
/**************************************************
Dejo el archivo main_block.psd y Menu_gfx.psd separados en capas para que se les haga mas fácil editarlo. main_block.psd
http://www.mediafire.com/?xnj790zjtemoljo
menu_gfx.png
http://www.megaupload.com/?d=RVRSDAHT
***********************************************************************/Bueno, iré a preparar un poco de café y seguimos.
Modificar la tabla de los forosEl código CSS que define el estilo de la tabla de los foro y la de los temas es el siguiente.
/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body
{
color: #000;
background-color: #e7eaef;
}
.windowbg2
{
color: #000;
background-color: #f0f4f7;
}
.windowbg3
{
color: #000;
background-color: #cacdd3;
}
Estos atributos no solo definen el estilo de los foros también la del índice de temas y otras secciones del foro. En este ejemplo yo añadiré un nuevo atributo para darle un diseño independiente al board.
Para hacer esto en el archivo
Index.cssAl final agregamos un nuevo atributo ID de la siguiente forma
.newboard
{
background: #fff;
}
Y un efecto hover para que al pasar el mouse sobre el titulo se sombree de otro color.
.newboard:hover
{
background: #DCE7FA;
}
Luego abrimos el archivo
BoardIndex.template.php (este archivo que se encarga de la estructura de el área de los foros)
buscar
<tr id="board_', $board['id'], '" class="windowbg2">
<td class="icon windowbg"', !empty($board['children']) ? ' rowspan="2"' : '', '>
reemplazar por
<tr id="board_', $board['id'], '" class="newboard">
<td class="icon"', !empty($board['children']) ? ' rowspan="2"' : '', '>
Buscar
</td>
<td class="stats windowbg">
Reemplazar por:
</td>
<td class="stats">
Y ahora ya tenemos un efecto bonito en el área de las categorías de los foros. Les recuerdo que ustedes pueden jugar con los estilos para darle mejores efectos, en ves de color bien pueden poner una imagen, sombras, bordes redondos y cosas así que harán nuestro diseño mas profesional.
Para modificar el tamaño, fuente y color de los titulos
en
index.css.table_list tbody.content td.info a.subject
{
font-weight: bold;
font-size: 110%;
color: #d97b33;
}
Dejo una captura para que vean y también en la demo pueden ver los avances y si tienen consultas pueden hacerlas.