[Tutorial] Editando el theme Extreme Default. Parte 2
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=149Notepad++ (
Para editar el archivo css)
http://www.smfsimple.com/index.php/topic,7762.0.htmlColores 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:
#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:
#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:.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:.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:
.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.
Show Posts
