Editando el theme Extreme Default. Paso 1

[Tutorial] Editando el theme Extreme Default. Parte 1

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 1: Color o imagen de Fondo o Background

Lo primero que vamos a editar sera el color de Fondo o Background o si quieren poner una imagen tambien les dire como:
Vamos a buscar el siguiente codigo:

Code: [Select]

body
{
background: #E9EEF2;
background-size: 100%;
font: 78%/130% 'Open Sans',sans-serif;
padding: 0px;
}
De ese codigo, tomaremos el atributo background: #E9EEF2;
#E9EEF2 es el color hexadecimal que viene por defecto en el theme, es un celesito algo afeminado, pero bueno XD
Si lo quieren cambiar por ejemplo por el color negro, entonces modificaremos el color hexadecimal #E9EEF2 por #000000.

Por lo que quedaria asi:

Code: [Select]

body
{
background: #000000;
font: 78%/130% 'Open Sans',sans-serif;
padding: 0px;
}
Quedaria asi:


Si queremos poner una imagen, tendremos que ver que clase de imagen es. Hay imagenes grandes que ocupan todo el fondo o imagenes muy chicas que se repiten para evitar la sobrecarga ya que solo cargaria una imagen de muy poco peso. (Es lo mas recomendado). Pero bueno, les mostrare las 2 opciones. Recuerden que siempre es tambien recomendado poner las imagenes en su servidor ya que si la toman de otros servidores estas pueden tardar en cargar, ser borradas por su dueño o simplemente no verse por ser bloqueada por la web de donde la sacaron y no permiten que otras webs la publiquen y les consuman su ancho de banda. Por eso, siempre vamos a bajar las imagenes y ponerlas en la carpeta images/theme/ del theme extreme default. Con esto, entonces llamaremos en el css a la imagen de la siguiente manera: url(../images/theme/nombre de la imagen.extencion de la imagen)

Vamos a empezar con la opcion 1 que sera una imagen grande que queremos que ocupe todo el fondo, por ejemplo, tomemos la siguiente: http://www.hdpaperz.com/wp-content/gallery/abstract_wallpapers_3/abstract-wallpaper.jpg
Obviamente como les dije antes, la descargan y la suben a la carpeta que les mencione arriba.

Si pueden bajarle el peso al maximo seria ideal ya que sino estariamos cargando una imagen muy pesada todo el tiempo y no seria bueno para el servidor. Las imagenes de background deben pesar como mucho 150 o 200 kb, el formato jpg es el mejor para esto ya que es bastante comprimido. Queda en ustedes poner una imagen de 5 mb que les demore muchisimo en cargar y les de problemas de consumos de recursos en sus foros.

Para poner esa imagen de fondo y que ocupe todo el ancho y largo del foro sea cual sea la resolucion que utilice el usuario, haremos lo siguiente:

Code: [Select]

body
{
background: url(../images/theme/bg.jpg) no-repeat fixed;
background-size: 100% 100%;
font: 78%/130% 'Open Sans',sans-serif;
padding: 0px;
}
Quedaria asi:


Con eso ya veremos nuestra imagen estatica (fixed) y que ocupa todo el ancho del foro. (Pueden probar sacandole el fixed pero se estira mucho para abajo en paginas largas y no queda bien.) En el caso de que tengan una imagen que quieren que el ancho se respete pero el alto no porque quieren poner un color de fondo que siga abajo de la imagen, entonces haremos lo siguiente:

Code: [Select]

body
{
background: #000 url(../images/theme/bg.jpg);
background-size: 100%;
font: 78%/130% 'Open Sans',sans-serif;
padding: 0px;
}
Como veran, agregamos el color #000 y sacamos el fixed (imagen estatica) y el no-repeat (que no se repita) lo cambiamos por el repeat-x que solo hara que se repita a lo ancho pero no a lo alto, por lo que abajo de la imagen tendremos un color de fondo que en este caso sera el negro (#000). Esto se utiliza mucho si la imagen de fondo en la parte de abajo se va esfumando, entonces se puede adaptar con un color de fondo para que abajo siga el mismo.

Les recomiendo que eso lo vayan viendo y haciendo pruebas, jueguen con los fixed, repeat, colores, etc... Eso esta en la creatividad de cada uno y tiene infinidad de posibilidades. Como ven aca en smfsimple utilizamos un fondo estatico que ocupa toda la resolucion de la pantalla.

Vamos ahora con la opcion 2 que sera una imagen chica que la pondremos tipo mosaico que se repetira constantemente hasta cubrir todo el fondo. Como ejemplo tomaremos esta imagen: http://img.webme.com/pic/w/webcp/bg05.gif

Haremos lo siguiente:

Code: [Select]

body
{
background: url(../images/theme/bg.jpg);
font: 78%/130% 'Open Sans',sans-serif;
padding: 0px;
}
Quedaria asi:


Como veran, eliminamos el background-size ya que no necesitamos redimensionar la imagen y tambien eliminamos el color de fondo negro (#000).

Bueno, con eso terminamos el paso 1 que es editar el color de fondo o background.

Parte 2: www.smfsimple.com/index.php/topic,8819

Muy bueno!

Exelente tutorial de CSS Lean, espero que te sigas tomando el tiempo (como siempre) en hacer muchos mas de estos!!


-Un saludo, DIBILO.

Gracias a los dos, estoy haciendo la parte 2 del tutorial que habla del header y su contenido.
Saludos

Muito bom para quem está iniciando. Parabéns.