Creando un theme basico en SMF 2.0.2 [guia interactiva]

FORO DEMO

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:

Code: [Select]

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 categorias

El fondo de las categorias esta definido por este codigo:

buscamos:

Code: [Select]

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

Code: [Select]

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

Code: [Select]

http://www.mediafire.com/?xnj790zjtemoljo
menu_gfx.png

Code: [Select]

http://www.megaupload.com/?d=RVRSDAHT
***********************************************************************/

Bueno, iré a preparar un poco de café y seguimos.

Modificar la tabla de los foros

El código CSS que define el estilo de la tabla de los foro y la de los temas es el siguiente.

Code: [Select]

/* 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.css

Al final agregamos un nuevo atributo ID de la siguiente forma

Code: [Select]

.newboard
{

   background: #fff;

}
Y un efecto hover para que al pasar el mouse sobre el titulo se sombree de otro color.

Code: [Select]

.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

Code: [Select]

<tr id="board_', $board['id'], '" class="windowbg2">
<td class="icon windowbg"', !empty($board['children']) ? ' rowspan="2"' : '', '>
reemplazar por

Code: [Select]

<tr id="board_', $board['id'], '" class="newboard">
<td class="icon"', !empty($board['children']) ? ' rowspan="2"' : '', '>
Buscar

Code: [Select]

</td>
<td class="stats windowbg">
Reemplazar por:

Code: [Select]

</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

Code: [Select]

.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.




 
 

IV- Creando un nuevo menu

En este theme pondre un menú en el top del sitio de manera que quede fijo, para que siempre se mantenga ahí cuando hacen scroll.

en index.css

Buscar:

Code: [Select]

body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}
reemplazar por:

Code: [Select]

body
{
background: #045370 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 70px 0;
}
buscar:

Code: [Select]

#main_menu
{
padding: 0 0.5em;
float: left;
margin: 0;
width: 98%;
}
Reemplazar por:

Code: [Select]

#main_menu
{
padding: 18px 10%;
margin: 0;
width: 100%;
height: 25px;
position: fixed;
top: 0;
left: 0;
background: #000 url(../images/theme/menubar.png) repeat-x;
opacity:.8;
filter:alpha(opacity=80);
-moz-opacity:0.8;
z-index: 10000;
border-bottom: 1px solid #D4D4D4;
font-size:110%;
}
Buscar:

Code: [Select]

#upper_section
{
padding: 5px;
margin-bottom: 1.5em;
}
Reemplazar por:

Code: [Select]

#upper_section
{
padding: 5px;
margin-bottom: -40px;
}
Y finalmente nos quedara asi:



También pueden verlo en la demo

Espacio reservado.

Espacio reservado.

Uff, genial aporte! Creo que esto va a ser muy util para los que quieren originalidad en sus foros!
+1 obviamente!

Bien! Esperando las próximas entregas porque hasta ahora no le doy a los themes xD

capo total!!!! +1 de lleno !

Post actualizado y demo instalada para que vayan viendo los avances.

DEMO

Buen aporte!!!
Aqui les dejo el psd el menu_gfx.png

Code: [Select]

http://www.megaupload.com/?d=RVRSDAHT
Salu2!!

Nueva actualización.

Gracias por el aporte zoom ya agregue el archivo al post de inicio.

Saludos

Tambien seria bueno que el theme tuviera un logo por defecto

buscando en el index.template.php

Code: [Select]

<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>';remplazan por:

Code: [Select]

<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="' . $settings['images_url'] . '/custom/logo.png" alt="" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>
a ese codigo solo ay que modificar esto:

Code: [Select]

/custom/logo.pngpor la direccion y el nombre de su logo.

Te quedo muy bueno, cuando lo termines lo subiras al theme? MIl gracias desde ya!

Muy buen aporte, especialmente para nosotros los novatos:)

excelente aporte estaba buscando un buen tutoriar que esplicara con detalle todo esto de modificar un theme a gusto de cada quien gracias espero que siguas asiendo tutoriales iguales a estor de completos mut agradecido

hagan una con la parte de logearse