He decidido empezar a experimentar un poco mas con CSS por medio de Stylish para Firefox. Lo que stylish hace es que te deja aplicar tu propia hoja de estilos a cualquier pagina web. Mi primer blanco para CSS es el sistema de blackboard que utiliza el tec de monterrey para sus cursos.
Estandares web.
Dios mio, no te das cuenta de lo importante que son los estandares para desarrollar paginas web hasta que te topas sitios como este. El primer reto de estilizarlo con CSS es evidente: ningun elemento tiene clase o ID que lo identifique. Y la estructura, bueno, sobre la estructura solo dire que llega a tener hasta seis tablas anidadas! seis! … Ironicamente, esto sirvio un poco para estilizar por medio de seleccion de padres e hijos, y me evito buscar por atributos.
Resultados.
Aquí está una comparación del antes y el después. Notarán que quité el encabezado, el pie y la barra lateral para pedir ayuda pero mantuve el branding.
Me hubiera gustado editar el botón de Login y cambiar el texto, pero todavia no se tanto. Apreciaria tips sobre eso.Estuve pensando en utilizar :after y :before, pero si alguien tiene una mejor idea lo apreciaria bastante. Puedes ver el codigo despues del salto.
El CSS
Oh si, aqui esta el CSS tambien por si lo quieren usar o editar, libre bajo la licencia GPL o algo :P.
-
-
@namespace url(http://www.w3.org/1999/xhtml);
-
-
@-moz-document url("http://cursos.itesm.mx/webapps/login/") {
-
-
img, tr td span, tr td tr td p, table p{display: none !important;}
-
-
input{
-
padding: 5px !important;
-
border: 1px solid #f1f1f1 !important;
-
font-size: 1.2em !important;
-
color: #666 !important;
-
font-family: "Trebuchet MS", sans !important;
-
}
-
-
table tr td table tr td{
-
background-color: #f1f1f1 !important;
-
}
-
-
table tr td table tr td table tr td table{
-
margin-left: -30px !important;
-
}
-
-
table tr td table tr td table tr td table tr td font{
-
color: #4166aa !important;
-
font-family: "Georgia", serif !important;
-
font-size: 1.5em !important;
-
letter-spacing: .1em !important;
-
font-variant: small-caps !important;
-
}
-
-
table tr td table tr td table tr td table tr td table tr td font{
-
color: #656565 !important;
-
font-size: .85em !important;
-
display: block !important;
-
font-family: "Trebuchet MS", sans !important;
-
}
-
-
table tr td table tr td table tr td table tr td table tr td br{
-
display: block !important;
-
margin: 2px !important;
-
}
-
-
td[height="203"]{
-
background-image: url(http://temporadadepatos.net/tiradero/basura/logotec.png) !important;
-
background-repeat: no-repeat !important;
-
background-position: center 30px !important;
-
width: 203px !important;
-
display: block !important;
-
height: 300px !important;
-
float: left !important;
-
margin-right: -50px !important;
-
padding: 0 20px !important;
-
}
-
-
}
:O suena bien, habra k experimentar