Estoy trabajando una plataforma Moodle 2, y debo decir que los muchachos se pasaron con los cambios… \u00a1cu\u00e1nto cuesta adaptarse a las novedades!<\/p>\n
Sin embargo,\u00a0 voy entendiendo y encontrando la l\u00f3gica poquito a poco.<\/p>\n
Hoy quiero comentar c\u00f3mo hice algunas cosas espectaculares con CSS.<\/p>\n
Yo ten\u00eda una p\u00e1gina con links (p\u00e1gina de categor\u00eda) y quer\u00eda poner al lado de cada enlace una imagen que cambiara cuando pasaba el mouse sobre el link.<\/p>\n
Si tuviera acceso al HTML, esto se resuelve de una forma muy simple: creando clases<\/strong> para los enlaces:<\/p>\n En la p\u00e1gina Html:<\/p>\n 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\u00e1 sobre \u00e9l:<\/p>\n Lo que yo necesitaba era poner una imagen a la derecha, as\u00ed que en lugar de cambiar el color, cambiaba la imagen de fondo, lo cual en cualquier p\u00e1gina web puede hacerse utilizando por ejemplo:<\/p>\n En Moodle la cosa se complica porque las im\u00e1genes se toman de una manera diferente<\/a>:<\/p>\n Pero mi mayor complicaci\u00f3n era hacer todo esto… \u00a1sin tocar el c\u00f3digo PHP de la p\u00e1gina de Moodle!<\/strong><\/p>\n Entonces estuve buscando de qu\u00e9 manera pod\u00eda poner estilos diferentes a enlaces diferentes… de acuerdo al texto del enlace<\/strong>. Y me encontr\u00e9 con un link maravilloso que explica esa y otras cosas geniales: 19 tips y trucos para CSS.<\/a><\/p>\n Lo que hacemos es decirle que aquellos enlaces (a) que tienen dentro del texto del enlace (href*) lo que est\u00e1 entre comillas, tienen que tener determinado estilo:<\/p>\n En este post se aclara qu\u00e9 son los corchetes en CSS: CSS para pesta\u00f1as<\/a>:<\/p>\n Los corchetes se usan para seleccionar atributos, por ejemplo:<\/p>\n [type=radio] {}, con esto seleccionas todos los elementos que tengan el atributo “type” y que \u00e9ste sea igual a “radio”.<\/p>\n La “viborita” selecciona elementos con el mismo padre, y que respeten el orden del selector, es un selector de hermanos, por ejemplo: Aqu\u00ed una explicaci\u00f3n bien detallada de algunos elementos utilizados: CSS: Formatos<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" Estoy trabajando una plataforma Moodle 2, y debo decir que los muchachos se pasaron con los cambios… \u00a1cu\u00e1nto cuesta adaptarse a las novedades! Sin embargo,\u00a0 voy entendiendo y encontrando la l\u00f3gica poquito a poco. Hoy quiero comentar c\u00f3mo hice algunas cosas espectaculares con CSS. Yo ten\u00eda una p\u00e1gina con links (p\u00e1gina de categor\u00eda) y quer\u00eda … Continuar leyendo “Haciendo magia con CSS”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3145","post","type-post","status-publish","format-standard","hentry","category-educacion-tecnologia"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/3145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=3145"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/3145\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=3145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=3145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=3145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<a class=\"enlaceazul\" href=\"http:\/\/esteenlaceesazul\">Este enlace es de color azul<\/a><\/pre>\n
<a class=\"enlacerojo\" href=\"http:\/\/esteenlaceesrojos\">Este enlace es de color rojo<\/a><\/pre>\n
a.enlaceazul { color: #000099;}\na.enlaceazul:visited { color: #000088;}\na.enlaceazul:hover { color: #0000FF;}\n\na.enlacerojo {color: #990000;}\na.enlacerojo:visited {color: #880000;}\na.enlacerojo:hover {color: #FF0000;}<\/pre>\nbackground: url(http:\/\/imagen.png) no-repeat center right;<\/code><\/p>\na {background-image:url([[pix:theme|nombredelaimagen]]);}<\/pre>\na[href*=\"texto_del_enlace.html\"] {\nheight: 50px; \/* Cambiando la altura del link de acuerdo a la altura de mi imagen *\/\nbackground: url([[pix:theme|matematica]]) no-repeat right top;\n}<\/pre>\na[href*=\"texto_del_enlace.html\"]:hover {\nheight: 129px; \/* Cambiando la altura del link de acuerdo a la altura de mi imagen *\/\nbackground: url([[pix:theme|matematica2]]) no-repeat right top;\n}<\/pre>\n
\n[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.<\/p><\/blockquote>\n