Posted by elpoderosoperu on August 1, 2012 at 9:06pm
Hola amigos. Tengo un sitio con Drupal 7 y Views. Desarrollé un bloque para el front donde muestro titular, imagen y una taxonomía (Términos) de varias secciones como Fútbol, Londres 2012, etc. Mi duda es como puedo darle un color a cada término con CSS. Adjunto una imagen como ejemplo. En esa web se ve que Londres 2012 (Término o categoría) está pintada de rosado, lo que es Fútbol de verde, etc.
A través de Views si es posible asignar un color a las categorías o términos, pero es para todo el bloque, no diferencia por categorías. Osea, puedeo asignar color verde a todo ese bloque pero no me diferencia por categorías
Gracias por la ayuda.
| Attachment | Size |
|---|---|
| vistas1.jpg | 107.84 KB |
Comments
En cada field de tu view, hay
En cada field de tu view, hay una opcion de estilos. En el enlace que te pongo, hay una imagen con la opción: http://d.pr/i/JVgP
Si te fijas, debajo del campo para que escribas la clase, dice que puedes usar tokens. Asi que podrias usar (creo yo), el token con el titulo de la taxonomia para asignarsela al bloque y asi declaras los css con las clases de las taxonomias. Ejemplo:
Taxonomia: Noticias
CSS:
.Noticias {background-color: #FF3333;}
Intentalo a ver como te va
En views puedes usar el delta
En views puedes usar el delta del tag y excluir de la presentación, ponerlo encima del field en el que quieres aplicar el estilo, luego en "Style setting agregar la clase "seccion"[delta] y de esa manera se agregara una clase por termino, por ejemplo, para el primer termino sera seccion1 para el segundo seccion2 (esto puede variar porque es el id del termino de taxonomía).
luego defines el estilo
.seccion1{
background-color:#333;
}
.seccion1{
background-color:#999;
}
Nos comentas si te sirvio.
Aún no logro este objetivo.
Aún no logro este objetivo. Entiendo que el delta es el ID del término o categoría. Por ejemplo el término locales de mi sitio tiene la ID 3, Deportes la ID 11, etc..Así que me fuí a Vistas, luego al Field (campo) Categorías y en opciones de estilo escribí la clase CSS: "seccion"[delta]
Luego en la hoja de estilos de views.css agregué
.seccion3 {
background: #cc0000;
}
.seccion11{
background: #6A88A3;
}
Sin embargo, aún no logró resultados
[delta] es solo un ejemplo el
[delta] es solo un ejemplo el token especifico no lo recuerdo, prueba, en vistas, ingresando al field que quieres poner la clase, luego selecciona "REWRITE RESULTS" > "Rewrite the output of this field" > REPLACEMENT PATTERNS, ahi veras los patrones que puedes usar, ahora, te acaba de salir un textarea, reescribe la salida html, algo como
[campo-que-edito]
esto deberia darte algo como:
Termino 100
Utiliza google chrome para que puedas ver el html que se genera y veas los resultados.
Sigo los pasos pero aún nada
Ok. Sigo todos los pasos, pero aún nada. el token para los términos es [field_cat] según REPLACEMENT PATTERNS, en rescribir resultados puse: [field_cat]
Mientras en la hoja de estilos agregué, donde 2 y 3 son las ID's de los términos.
.seccion2 {
background: #cc0000;
}
.seccion3{
background: #6A88A3;
}
Revisando el html con chrome encuentro
Política
Gracias
Haber vamos por pasos, 1.
Haber vamos por pasos,
1. creas la vista y agregas el termino de taxonomia (no hay mayor misterio en ello), luego agregas otro campo (http://d.pr/i/sU14)
2. Agregas el ID del termino (http://d.pr/i/nBsB)
3. Excluyes el campo de la presentación (http://d.pr/i/TuVf)
4. Reordenas los campos para que el id del termino se ubique más arriba y editas el termino (http://d.pr/i/wlSQ)
5. Ahora si "REWRITE RESULTS" > "Rewrite the output of this field" > REPLACEMENT PATTERNS y colocas el html que necesitas (http://d.pr/i/xDLu)
6. Mira los resultados (http://d.pr/i/jhwM)
Espero te sirva
SOLUCIONADO
Listo, ahora sí todo funcionó de maravila. La clave está en REPLACEMENT PATTERNS, reescribir el ID y afectarlo con el CSS. Gracias