Editando el theme Extreme Default. Parte 2

[Tutorial] Editando el theme Extreme Default. Parte 2

Si no viste la parte 1 aca te dejo el link: http://www.smfsimple.com/index.php/topic,8818.0.html

Bueno, este theme lo hice con la intencion de que se les haga mucho mas facil editarlo. Como ven, seria algo asi como el default de smf pero con retoques que pienso deberia tener el original, un poco mas moderno y elegante. Pero bueno, gustos son gustos y si tienen este theme instalado o quieren un theme que puedan editarlo facilmente, este es el theme indicado y super editable. En este post les enseñare paso a paso como modificar todo.

Obviamente y como siempre les decimos, todo se realiza con un foro nuevo y sin modificaciones de mods, puesto que si hay mods que modifican codigos que necesitamos aqui no los encontrarian y se les hara mas dificil. Asi que les recomiendo que si algun paso no encuentran el codigo porque fue modificado por un mod, desinstalen el mod y luego hagan la modificacion del tutorial. Luego vuelven a instalar el mod y listo. Obviamente todo bajo su responsabilidad, siempre hagan backup de los archivos que modifican antes de hacer nada para asi poder reestablecer el foro por si hacen algo mal.

Herramientas que vamos a necesitar:
El theme para descargar: http://www.smfsimple.com/index.php?action=downloads;sa=view;download=149
Notepad++ (Para editar el archivo css) http://www.smfsimple.com/index.php/topic,7762.0.html
Colores en Hexadecimales: http://html-color-codes.info/codigos-de-colores-hexadecimales/ (Nos servira para elegir los colores que mas nos gusten)

El archivo que vamos a modificar sera el SMFSimple_Theme_Style.css de la carpeta CSS del theme.

Paso 2: Editando el header. Logo, fondo del header y user area.

Empecemos por el fondo del header. En el theme veremos que tiene una imagen celeste, algo turquesa. Podemos cambiar la imagen por una que nos guste o simplemente ponerle un color. Para cambiarla vamos a editar lo siguiente:

Code: [Select]

#full_header
{
margin: 0 auto;
min-width: 764px;
max-width: 2300px;
background: url(../images/theme/bg_header.jpg) fixed;
background-size: 100%;
}
Si queremos cambiar la imagen vamos a hacer lo mismo que lo que hicimos en la parte 1 de este tutorial con el fondo o background.

Por ejemplo, para poner la imagen mosaico que pusimos como ejemplo en el background, que era esta http://img.webme.com/pic/w/webcp/bg05.gif , vamos a poner el codigo asi:

Code: [Select]

#full_header
{
margin: 0 auto;
min-width: 764px;
max-width: 2300px;
background: url(../images/theme/bg.jpg);
}
Quedaria asi:


Como veran, le sacamos el background-size: 100%; ya que no queremos que se estire la imagen y tambien sacamos el fixed porque queremos un mosaico con esa imagen chiquita y que se repita hasta cubrir todo el fondo.

Hacemos lo mismo con la imagen grande y con el color, todo igual a la parte 1 del tutorial.

Ahora que ya cambiamos el header, vamos a cambiar el logo que es la parte mas facil.

Solo debemos ir a Administracion > configuracion del foro > tema actual  y ahi encontraremos el campo para poner la url de la imagen que queremos poner. Siempre recomiendo que la imagen se aloje en el servidor propio y no en externos.
Otra forma de hacerlo, un poco menos recomendada, es reemplazando la imagen del logo que viene por defecto en el theme y que encontramos en la carpeta images del theme, se llama logo.png. Solo la reemplazamos por la nuestra y listo.

Ahora hablaremos del user area o area de usuario donde mostramos informacion del usuario que esta conectado en ese momento como su avatar y una bienvenida tipo hello usuario, tambien links importantes como los temas no leidos y el horario y fecha de ese momento.

Que podemos cambiar de esto? Yo creo que dependiendo el fondo que pongamos, se va a ver mejor o peor respecto al color de los links, de las letras y del fondo del mismo rectangulo con bordes redondeados donde estan colocados, ya que teniendo una leve opacidad, incide el color del fondo del header con el color del fondo del recuadro del user area.

Podemos hacer dos cosas con respecto al recuadro del user area, una opcion seria sacarle la opacidad y ya no tendriamos que pensar en el color de fondo del header y si solo en el color de fondo del recuadro, y otra opcion es dejarlo como esta y amoldar los colores al fondo del header que elegimos.

Suponiendo que vamos a hacer la opcion 1, le sacamos la opacidad de la siguiente forma:
Buscamos el siguiente codigo:

Code: [Select]

.table_user
{
border-radius: 5px;
background: rgba(00, 00, 00, 0.2);
padding: 0px 10px;
font-size: 12px;
border: 1px solid #333;
text-shadow: 0px 1px 1px #666;
}
Y cambiamos el background: rgba(00, 00, 00, 0.2); por un color que creamos conveniente para nuestros gustos. Como ejemplo podemos hacerlo en negro, #000;

Quedaria asi el codigo:

Code: [Select]

.table_user
{
border-radius: 5px;
background: #000;
padding: 0px 10px;
font-size: 12px;
border: 1px solid #333;
text-shadow: 0px 1px 1px #666;
}
Y se veria asi:


Como veran, ahi ya no queda tan mal porque tiene un fondo negro y letras claras. Para cambiar el color de las letras y de los links del area de usuario, que esta por defecto en blanco y naranja, vamos a buscar el siguiente codigo:

Code: [Select]

.user
{
color: #f4f4f4;
}

.user a
{
color: #F9BC06;
}

.user es el color de las letras que no son links, en este caso son blancas y el color hexadecimal es este #f4f4f4;
.user a, es el color de los links, en este caso son naranjas y el color hexadecimal es este #F9BC06;

Con lo cual, sabiendo esto, podemos cambiar los colores y ponerlos como mas nos gusten.

En el caso de dejarle la opacidad como esta por defecto, tendremos que ir jugando con los colores hasta encontrar la combinacion perfecta entre el fondo del header, el fondo del user area que se vera muy poco y le da un efecto de transparencia muy lindo. Eso ya depende de su creatividad y de sus gustos.

Hay algunos valores en el table_user como por ejemplo:
font-size: 12px; que es el atributo para elegir el tamaño de las letras del user area.
padding: 0px 10px; que nos permite elegir el espacio entre el contenido del user area y su contenedor, en este caso es de 10px, pueden jugar con esos valores y buscar el que mas les guste.
border: 1px solid #333; que es el color y ancho del borde del recuadro.
border-radius: 5px; que es lo pronunciado del borde redondeado, a mas px, mas redondeadas seran sus esquinas.

Bueno, esa seria la edicion total del header del theme extreme default. Espero que les sea util y seguramente no solo les sirven estos tips para este theme, quizas pueden utilizarlos para otros themes pero bueno, en este tutorial solo hablaremos de este theme que hice exclusivamente para que les sea facil la edicion.

Gran serie de tutoriales amigo @Lean, una consulta a futuro podrías enseñarnos a modificar el display template y la zona de perfiles de los usuarios, muy agradecido de antemano.

saludos.

Espero ansiosamente la 3º parte, haber si logró hacer un buen theme para mi foro.