1.-modificar Plantillas
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View 1.-modificar Plantillas as PDF for free.
More details
- Words: 3,838
- Pages: 13
Uno de los temas relevantes que surgen inicialmente cuando un escritor (o un intento de serlo) se inicia en esto de escribir un blog, ya sea en Blogger.com o en Wordpress (dominio y hosting propio), es la de como personalizar su theme o template para que no sea como el del resto… Para Wordpress existen algunas alternativas, y para Blogger.com existe Psycho… Que nos permite crear templates sencillos pero ajustados al gusto de cada quien, y lo mejor: es gratis…
Este proyecto nos permite crear un template a partir de una intuitiva interfaz web, que nos deja hacer de todo (casi) para crear nuestra plantilla, aunque claro, con algunas limitaciones… Esta página web crea a base de parámetros que previamente vamos seleccionando, los ajustes y cambios necesarios que nosotros consideremos para la creación de nuestra plantilla, brindando una flexible y básica herramienta de edición online… Es realmente sencillo y fácil de usar, así que si tienes un blog en Blogger, y quieres crear tu propio template, este es tu momento… Modificando la plantilla Muchas veces me han preguntado cómo aumentar el ancho disponible del blog. Es que las plantillas por defecto están pensadas para resoluciones de 800 pixeles de ancho y hoy por hoy, tal como puede verse en cualquier estadística, ese es un valor demasiado escaso; menos del 5% de los visitantes tienen resoluciones inferiores a 1024 así que ese será el número mágico sobre el cual deberíamos trabajar ya que es el tipo de resolución más utilizada.
Al igual que cada hogar es un mundo, cada plantilla también lo es por lo que se hace muy difícil dar una solución que las contemple a todas. Se me ocurre que lo mejor es tratar de aprender qué es lo que Blogger hace y como es el esquema gráfico de un blog y para eso, no podemos empezar con lo más complejo sino con lo
más simple que es la plantilla Mínima. Pero no se confundan. Lo de Mínima no es un calificativo, sólo es un nombre y a mi juicio, es la mejor codificada y es el modelo que deberíamos usar para crear cualquier otra, no sé si es perfecta pero se acerca bastante y con ese esquema, entendiendo cómo modificarla, jamás tendremos problemas con los navegadores y sus caprichos ¿Exagero? Tal vez un poco pero confieso que es el modelo que utilizo para cualquier blog incluyendo WordPress. Si queremos empezar a rediseñar la plantilla tenemos dos opciones: o nos encomendamos a la buena voluntad de alguien o aprendemos. Yo, prefiero lo segundo así que empiezo creando un blog, seleccionando la plantilla Mínima de Blogger y dejando la Configuración por defecto. Agrego entonces uno o más posts con muchos "Lorem ipsum dolor sit amet ..." y ya estoy listo para comenzar.
Desde Diseño | Elementos de la página voy a añadir y organizar los elementos que aparecen por defecto (Archivos, Seguidores, Perfil); esto sólo es maquillaje personal así que si no queremos, podemos dejarlos tal como están. De todas maneras, hagamos o no hagamos esos cambios, no es mala idea detenerse un poco en esa pantalla de Blogger porque allí podremos ver el esquema gráfico del blog que es la base para entender cómo cambiarlo. Nuestro blog no es otra cosa que una serie de rectángulos independientes que se van creando desde afuera hacia a dentro, desde el más grande hasta el más chico, uno dentro de otro. Lo que vemos en la pantalla del monitor es el rectángulo más grande, el que contiene a todos los otros y es el que está definido entre las etiquetas y así que las propiedades generales de nuestro sitio quedan establecidas allí.
Dentro de ese gran rectángulo, hay otro llamado outer-wrapper que es más pequeño ya que lo separamos de los bordes de la ventana y que tiene una característica fundamental, tiene definido el ancho (width)
que es, justamente, el ancho real de nuestro sitio y lo más común es que esté centrado con respecto a la ventana. Dentro de este hay otro más llamado wrap2 que normalmente no tiene propiedades y por lo tanto, es exactamente igual que el anterior ¿Para qué dos? Sería largo de explicar pero, simplificando, esa es la mejor forma de evitar problemas de compatibilidad con los navegadores. Y siguen los rectángulos. Siempre, de afuera hacia adentro lo que quiere decir que el externo contendrá uno o más y por lo tanto, el contenido tendrá un ancho menor o igual al contenedor pero nunca será más grande. Y aquí vale una aclaración: para evitar problemas, el ancho no sólo es el valor de width, el ancho que debemos considerar debe incluir los bordes y los márgenes. ancho real = width + border + margin + padding Así que en el rectángulo outer-wrapper vamos a encontrar otros tres rectángulos más, todos del mismo ancho, uno debajo del otro: header-wrapper es el encabezado del blog, content-wrapper es el contenido (posts+sidebar) y footer-wrapper el pie de página del sitio. Nuevamente, dentro de cada uno de esos rectángulos habrá otros y dentro de esos otros habrá otros más y así seguiremos hasta el último que será una imagen, un texto o cualquier otra cosa pero, faltaría ver el que nos importa que es el rectángulo central, el llamado content-wrapper porque es con el cual nos manejaremos. Ese bloque rectangular tiene, por defecto, cuatro rectángulos más. El superior se llama crosscol-wrapper y y por ahora no nos interesa porque es invisible; a los efectos de las pruebas, podemos eliminarlo. El último también es invisible y muy importante, dice: Los dos del medio son el punto clave del diseño: main-wrapper es el rectángulo que contiene las entradas y sidebar-wrapper el que contiene los elementos de la sidebar. Ambos tienen una particularidad: flotan, y eso es lo que nos permite colocarlos uno al lado del otro ¿Por qué? porque la suma de sus anchos es inferior al ancho del contenedor. ¿No les ha pasado cosas como "ayyyyy la sidebar se fue al fondo"? Esa es la explicación.
Y ahora sí, basta de palabrería, hacemos click en Edición de HTML para empezar a jugar. En la plantilla, el estilo CSS es todo eso que está entre y . Allí, haremos una primera modificación para que todo esté claro y siga el mismo criterio. Por alguna extraña razón, las definiciones del footer no son razonables así que las cambiaremos. Buscamos: #footer { clear: both; margin: 0 auto; padding-top: 15px; line-height: 1.6em; text-transform: uppercase; letter-spacing: .1em; text-align: center; width: 660px; } y lo cambiamos por esto: #footer-wrapper { clear: both; margin: 0 auto;
width: 660px; } #footer { letter-spacing: .1em; line-height: 1.6em; padding-top: 15px; text-align: center; text-transform: uppercase; } También agregaremos esto para que todos los bloques queden definidos: #content-wrapper { position: relative; width: 100%; } Y ocultaremos la navbar porque me molesta: #navbar { display: none; height: 0; visibility: hidden; } Esta es la plantilla por defecto y en el ejemplo, pude hacerse click sobre los enlaces de la entrada para colorizar los diferentes rectángulos e identificarlos: [VER EJEMPLO] Ahora, vamos a cambiar el ancho del blog y lo que vamos a mirar es el valor que está definido en outerwrapper: #outer-wrapper { width: 660px; margin: 0 auto; padding: 10px; text-align: $startSide; font: $bodyfont; } Cambiaremos entonces el valor de la propiedad width; le voy a dar 980 pixeles porque si bien el ancho de la pantalla es de 1024, debemos descontarle los márgenes, en este caso dice padding:10px; así que sería: 10 - 1024 - 10 = 1004 Pero aún así sería demasiado ya que hay una barra de desplazamiento vertical que debemos descontar y esa barra varía de tamaño según sea el navegador. Por si fuera poco, Internet Explorer se ejecuta en una ventana que tiene un borde lo que disminuye aún más el espacio disponible. En principio, en IE el ancho máximo sería de 983 pixeles y en Firefox de 991 pixeles así que tomo un número redondo y resuelvo las pequeñas diferencias. ¿Qué pasaría si lo hiciera más ancho? Nada grave, apareceria entonces una barra de desplazamiento horizontal. Así que si he decidido que mi blog tenga 980 pixeles de ancho y ahora tiene 660 pixeles, le estaré agregando 320 pixeles que voy a colocar como valor en los tres rectángulos principales: #outer-wrapper { ....... width: 980px; /* cambio 660 por 980 */ } #header-wrapper { ....... width: 980px; /* cambio 660 por 980 */ } #footer-wrapper { .......
width: 980px; /* cambio 660 por 980 */ } Por último, debería resolver cómo distribuiré esos 320 pixeles extras entre el rectangulo de entradas y el de la sidebar. En este caso le agregaré 150 a las entradas y el resto, a la sidebar así que también cambio esos valores en el CSS: #main-wrapper { ....... width: 560px; /* 410 + 150 = 560 */ } #sidebar-wrapper { ....... width: 390px; /* 220 + 170 = 390 */ } Con eso, tengo completada la tarea y como no he cambiado márgenes ni ninguna otra propiedad, el resultado será la misma estructura pero, se distribuirá de mejor manera en la ventana del monitor Continuando con la idea de modificar la plantilla hasta acá tenemos el esquema tradicional de un blog, encabezado, las entradas a la izquierda, la sidebar a la derecha y un pie de página. La ubicación de entradas y sidebar es fácilmente modificable ¿queremos invertirlas? basta invertir la flotación de ambos rectángulos
#main-wrapper { ....... float: right; /* cambiamos left por right */} #sidebar-wrapper { ....... float: left; /* cambiamos right por left */} La sidebar que hemos creado es muy ancha y eso no es casualidad ya que ahora que tenemos todo preparado vamos a agregar otras debajo Para esto, ya no sólo tendremos que modificar el CSS sino agregar código pero, lo haremos de la manera simple, sin expandir los artilugios para que no nos de un ataque al ver tanta cosa escrita. Si vamos hasta casi el final de la plantilla, lo que veremos es algo así:
Y allí en el medio aparecerán cosas como:
¿Y si nuevamente, en lugar de querer ese esquema, se nos ocurre poner todo del otro lado, invertimos los valores de la flotación de main-wrapper y de sidebar-area. Lo que está como left lo ponemos como right y viceversa.
¿Será posible ahora agregar una nueva sidebar ancha debajo de estas? Si a alguien le parece que esto es una telenovela por capítulos, tiene razón ... Con todo lo que hemos modificado, no tendremos problemas en agregar otra sidebar ancha debajo de las anteriores, utilizando siempre el mismo criterio, dándole un ID único que, en este caso será sidebarinferior. El haber "envuelto" todo dentro de un contenedor (sidebar-area)es lo que nos va a permitir que todo quede "encolumnado" sino, las flotaciones son impredescibles:
Agregamos entonces, la nueva sidebar y este sería el código completo: Y tendrá las mismas propiedades que sidebar-wrapper:
#sidebar-inferior { float: <span style="color: rgb(255, 255, 0);">rightright; /* flota a la derecha */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ width:<span style="color: rgb(255, 255, 0);">390px; /* el ancho */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ } Guardamos y eso es todo, todo habrá quedado acomodado correctamente Y al igual que en la entrada anterior, si queremos cambiar todo de lado, basta invertir los valores de las flotaciones de main-wrapper y de sidebar-area.
Y así podemos seguir una y otra vez, repitiendo los códigos, uno debajo del otro, combunando anchas con angostas con la única precausión de darle a cada una un ID único
Este proyecto nos permite crear un template a partir de una intuitiva interfaz web, que nos deja hacer de todo (casi) para crear nuestra plantilla, aunque claro, con algunas limitaciones… Esta página web crea a base de parámetros que previamente vamos seleccionando, los ajustes y cambios necesarios que nosotros consideremos para la creación de nuestra plantilla, brindando una flexible y básica herramienta de edición online… Es realmente sencillo y fácil de usar, así que si tienes un blog en Blogger, y quieres crear tu propio template, este es tu momento… Modificando la plantilla Muchas veces me han preguntado cómo aumentar el ancho disponible del blog. Es que las plantillas por defecto están pensadas para resoluciones de 800 pixeles de ancho y hoy por hoy, tal como puede verse en cualquier estadística, ese es un valor demasiado escaso; menos del 5% de los visitantes tienen resoluciones inferiores a 1024 así que ese será el número mágico sobre el cual deberíamos trabajar ya que es el tipo de resolución más utilizada.
Al igual que cada hogar es un mundo, cada plantilla también lo es por lo que se hace muy difícil dar una solución que las contemple a todas. Se me ocurre que lo mejor es tratar de aprender qué es lo que Blogger hace y como es el esquema gráfico de un blog y para eso, no podemos empezar con lo más complejo sino con lo
más simple que es la plantilla Mínima. Pero no se confundan. Lo de Mínima no es un calificativo, sólo es un nombre y a mi juicio, es la mejor codificada y es el modelo que deberíamos usar para crear cualquier otra, no sé si es perfecta pero se acerca bastante y con ese esquema, entendiendo cómo modificarla, jamás tendremos problemas con los navegadores y sus caprichos ¿Exagero? Tal vez un poco pero confieso que es el modelo que utilizo para cualquier blog incluyendo WordPress. Si queremos empezar a rediseñar la plantilla tenemos dos opciones: o nos encomendamos a la buena voluntad de alguien o aprendemos. Yo, prefiero lo segundo así que empiezo creando un blog, seleccionando la plantilla Mínima de Blogger y dejando la Configuración por defecto. Agrego entonces uno o más posts con muchos "Lorem ipsum dolor sit amet ..." y ya estoy listo para comenzar.
Desde Diseño | Elementos de la página voy a añadir y organizar los elementos que aparecen por defecto (Archivos, Seguidores, Perfil); esto sólo es maquillaje personal así que si no queremos, podemos dejarlos tal como están. De todas maneras, hagamos o no hagamos esos cambios, no es mala idea detenerse un poco en esa pantalla de Blogger porque allí podremos ver el esquema gráfico del blog que es la base para entender cómo cambiarlo. Nuestro blog no es otra cosa que una serie de rectángulos independientes que se van creando desde afuera hacia a dentro, desde el más grande hasta el más chico, uno dentro de otro. Lo que vemos en la pantalla del monitor es el rectángulo más grande, el que contiene a todos los otros y es el que está definido entre las etiquetas y así que las propiedades generales de nuestro sitio quedan establecidas allí.
Dentro de ese gran rectángulo, hay otro llamado outer-wrapper que es más pequeño ya que lo separamos de los bordes de la ventana y que tiene una característica fundamental, tiene definido el ancho (width)
que es, justamente, el ancho real de nuestro sitio y lo más común es que esté centrado con respecto a la ventana. Dentro de este hay otro más llamado wrap2 que normalmente no tiene propiedades y por lo tanto, es exactamente igual que el anterior ¿Para qué dos? Sería largo de explicar pero, simplificando, esa es la mejor forma de evitar problemas de compatibilidad con los navegadores. Y siguen los rectángulos. Siempre, de afuera hacia adentro lo que quiere decir que el externo contendrá uno o más y por lo tanto, el contenido tendrá un ancho menor o igual al contenedor pero nunca será más grande. Y aquí vale una aclaración: para evitar problemas, el ancho no sólo es el valor de width, el ancho que debemos considerar debe incluir los bordes y los márgenes. ancho real = width + border + margin + padding Así que en el rectángulo outer-wrapper vamos a encontrar otros tres rectángulos más, todos del mismo ancho, uno debajo del otro: header-wrapper es el encabezado del blog, content-wrapper es el contenido (posts+sidebar) y footer-wrapper el pie de página del sitio. Nuevamente, dentro de cada uno de esos rectángulos habrá otros y dentro de esos otros habrá otros más y así seguiremos hasta el último que será una imagen, un texto o cualquier otra cosa pero, faltaría ver el que nos importa que es el rectángulo central, el llamado content-wrapper porque es con el cual nos manejaremos. Ese bloque rectangular tiene, por defecto, cuatro rectángulos más. El superior se llama crosscol-wrapper y y por ahora no nos interesa porque es invisible; a los efectos de las pruebas, podemos eliminarlo. El último también es invisible y muy importante, dice: Los dos del medio son el punto clave del diseño: main-wrapper es el rectángulo que contiene las entradas y sidebar-wrapper el que contiene los elementos de la sidebar. Ambos tienen una particularidad: flotan, y eso es lo que nos permite colocarlos uno al lado del otro ¿Por qué? porque la suma de sus anchos es inferior al ancho del contenedor. ¿No les ha pasado cosas como "ayyyyy la sidebar se fue al fondo"? Esa es la explicación.
Y ahora sí, basta de palabrería, hacemos click en Edición de HTML para empezar a jugar. En la plantilla, el estilo CSS es todo eso que está entre
width: 660px; } #footer { letter-spacing: .1em; line-height: 1.6em; padding-top: 15px; text-align: center; text-transform: uppercase; } También agregaremos esto para que todos los bloques queden definidos: #content-wrapper { position: relative; width: 100%; } Y ocultaremos la navbar porque me molesta: #navbar { display: none; height: 0; visibility: hidden; } Esta es la plantilla por defecto y en el ejemplo, pude hacerse click sobre los enlaces de la entrada para colorizar los diferentes rectángulos e identificarlos: [VER EJEMPLO] Ahora, vamos a cambiar el ancho del blog y lo que vamos a mirar es el valor que está definido en outerwrapper: #outer-wrapper { width: 660px; margin: 0 auto; padding: 10px; text-align: $startSide; font: $bodyfont; } Cambiaremos entonces el valor de la propiedad width; le voy a dar 980 pixeles porque si bien el ancho de la pantalla es de 1024, debemos descontarle los márgenes, en este caso dice padding:10px; así que sería: 10 - 1024 - 10 = 1004 Pero aún así sería demasiado ya que hay una barra de desplazamiento vertical que debemos descontar y esa barra varía de tamaño según sea el navegador. Por si fuera poco, Internet Explorer se ejecuta en una ventana que tiene un borde lo que disminuye aún más el espacio disponible. En principio, en IE el ancho máximo sería de 983 pixeles y en Firefox de 991 pixeles así que tomo un número redondo y resuelvo las pequeñas diferencias. ¿Qué pasaría si lo hiciera más ancho? Nada grave, apareceria entonces una barra de desplazamiento horizontal. Así que si he decidido que mi blog tenga 980 pixeles de ancho y ahora tiene 660 pixeles, le estaré agregando 320 pixeles que voy a colocar como valor en los tres rectángulos principales: #outer-wrapper { ....... width: 980px; /* cambio 660 por 980 */ } #header-wrapper { ....... width: 980px; /* cambio 660 por 980 */ } #footer-wrapper { .......
width: 980px; /* cambio 660 por 980 */ } Por último, debería resolver cómo distribuiré esos 320 pixeles extras entre el rectangulo de entradas y el de la sidebar. En este caso le agregaré 150 a las entradas y el resto, a la sidebar así que también cambio esos valores en el CSS: #main-wrapper { ....... width: 560px; /* 410 + 150 = 560 */ } #sidebar-wrapper { ....... width: 390px; /* 220 + 170 = 390 */ } Con eso, tengo completada la tarea y como no he cambiado márgenes ni ninguna otra propiedad, el resultado será la misma estructura pero, se distribuirá de mejor manera en la ventana del monitor Continuando con la idea de modificar la plantilla hasta acá tenemos el esquema tradicional de un blog, encabezado, las entradas a la izquierda, la sidebar a la derecha y un pie de página. La ubicación de entradas y sidebar es fácilmente modificable ¿queremos invertirlas? basta invertir la flotación de ambos rectángulos
#main-wrapper { ....... float: right; /* cambiamos left por right */} #sidebar-wrapper { ....... float: left; /* cambiamos right por left */} La sidebar que hemos creado es muy ancha y eso no es casualidad ya que ahora que tenemos todo preparado vamos a agregar otras debajo Para esto, ya no sólo tendremos que modificar el CSS sino agregar código pero, lo haremos de la manera simple, sin expandir los artilugios para que no nos de un ataque al ver tanta cosa escrita. Si vamos hasta casi el final de la plantilla, lo que veremos es algo así:
Y allí en el medio aparecerán cosas como:
¿Y si nuevamente, en lugar de querer ese esquema, se nos ocurre poner todo del otro lado, invertimos los valores de la flotación de main-wrapper y de sidebar-area. Lo que está como left lo ponemos como right y viceversa.
¿Será posible ahora agregar una nueva sidebar ancha debajo de estas? Si a alguien le parece que esto es una telenovela por capítulos, tiene razón ... Con todo lo que hemos modificado, no tendremos problemas en agregar otra sidebar ancha debajo de las anteriores, utilizando siempre el mismo criterio, dándole un ID único que, en este caso será sidebarinferior. El haber "envuelto" todo dentro de un contenedor (sidebar-area)es lo que nos va a permitir que todo quede "encolumnado" sino, las flotaciones son impredescibles:
Agregamos entonces, la nueva sidebar y este sería el código completo: Y tendrá las mismas propiedades que sidebar-wrapper:
#sidebar-inferior { float: <span style="color: rgb(255, 255, 0);">rightright; /* flota a la derecha */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ width:<span style="color: rgb(255, 255, 0);">390px; /* el ancho */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ } Guardamos y eso es todo, todo habrá quedado acomodado correctamente Y al igual que en la entrada anterior, si queremos cambiar todo de lado, basta invertir los valores de las flotaciones de main-wrapper y de sidebar-area.
Y así podemos seguir una y otra vez, repitiendo los códigos, uno debajo del otro, combunando anchas con angostas con la única precausión de darle a cada una un ID único
Related Documents
Plantillas
May 2020 15
Plantillas
June 2020 11
Plantillas Genericas
April 2020 8
Plantillas Word
May 2020 7
Nvu Plantillas
April 2020 12