5

"Hackear" Platzi para hacer más visibles tus cursos aprobados

Sergio
samdsmx
18553

Hola, si bien platzi muestra tus cursos aprobados dentro de una ruta con el círculo verde exterior. La verdad me era difícil apreciarlo a simple vista… por lo que me di a la tarea de escribir mi propio CSS, para modificar el comportamiento de la página.

Vista orignial

Uno puede inspeccionar el codigo de una pagina, y modificar los estilos, claro todo los cambios se borrarán cuando se refresque la página… Pero es de utilidad para explorar e ir haciendo una estrategia para diseñar tu codigo.

Como se puede observar, en el editor de codigo, los badgages de cursos concluidos tienen la clase CSS “is-approved”. Ocuparemos esta clase para embeber nuestros cambios.

Para hacer que nuestros cambios se guarden en nuestro navegador, podremos ocupar la extension llamada Stylish; la cual permite salvar cambios de estilo y aplicarlos de nuevo cada vez que entramos a la pagina web correspondiente.

Con esta herramienta podemos empezar a escribir nuestro css hack. Como mencione anteriormente usaremos la clase is-approved sin embargo en este caso no queremos sobre escribir las propiedades de este estilo, sino agregar unas cuantas… para lo que nos valdremos del modificador de seleccion :before

Lo primero seria conseguir una imagen publica para insertarla junto a cada badge de nuestros cursos terminados… Yo elegi una flechita verde. Ocupando la propiedad **content ** cargamos la imagen desde su url.

Y finalmente la acomodamos en la poscion (position:absolute, width, height) y tamaño (transform: scale(0.8)) que mas nos convenza . Finalmente vemos el resultado:

Vista orignial

El tema terminado lo puedes instalar en tu navegador en la siguiente liga: Instalar

Espero les sea de utilidad y si crean otros estilos estare encantado de que los compartan.

Escribe tu comentario
+ 2
0
4484Puntos

eso no es hackear es solo modificar el css en navegador.

1
18553Puntos
un año

Es por eso que lo puse entre comillas. 😉