Posted by jdflorez on September 23, 2011 at 4:02pm
Para los que usan el tema de Omega (http://drupal.org/project/omega) para crear subtemas y quieren añadirle CSS condicionales, acá les dejo un post detallando cómo hacerlo. Espero que les sea de ayuda como lo fue para mí.
http://rootstack.com/es/blog/tip-agregar-hojas-de-estilo-condicionales-u...
Comments
gracias por compartir...
Gracias por compartir este Tutorial!!! esta muy interesante
Excelente blog!!! :)
Excelente Starter-Theme
No tengo mucha experiencia con otros grandes StarterKits como Zen, Fusion, etc, pero he experimentado muchisimo con el theme Omega desde la version 1, ahora con la version 3.0 la verdad es que Jake Strawn ha hecho un gran trabajo con este theme, lo recomiendo ampliamante como un inicio para cualquier diseno web de calidad y bien estructurado.
No me va
Hice lo que indicas aqui, pero me prevalece el global.css si desactivo en firebug el global.css si ya me coge el ie.css
Que puedo hacer para que cuando entres con iexplorer se anteponga el ie.css al global.css??
Gracias de antemano.
Probaste esto
Probaste esto http://drupal.org/project/conditional_styles ?
Espero que te sirva.
Explicame algo que no entendí
Explicame algo que no entendí bien, ¿cómo lo estas probando en IE?
Puedes intentar lo siguiente, en el .info de tu tema, bájale el weight al global.css e intenta.
css[global.css][options][weight] = 3
Si pudiera accesar el sitio de prueba que tienes, te podría ayudar un poco más
Para que una hoja de estilos prevalezca..
Para que una hoja de estilos prevalezca sobre las demas se debe de colocar debajo te voy a dar un consejo que te sera muy util bajate el programa fileseek es un programa de busqueda de palabras dentro de los archivos, si trabajas en windows y pon la ruta donde esta la carpeta del tema globlal.css entonces te dira los archivos que contienen esa palabra si quieres puedes añadir .css para controlar las nuevas reglas. un saludo
no termino de entenderlo
no se como hacer lo que me dices, porque el archivo que enlaza con global.css es el info y el que hace la condicional para iexplorer con las lineas que indica aqui es el template.
yo pensaba que al poner esa condicion si detectaba q es internet explorer prevaleceria el css de internet explorer.
En fin a ver alguien me guia
Lo que quiere decir, es que
Lo que quiere decir, es que el último css que cargue es el que va a prevalecer si la regla es igual.
Es decir, si tienes
.site-name .slogan { color: #000;} en IE.css
.site-name .slogan {color: #FFF;} en global.css
La regla que está en Global.css, al cargar de último, sobreescribirá los valores de ie.css
Si haces la regla de IE.css más específica, puedes evitar eso, o haciendo que cargue despues de global.css
Fijate en el .info de tu tema, y bájale el weight a global.css
Suerte
Ensayá esto
Saludos.
En Zen, se pueden hacer cosas como estas: conditional-stylesheets[if lte IE 8][all][] = css/ie8.css
En tu caso, ensayá lo siguiente: conditional-stylesheets[IE][all][] = css/ie.css
No sé si funcione para este tema, pero vale la pena intentarlo.
En caso de que no, mirá este artículo: http://rafael.adm.br/css_browser_selector/
Ahí te podés descargar el js, que básicamente lo que hace es permitirte usar clases según el navegador que querás. Ejemplo:
.ie8 body{}, .ie7 body{}, .chrome body{}, .mozilla body{}
En el último caso, puede que la memoria me falle y no sea así la clase, pero lo podés buscar dentro del archivo mencionado.
Me comentás cómo te va.
Tenés un error de concepto.
Tenés un error de concepto. Primero se hacen las css para los navegadores que funcionan como es debido. Luego se le pasan las css a Explorer con un condicional para arreglar las fallas que tenga.
Asi lo hice
Asi lo hago, yo estoy haciendo el css para todos los navegadores, de hecho el que utilizo es el firefox, pero ya como me paso la ultima vez voy comprobando de vez en cuando como se ve en iexplorer.
entonces en la barra de menu me encontre el primer fallo, yo puese esto
background: -moz-linear-gradient(center top , #101010 0%, #3B3B3B 5%, #111111 90%, #242424 95%, #000000 100%) repeat scroll 0 0 transparent
y en el firefox se me un degradado, todo perfecto, pero en iexplorer no aparece nada, asi que tendre que poner una imagen de fondo o dejarlo todo negro.
Gracias por tu consejo pero lo estoy haciendo como tu dices, hacerlo para todo los navegadores e ir corrigiendo los fallos de iexplorer.
Es que esa propiedad no esta
Es que esa propiedad no esta soportada por ie. Si, tendrias que usar una imagen o usar un color plano.
Ese concepto lo tengo
Ese concepto lo tengo esta claro primero se hace en firefox , pero no quiero ir agregando condicionales sino tener una hoja de estilos para ie 7 , ie8 ,ie9 aunque esta ultima no creoque se le meta nada.