Estoy trabajando una plataforma Moodle 2, y debo decir que los muchachos se pasaron con los cambios… ¡cuánto cuesta adaptarse a las novedades!
Sin embargo, voy entendiendo y encontrando la lógica poquito a poco.
Hoy quiero comentar cómo hice algunas cosas espectaculares con CSS.
Yo tenía una página con links (página de categoría) y quería poner al lado de cada enlace una imagen que cambiara cuando pasaba el mouse sobre el link.
Si tuviera acceso al HTML, esto se resuelve de una forma muy simple: creando clases para los enlaces:
En la página Html:
<a class="enlaceazul" href="http://esteenlaceesazul">Este enlace es de color azul</a>
<a class="enlacerojo" href="http://esteenlaceesrojos">Este enlace es de color rojo</a>
En la hoja de estilo CSS, podemos configurar un estilo para cada clase, para su estado “normal”, para el enlace ya visitado y para el enlace en el momento en que el mouse está sobre él:
a.enlaceazul { color: #000099;}
a.enlaceazul:visited { color: #000088;}
a.enlaceazul:hover { color: #0000FF;}
a.enlacerojo {color: #990000;}
a.enlacerojo:visited {color: #880000;}
a.enlacerojo:hover {color: #FF0000;}
Lo que yo necesitaba era poner una imagen a la derecha, así que en lugar de cambiar el color, cambiaba la imagen de fondo, lo cual en cualquier página web puede hacerse utilizando por ejemplo:
background: url(https://imagen.png) no-repeat center right;
En Moodle la cosa se complica porque las imágenes se toman de una manera diferente:
a {background-image:url([[pix:theme|nombredelaimagen]]);}
Pero mi mayor complicación era hacer todo esto… ¡sin tocar el código PHP de la página de Moodle!
Entonces estuve buscando de qué manera podía poner estilos diferentes a enlaces diferentes… de acuerdo al texto del enlace. Y me encontré con un link maravilloso que explica esa y otras cosas geniales: 19 tips y trucos para CSS.
Lo que hacemos es decirle que aquellos enlaces (a) que tienen dentro del texto del enlace (href*) lo que está entre comillas, tienen que tener determinado estilo:
a[href*="texto_del_enlace.html"] {
height: 50px; /* Cambiando la altura del link de acuerdo a la altura de mi imagen */
background: url([[pix:theme|matematica]]) no-repeat right top;
}
a[href*="texto_del_enlace.html"]:hover {
height: 129px; /* Cambiando la altura del link de acuerdo a la altura de mi imagen */
background: url([[pix:theme|matematica2]]) no-repeat right top;
}
En este post se aclara qué son los corchetes en CSS: CSS para pestañas:
Los corchetes se usan para seleccionar atributos, por ejemplo:
[type=radio] {}, con esto seleccionas todos los elementos que tengan el atributo “type” y que éste sea igual a “radio”.
La “viborita” selecciona elementos con el mismo padre, y que respeten el orden del selector, es un selector de hermanos, por ejemplo:
[type=radio]:checked ~ label {}, selecciona todos los elementos “label” que sean hermanos de un elemento con “type” igual a “radio” seleccionado y que ademas, se cumpla que el label esta despues del radio button, lo particular de este selector es que los elementos no tienen que estar exactamente juntos, puede haber otro elemento entre ellos, y aun asi funcionaran.
Aquí una explicación bien detallada de algunos elementos utilizados: CSS: Formatos