[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=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 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:
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:
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.jpgObviamente 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: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:
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.gifHaremos lo siguiente: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