JMiur [E]

Hay dos métodos para insertar una hoja de estilo externa, podemos usar la etiqueta LINK o la propiedad @import:
<link href='URL_archivo.css' type='text/css' />

<style type='text/css'>@import url(URL_archivo.css);</style>
Aunque se suele utilizar LINK cuando la incluimos en el HEAD de nuestra página, ambos métodos son correctos y el resultado será el mismo.

¿Para qué sirve entonces @import? Generalmente, se utiliza para importar hojas de estilo dentro de una hoja de estilo y en Blogger en particular, ese es el método que debemos usar si queremos agregar un archivo CSS externo en un post ya que la etiqueta LINK no es aceptada.

¿Y para qué agregar una hoja de estilo en un post? Porque si las agregamos en la plantilla se cargarán siempre aunque no la utilicemos así que, por ejemplo, si estamos mostrando algo eventual, algo que sólo se se verá en un post o en muy pocos, lo mejor es "importarla" cuando realmente se necesite.

En esos caso, la única condición a seguir para no tener problemas es que el código esté escrito en una sola línea.

¿Y qué es una hoja de estilo? Un archivo de texto plano, sin formato, que podemos crear con el block de notas y que NO INCLUYE etiquetas. Esto es fundamental, es el error más común. Esta restricción también es válida para agregar definiciones de estilo en la plantilla. Las etiquetas de Blogger <b:skin> y </b:skin> son similares a <style> y </style>; dentro de ellas no debe haber otras etiquetas:
<b:skin>
... propiedades ...
<style>
... propiedades ...
</style>
... propiedades ...
</b:skin>
Eso resaltado es un error y hará que el resultado sea imprevisible. Lo mismo ocurrirá si comentamos el código como lo hacemos en el resto del HTML:
<b:skin>
... propiedades ...
<!-- este comentario es un error -->
... propiedades ...
/* este comentario es válido */
... propiedades ...
</b:skin>
Una hoja de estilo es una lista de definiciones que contiene propiedades y tiene una sintaxis estricta; las propiedades deben terminar con un punto y coma o no tendrán efecto:
<style>
/* el color no se mostrará */
color: #FFF
font-size: 20px;
</style>
Como en Blogger no podemos alojar archivos, tener hojas de estilo externas no es demasiado práctico, tardarán en cargarse y editarlas es complejo ya que habrá que descargarlas, cambiarlas y volverlas a subir. Siempre es mejor agregarlas directamente en la plantilla.

También es buena idea organizarlas y agruparlas, no tiene mucho sentido tener una serie de etiquetas STYLE, una sola es suficiente y nada impide que usemos la que ya está incluida por defecto (b:skin) así que en lugar de algo así:
<b:skin>
... propiedades generales ...
</b:skin>

<style>
... propiedades para el truco XXX ...
</style>

<style>
... propiedades para el truco YYY ...
</style>

<style>
... propiedades para el truco ZZZ ...
</style>
Podemos escribir:
<b:skin>
... propiedades generales ...

/* el truco XXX */
... propiedades ...

/* el truco YYY */
... propiedades ...

/*el truco ZZZ */
... propiedades ...
</b:skin>

27 comentarios:

Gem@  

Nunca había reparado en @import ¿dónde estaba que nunca te oí nombrarla?

Responder
JMiur  

Creo que alguna vez lo charlamos como una forma de cargar CSS en los posts pero ahora, ya no estoy muy seguro :)

Responder
Mon  

Hasta yo lo he entendido! Aunque no lo aplico. Muchas gracias Miur. Y buenos dias ;)

Responder
Unknown  

ohhh mi madre, tengo que procesar la información...procesando...procesando

Responder
Anónimo  

otimo, por isso que gosto desse blog.
esta sempre dando otimas dicas

Responder
Julita Fernández  

En nuestro blog "Creación literaria" tenemos un premio para ti.
Saludos

Responder
Unknown  

gracias JMiur, me viene muy bien para irme haciendo con esto de los estilos.

Un abrazo

Responder
Anónimo  

Muy bien explicado, así yo también lo entiendo...
Gracias por compartirlo.

Saludos. :p

Responder
Gem@  

Creo que tienes razón :S

Responder
caxitos  

Buenas grandisimo;) mira llevo tiempo calentandome la cabeza y no consigo hacerlo a ver si me resolvieras la duda, quiero hacer que al realizar una búsqueda en el buscador me salga una lista con las entradas que coinciden con la búsqueda, no se por donde atacar el problema si me pudieras ayudar te lo agradeceria mucho!un saludo y gracias ante todo

Responder
JMiur  

Me alegra que sirva de algo :D

caxitos: Fíjate en este post. No sé exactamente qué tipo de buscador estás buscando pero en esa entarda se muestran algunas alternativas.

Responder
Bonzu Pipinpadaloxicopolis III  

Cierto no tiene sentido tener tantas etiquetas individuales

Responder
Raúl  

Hola que tal Jm tengo unos problemas de scripts

Lo que pasa es que tengo estos scripts para lo que está abajo del menu que dice Visita nuestros artículos destacados. Bueno estos scripts lo que hacen es que cuando pones el mouse encima de las fotos de los artículos destacados, aparece el titulo del post, en lugar de la frase visita nuestros artículos destacados. Hasta ahi todo bien los scripts funcionaban bien. Estos son los scripts de los artículos destacados:

< script src='http://qcfmpq.bay.livefilestore.com/y1p3HH9k0Pu50VBtgUGHkvAe6COqmYx1Y0pkSfE7qG8j5nsXN02Hdzwx66h9_tehekSb6qjtqPR9WY/pngfix.js'/ >
< script src='http://qcfmpq.bay.livefilestore.com/y1pWo_7OCNbNGLqw2e8AWVglXRVHrPhuUYRZVZ0u9n9c5yIYzLkNgVoNhZOlDyXeGxWXihAmt2SysQ/jquery-latest.js'/ >
< script src='http://qcfmpq.bay.livefilestore.com/y1pWo_7OCNbNGJohCOB8SXNgCtgku2AFlUxN9w_mQQDFihiEKRFtdth5n0oLftr9AABXpwgoSOqDL4/effects.core.js'/ >
< script src='http://qcfmpq.bay.livefilestore.com/y1pWo_7OCNbNGJ-3iOVbzT4NcYbRXEceFm-neCXhoPzA3VWtUwJgRe9qIuJtHvXhAw5T2mU2hC2EHA/functions.js'/ >
< script src='http://www.anniyalogam.com/widgets/hackosphere.js' type='text/javascript'/ >


El problema viene cuando puse los scripts para implementar lightwindow en mi blog. Estos son los scripts de lightwindow:

< script src='http://www.google.com/jsapi'/ >< script >
google.load("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
< /script >

< script charset='ISO-8859-1' src='http://bgiq9w.bay.livefilestore.com/y1pPM4IqPIGwZUlDYIUbYeQj7Ut0-T1F_wFh5dEk5BnrFqxyjx9QP9axvX6ZACcC4GWIGPKnp1HXH4/lightwindowVagaBanana2.js' type='text/javascript'/ >

Cuando pongo estos scripts, los comprimidos de tu libreria, repentinamente deja de funcionar el de los artículos destacados, coloco el mouse encima de una entrada y ya no aparece el título pero lightwindow si funciona.

Que debo hacer a que no haya conflicto entre los scripts de los articulos destacados y el de lightwindow.

Gracias BRO!

Responder
JMiur  

Raul:
Es que, en principio, JQuery y Prototype son incompatibles. Hay varias librerías de ese estilo llamadas frameworks y no pueden usarse juntas o por lo menos casi nunca es posible hacerlo.
Si usas JQuery vas a tener que buscar algún tipo de script para esa librería que haga más o menos lo mismo: crear ventanas modales.

Responder
caxitos  

Hola queridisimo perdona molestarte a ver si me se explicar mejor.(No tiene nada que ver con esta entrada) lo que quiero es lo siguiente:
Cuando realizo una búsqueda en el buscador de mi blog me salen las entradas que coinciden pero que pasa si en la hoja caben 4 entradas solo?para ver el resto de entradas tendría que cambiar de página, lo que quiero es que al realizar la búsqueda me salga un listado con el título de mis entradas que coinciden y en caso de querer ir a alguna de ellas acceder mediante el link de la entrada a ver si me expliqué mejor esta vez. Muchas gracias!!!! a ver i me puedes orientar por que no se por donde empezar;)

Responder
JMiur  

caxitos:
Eso no es nada sencillo de resolver en Blogger, ni siquiera estoy seguro que pueda hacerse. Lo más parecido que he visto es el buscador de Google Draft pero siempre habrá resultados que no se muestren.

Responder
Kalifer  

Me voy a unir a tu lucha por el formulario porque madre mia XD.
Redacto again: quiero poner la css aleatoria en mi blog de blogger, he probado mediante script en el head usando las hojas de estilo que tengo subidas en googlesites y que funcionan bien de una en una. En script lo he probado todo, cambiar el href mediante getelementbyid, document.write etc, pero blogger lo ignora, he puesto los script fuera del < b skin > dentro, a los lados, en esperanto nada. Si me puedes echar una mano te lo agradezco muy mucho.
Y publicando este comentario me ha puesto: Su HTML no es aceptable: Tag is not closed: < b skin >, jajajjajaja, que cariño le estoy cogiendo a blogger hoy.

Responder
JMiur  

Kalifer:
Tendría que ver el código que estás usando para poder contestarte. No estoy seguro que funcione a menos que uses PHP. De todas maneras, debería ver un ejemplo para confirmarlo.

Responder
Kalifer  

Este es uno de los script que he usado, funciona si cambias las css por string y lo pones en el body, lo situo en cualquier lugar del head fuera de los skin. Lo he probado con link en vez de import también.

< script >
function cssrandom()
{
n=0;
this[n++]=@import url(http://sites.google.com/site/oxigenorancio/archivador/Pruebasmalas2.css);
this[n++]=@import url(http://sites.google.com/site/oxigenorancio/archivador/Pruebasmalas1.css);
this.N=n;
}
var css=new cssrandom();
src= css[ Math.floor(Math.random() * css.N) ] ;
document.write(src);
< /script >

Con php se hacerlo, pero blogger no lo acepta ¿no? tendría que tener extensión php. Bueno gracias de antemano aunque creo que blogger lo bloquea por algo.

Responder
JMiur  

Al margen de que ese script genera un error de sintaxis en this[] = @import ....... el problema es que no basta escribir el código sino que ese código debe ser ejecutado y eso no ocurrirá porque es un archivo externo y entiendo que eso, sólo es posible hacerlo con AJAX.

Fíjate algo así, escribo un STYLE usando un script, no hay problema, hasta se ve en el código fuente, pero no hará nada ya que el archivo no se importará:

<script>
//<![CDATA[
src = '@import url(\"http://sites.google.com/site/oxigenorancio/archivador/Pruebasmalas2.css\")';
salida = '<style>' + src + '</style>';
document.write(salida);
//]]>
</script>

Me parece que el tema viene por ese lado, para hacerlo, se requiere PHP.

La otra alternativa es usar algo como styleswitch.js de DynamicDriveLa clave de ese tipo de solución es que todos los estilos son cargados y luego se elige uno:

<link rel="stylesheet" type="text/css" href="unTEMA.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="estilo1" href="otroTEMA.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="estilo2" href="otroMAS.css" />

Responder
Kalifer  

Es cierto que lo muestra en el código fuente pero no lo carga. He estado mirando las diferentes opciones y la verdad es que todas sobrecargan el blog mucho, esto está pensado para php. Muchas gracias por tu ayuda. Tengo que poner un enlace a ti y a Rosa que me habeis ayudado un montón.

Responder
JMiur  

Es totalmente cierto, Kalifer. Ese método recargará mucho el blog. Sólo es lógico si los cambios son pequeños, colores, por ejemplo.

Responder
Administrador  

Hola JMiur

Te envio de antemano un saludo cordial.
Mira, estoy necesitando dar un estilo único a la página principal (una hoja de estilo solo para el home) y dejar el genérico de la plantilla.
La página es esta:
www.croe.com.co

Como verás, la página principal tiene una forma, y si haces click en los enlaces de abajo, el estilo cambia al que tiene la plantilla por defecto.

Intente esto:
<si estoy en el home>
<b:skin>
...
</b:skin>
<b:else/> /* Resto de Paginas */
<b:skin>
</b:skin>
<fin condicion>

Error: Solo puede haber un <b:skin>

Ok. :)

Luego, intenté lo mismo, pero cambié <b:skin> por <style>

Error: No hay un <b:skin>

Ok :)

Luego, cometí el error (por lo menos lo intenté ;) ) de poner la condición dentro de <b:skin> y como mencionas, el resultado fue imprevisible y es como está ahora, un estilo para el home, otro para el resto, pero hay problemas varios de Css.

Vi en una de tus publicaciones, que usando @import se podian sobreescribir estilos, pero no me funcionó.

La pregunta entonces es esta:
¿Como tendría que estructurar la plantilla para que efectivamente pueda darle un estilo único a la página principal?

Te reitero mi agradecimiento y tu atención.

Responder
JMiur  

Primero que nada,, si bien <b:skin> y <style> son lo mismo, DEBE haber un <b:skin> en la plantilla y no peude haber dos pero, eso soluciona sencillo con tu mismo esquema:

<si estoy en el home>
<b:skin>
.......
.......
</b:skin>
<b:else/> /* Resto de Paginas */
<style>
.......
.......
</style>
<fin condicion>

Es decir, usas b:skin en el home y style en el resto o viceversa, es indiferente.

También es probable que haya definiciones comunes a ambos tipos de páginas, en ese caso, sacas b:skin de las condiciones, lo pones arriba con esas propiedades comunes y en las condiciones usas style:

<b:skin>
.......
.......
</b:skin>

<si estoy en el home>
<style>
.......
.......
</style>
<b:else/> /* Resto de Paginas */
<style>
.......
.......
</style>
<fin condicion>

Responder
Administrador  

Wow.
Era bastante sencillo :)
Si, me falto jugar un poco más con las posibilidades.
Por hoy decidi dejar todo el Css junto y solo condicionar los scripts y el HTML del body.
Mañana con un poco mas de calma y con tu explicación dejaré ya todo Ok, mas que todo uno lo hace pensando en el tiempo de carga, pero ya que lo pienso hay varias opciones.

Muchas gracias por tu ayuda.
Un saludo. :)

Responder
jorgedeSaliceta  

Hola, impresionante sitio. A mi me gustaría que un iframe cuya fuente es un documento de google docs abra los vínculos que hay allí en otra ventana (usaría target="blank"). Docs no me permite modificar el html del documento ¿Podría darle un ID al iframe para que desde la hoja de estilo incrustada en blogger, usando target="blank" o similar, me los habrá en otra ventana o pestaña? Un saludo.

JMiur  

No, de ese modo no puede hacerse. Los contenidos de los IFRAMES no pueden ser modificados desde la página que los incluye.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR