Como extraer y editar la hoja de estilos CSS
Como puedes ver, el estilo de este blog -colores y tipos de letra-- no es ninguno de los de las plantillas de blogs.ya.com, aunque está basado en uno de ellos y tiene los mismos elementos. ¿Cómo se pueden editar fácilmente los estilos del blog? Sólo tienes que editar los estilos CSS.
Cada página de blogs.ya.com tiene asociado un archivo de estilos CSS que es donde se encuentran los atributos sobre colores, tipos de letra, etc. separando el diseño de lo que es el contenido. La hoja de estilo es un pequeño fichero con extensión css que contiene toda la información referente al formato de cada hoja html. Si en alguna ocasión has desarrollado una página web, seguro que has manejado etiquetas para dar formato a los textos, poner de un color determinado el fondo, etc… Cada uno de los blogs de ya.com tiene una determinada hoja de estilo asociada. Entonces, para modificar el tipo de letra, tamaño, color de fondo, imagen de cabecera y todo lo que se te ocurra, es necesario retocar esta hoja de estilo. La principal ventaja que tienen estas hojas de estilo, es que una vez que defines las propiedades de cada etiqueta, ya no necesitas modificar las etiquetas en el código. Es una importantísima herramienta que todo webmaster debe dominar.
Pero no se puede editar directamente ese archivo desde el editor de blogs.ya.com -- sólo se puede editar la plantilla HTML.
1. Lo primero que tienes que hacer es extraer la hoja de estilos CSS.
Si usas internet explorer es muy fácil, solo tienes que ir a tu blog http://blogs.ya.com/tublog haces click en "guardar como" y en tu disco duro se grabará una carpeta «Blogs Ya_com tublog_archivos», en la que hay un archivo que se llama blog.css, esa es tu hoja de estilos, cambiale el nombre (por ejemplo, estilos.css) y preparate para editarla
2. Edita tu hoja de estilos localmente con un editor de textos o un editor HTML tipo Dreamweaver para cambiar colores y tamaños, y vuélvela a guardar. Consejo: modifica lo mínimo posible y prueba un cambio cada vez. ¡Es fácil estropearlo todo o que las cosas dejen de verse correctamente! Recuerda que algunos estilos tienen variantes, por ejemplo a puede tener variantes cuando se pone el cursor sobre el enlace (a.hover), cuando se visita (a.visited) etc.
3. Sube la nueva hoja de estilos a tu blog con la opción 3. Publicación / Administrador de Ficheros. Indica en "Examinar..." el fichero que has guardado en tu ordenador y pulsa Subir. La nueva URL de ese fichero será la de tu blog seguida de /files/estilos.css
4. Abre el editor HTML de la plantilla de tu blog en 2. Configuración Avanzada / Editar HTML Plantilla
5. Al principio verás la referencia a la hoja de estilos original... Cámbiala por la nueva, en este ejemplo:
6. Pulsa Validar y luego Guardar.
7. ¡Listo!
Al visualizar el blog aparecerá ya con los nuevos estilos (pulsa Recargar si no se ven a la primera). Si necesitas hacer modificaciones, vuelve a subir el fichero tantas veces como necesites. Si "rompes algo" no te preocupes: en el editor HTML pulsa "Reestablecer el formato original" y volverás a la plantilla por defecto para empezar de nuevo
De todas formas si no os atreveis con esto, pero aún así quereis poner a vuestro blog guapo, Azulica os ofrece un montón de plantillas y de muy fácil instalación, echadlas un vistazo en http://blogs.ya.com/design.
Si quieres ver como quedan las plantillas de Azulica elige alguna del menú desplegable:
Y a blogear!!!
Cada página de blogs.ya.com tiene asociado un archivo de estilos CSS que es donde se encuentran los atributos sobre colores, tipos de letra, etc. separando el diseño de lo que es el contenido. La hoja de estilo es un pequeño fichero con extensión css que contiene toda la información referente al formato de cada hoja html. Si en alguna ocasión has desarrollado una página web, seguro que has manejado etiquetas para dar formato a los textos, poner de un color determinado el fondo, etc… Cada uno de los blogs de ya.com tiene una determinada hoja de estilo asociada. Entonces, para modificar el tipo de letra, tamaño, color de fondo, imagen de cabecera y todo lo que se te ocurra, es necesario retocar esta hoja de estilo. La principal ventaja que tienen estas hojas de estilo, es que una vez que defines las propiedades de cada etiqueta, ya no necesitas modificar las etiquetas en el código. Es una importantísima herramienta que todo webmaster debe dominar.
Pero no se puede editar directamente ese archivo desde el editor de blogs.ya.com -- sólo se puede editar la plantilla HTML.
1. Lo primero que tienes que hacer es extraer la hoja de estilos CSS.
Si usas internet explorer es muy fácil, solo tienes que ir a tu blog http://blogs.ya.com/tublog haces click en "guardar como" y en tu disco duro se grabará una carpeta «Blogs Ya_com tublog_archivos», en la que hay un archivo que se llama blog.css, esa es tu hoja de estilos, cambiale el nombre (por ejemplo, estilos.css) y preparate para editarla
2. Edita tu hoja de estilos localmente con un editor de textos o un editor HTML tipo Dreamweaver para cambiar colores y tamaños, y vuélvela a guardar. Consejo: modifica lo mínimo posible y prueba un cambio cada vez. ¡Es fácil estropearlo todo o que las cosas dejen de verse correctamente! Recuerda que algunos estilos tienen variantes, por ejemplo a puede tener variantes cuando se pone el cursor sobre el enlace (a.hover), cuando se visita (a.visited) etc.
3. Sube la nueva hoja de estilos a tu blog con la opción 3. Publicación / Administrador de Ficheros. Indica en "Examinar..." el fichero que has guardado en tu ordenador y pulsa Subir. La nueva URL de ese fichero será la de tu blog seguida de /files/estilos.css
4. Abre el editor HTML de la plantilla de tu blog en 2. Configuración Avanzada / Editar HTML Plantilla
5. Al principio verás la referencia a la hoja de estilos original... Cámbiala por la nueva, en este ejemplo:
6. Pulsa Validar y luego Guardar.
7. ¡Listo!
Al visualizar el blog aparecerá ya con los nuevos estilos (pulsa Recargar si no se ven a la primera). Si necesitas hacer modificaciones, vuelve a subir el fichero tantas veces como necesites. Si "rompes algo" no te preocupes: en el editor HTML pulsa "Reestablecer el formato original" y volverás a la plantilla por defecto para empezar de nuevo
De todas formas si no os atreveis con esto, pero aún así quereis poner a vuestro blog guapo, Azulica os ofrece un montón de plantillas y de muy fácil instalación, echadlas un vistazo en http://blogs.ya.com/design.
Si quieres ver como quedan las plantillas de Azulica elige alguna del menú desplegable:
Y a blogear!!!
Comentario:
Vaya, si viene, perdona. Poco a poco lo voy haciendo todo, gracias.
Comentario:
No viene el ejemplo, una pena.