Continuando con mis experimentos de stylish, ahora he atacado la pagina principal del blackboard que como tratando de hacerme la vida mas dificil es en verdad un frameset: el encabezado y lo demas.
El Encabezado.
El encabezado que consiste de un banner, tres links (de los cuales dos son practicamente inutiles) y los tabs de navegacion, en realidad esta hecho de una serie de tablas anidadas al igual que el login, pero un poco mas confuso. Me imaginaba que esta parte sería trabajo facil, pero incluso con el Esbozado de la pagina visible era muy complicado saber cual era el proposito de muchos de los <td>s.
Lo primero que hice fue tratar de acomodar los tabs de navegacion, que afortunadamente tenian clases para administracion, actual y normal, lo que facilito un poco el trabajo. Por desgracia, la baraña de tablas no me dejaba hacer las pestañas del tamaño que yo quería. Despues de muchos intentos y experimentos lo logre, con trucos de backgrounds invisibles y otros detalles.
Lo siguiente fue eliminar los dos links estupidos que te llevaban a la pagina de blackboard y que me han hecho enojar innumerables veces. Uno de ellos decía home y siempre le picaba con la esperanza de volver a la página principal del blackboard (justo la que edite), pero en verdad me llevaba a la pagina principal del producto entero, donde lo puedes comprar. Porque… tu sabes… los estudiantes necesitan ese link en su encabezado por si les da un impulso de comprarlo. El otro era de ayuda pero es para clientes, asi que no lo podemos usar los alumnos. Tsk. El unico que quedo fue el de log out.
Para finalizar, hice un banner nuevo y un fondo con un ligero gradiente, solo para que se vea un poco mas bonito.
PD: Hay una parte que dice “Fun Zone” en el codigo que asumo que no puedo ver por falta de permisos suficientes, me hubiera gustado probarlo pero no pude.
El Cuerpo.
El cuerpo sorpresivamente me tomo menos tiempo que el encabezado a pesar de tener mas contenido, solo tuve que ser creativo con los selectores de CSS utilizando codigo como font[size=”2″]. Lo unico con lo que tuve un problema real fue con los pequeños iconos de editar/quitar/minimizar/maximizar de cada modulo porque no tienen absolutamente nada con lo que los pueda asociar, excepto el URL que es dinamico entonces no lo puedo usar porque cambiaria de caso en caso, pero no me podia dar por vencido asi que recurri a un elemento de CSS3 que me permite escoger basado en como comienza un string! (gracias a dios firefox 2 y 3 lo soportan, no estoy seguro de firefox 1.5.)
a[href^=”edit_module”] <– eso, eso es la onda.
Claro que si la pagina estuviera hecha con HTML bien formado y con al menos una minima especificacion de clases entonces nada de esto hubiera sido un problema.
Comparacion.
Revisa el Codigo despues del salto.
Codigo.
He separado el codigo para el Header y My Institution en dos archivos:
Header:
-
-
@namespace url(http://www.w3.org/1999/xhtml);@-moz-document url-prefix("http://cursos.itesm.mx/webapps/portal/top_frame.jsp") {
-
-
*{
-
margin: 0 !important;
-
padding: 0 !important;
-
}
-
-
body{
-
background-color: #f1f1f1 !important;
-
background-image: url(http://temporadadepatos.net/tiradero/basura/bbheaderbg.png) !important;
-
background-repeat: repeat-x !important;
-
background-position: top !important;
-
}
-
-
table tr td table tr td img, td[colspan="6"], td[colspan="6"] img, a[href="http://www.blackboard.com/"], a[href="http://support.blackboard.com/"]{
-
display: none !important;
-
}
-
-
.tabname, .activeTabName, .adminTabName{
-
padding: 10px !important;
-
display: block !important;
-
margin: 0 2px !important;
-
font-family: "Trebuchet MS", Verdana, Sans-Serif !important;
-
}
-
-
.tabname{
-
background-color: #4166AA !important;
-
}
-
-
.activeTabName{
-
background-color: #fff !important;
-
}
-
-
a .activeTabName{
-
color: #4166AA !important;
-
}
-
-
table tr td[align="left"] table tr td{
-
background-color: transparent !important;
-
padding: 0 !important;
-
}
-
-
td[height="60"]{
-
height: 48px !important;
-
}
-
-
a .iconLabel{
-
color: #666 !important;
-
right: 0 !important;
-
top: 0 !important;
-
width: 60px;
-
position: absolute !important;
-
padding: 10px !important;
-
background-image: url("http://www.temporadadepatos.net/foros/my-templates/tdepatos/images/delete.png");
-
background-repeat: no-repeat;
-
background-position: 5px center;
-
}
-
-
table tr td table tr td[width="150"] a{
-
position: absolute !important;
-
top: 0;
-
left: 0;
-
background-image: url(http://temporadadepatos.net/tiradero/basura/logotecbb.png) !important;
-
display: block !important;
-
width: 250px !important;
-
height: 60px !important;
-
}
-
-
}
My Institution
-
-
@namespace url(http://www.w3.org/1999/xhtml);@-moz-document url("http://cursos.itesm.mx/webapps/portal/tab/_1_1/index.jsp") {
-
-
table tr td font[size="4"]{
-
color: #656565 !important;
-
font-family: "Georgia", serif !important;
-
font-size: 1.5em !important;
-
letter-spacing: .1em !important;
-
font-variant: small-caps !important;
-
}
-
-
table tr td[bgcolor="#CCCCCC"]{
-
background-color: transparent !important;
-
border-bottom: 1px solid #ccc !important;
-
}
-
-
a{
-
text-decoration: none !important;
-
border-bottom: 1px dotted #4166aa !important;
-
color: #4166aa !important;
-
}
-
-
td, a, font[size="2"]{
-
font-family: "Trebuchet MS", Verdana, Sans-Serif !important;
-
color: #414141;
-
}
-
-
table table table[bgcolor="#336666"]{
-
display: none;
-
}
-
-
table table table td[bgcolor="#eeeeee"]{
-
background-color: #f1f1f1 !important;
-
}
-
-
table table[bgcolor="#336666"]{
-
background-color: #ccc !important;
-
}
-
-
table table[bgcolor="#336666"] table table tr td img{
-
display: none;
-
}
-
-
/*Sidebar Links*/
-
-
table table[bgcolor="#336666"] table table tr td a{
-
display: block !important;
-
padding-left: 22px !important;
-
border-bottom: 1px solid #ccc !important;
-
margin-bottom: 1px !important;
-
}
-
-
/*sidebar links*/
-
-
table table[bgcolor="#336666"] table table tr td a[href="http://cursos.itesm.mx/bin/common/announcement.pl?action=LIST&context=mybb&scope=_all"]{
-
background-image: url("http://temporadadepatos.net/foros/my-templates/tdepatos/images/image-thread.png");
-
background-repeat: no-repeat;
-
}
-
-
table table[bgcolor="#336666"] table table tr td a[href="http://cursos.itesm.mx/bin/common/calendar.pl?location=mybb&subroutine=day&filter=showAll"]{
-
background-image: url("http://www.temporadadepatos.net/foros/my-templates/tdepatos/images/date.png");
-
background-repeat: no-repeat;
-
}
-
-
table table[bgcolor="#336666"] table table tr td a[href="http://cursos.itesm.mx/bin/common/tasks.pl"]{
-
background-image: url("http://www.temporadadepatos.net/foros/my-templates/tdepatos/images/pencil.png");
-
background-repeat: no-repeat;
-
}
-
-
table table[bgcolor="#336666"] table table tr td a[href="http://cursos.itesm.mx/webapps/gradebook/do/student/viewCourses"]{
-
background-image: url("http://temporadadepatos.net/foros/my-templates/tdepatos/images/image-sticky.png");
-
background-repeat: no-repeat;
-
}
-
-
table table[bgcolor="#336666"] table table tr td a[href="http://cursos.itesm.mx/bin/common/email_selectcourse.pl"]{
-
background-image: url("http://www.temporadadepatos.net/foros/my-templates/tdepatos/images/mail-message-new.png");
-
background-repeat: no-repeat;
-
}
-
-
table table[bgcolor="#336666"] table table tr td a[href="http://cursos.itesm.mx/bin/common/search.pl?action=FORM&context=USERDIR&type=SEARCH&operation=VIEW"]{
-
background-image: url("http://www.temporadadepatos.net/foros/my-templates/tdepatos/images/user_comment.png");
-
background-repeat: no-repeat;
-
}
-
-
table table[bgcolor="#336666"] table table tr td a[href="http://cursos.itesm.mx/bin/common/search.pl?action=FORM&context=ADDRESSBOOK&type=SEARCH&operation=VIEW&nav=my_addressbook"]{
-
background-image: url("http://temporadadepatos.net/tiradero/basura/book_addresses.png");
-
background-repeat: no-repeat;
-
}
-
-
table table[bgcolor="#336666"] table table tr td a[href="http://cursos.itesm.mx/bin/common/my_inst_tab.pl?family=my_inst_personal_info"]{
-
background-image: url("http://temporadadepatos.net/tiradero/basura/vcard.png");
-
background-repeat: no-repeat;
-
background-position: 0 center;
-
}
-
-
/*List items (though no ul or ol anywhere!)*/
-
-
li{
-
list-style: square !important;
-
margin-left: 25px;
-
color: #414141;
-
}
-
-
/*Table Headers*/
-
-
font[size="2"] b{
-
font-variant: small-caps !important;
-
}
-
-
/*Table Headers too, but in a different module*/
-
-
td[bgcolor="#f0f0f0"], th[bgcolor="#f0f0f0"]{
-
background-color: transparent !important;
-
border-bottom: 1px solid #f1f1f1 !important;
-
padding-top: 10px !important;
-
}
-
-
/*Links inside the Table Headers*/
-
-
th[bgcolor="#f0f0f0"] font[size="2"] a{
-
padding-left: 20px !important;
-
background-image: url(http://temporadadepatos.net/tiradero/basura/book_open.png) !important;
-
background-repeat: no-repeat;
-
}
-
-
/*Remove images from the Table Headers so I can use my own*/
-
-
th img{
-
display: none;
-
}
-
-
/*Remove Module Link*/
-
-
td[width="50%"] table tr td table tr td[align="right"] a[onclick="return removeModule();"] img{
-
display: none;
-
}
-
-
td[width="50%"] table tr td table tr td[align="right"] a[onclick="return removeModule();"]{
-
display: block !important;
-
width: 16px !important;
-
height: 16px !important;
-
background-image: url(http://temporadadepatos.net/tiradero/basura/cross.png) !important;
-
background-repeat: no-repeat;
-
}
-
-
/*Minimize*/
-
-
td[width="50%"] table tr td table tr td[align="right"] a[href^="update_module.jsp?action=minimize"] img{
-
display: none;
-
}
-
-
td[width="50%"] table tr td table tr td[align="right"] a[href^="update_module.jsp?action=minimize"]{
-
display: block !important;
-
width: 16px !important;
-
height: 16px !important;
-
background-image: url(http://temporadadepatos.net/tiradero/basura/application_delete.png) !important;
-
background-repeat: no-repeat;
-
}
-
-
/*Maximize*/
-
-
td[width="50%"] table tr td table tr td[align="right"] a[href^="update_module.jsp?action=maximize"] img{
-
display: none;
-
}
-
-
td[width="50%"] table tr td table tr td[align="right"] a[href^="update_module.jsp?action=maximize"]{
-
display: block !important;
-
width: 16px !important;
-
height: 16px !important;
-
background-image: url(http://temporadadepatos.net/tiradero/basura/application_add.png) !important;
-
background-repeat: no-repeat;
-
}
-
-
/*Edit*/
-
-
td[width="50%"] table tr td table tr td[align="right"] a[href^="edit_module"] img{
-
display: none;
-
}
-
-
td[width="50%"] table tr td table tr td[align="right"] a[href^="edit_module"]{
-
display: block !important;
-
width: 16px !important;
-
height: 16px !important;
-
background-image: url(http://www.temporadadepatos.net/foros/my-templates/tdepatos/images/pencil.png) !important;
-
background-repeat: no-repeat;
-
}
-
-
/*Modify Content/Layout*/
-
-
a[href="contents.jsp"], a[href="layout.jsp"]{
-
padding-left: 22px !important;
-
background-image: url(http://temporadadepatos.net/tiradero/basura/application_form_edit.png) !important;
-
background-repeat: no-repeat !important;
-
background-color: transparent !important;
-
border: 0 !important;
-
}
-
-
a[href="contents.jsp"]{
-
background-image: url(http://temporadadepatos.net/tiradero/basura/application_form_edit.png) !important;
-
}
-
-
a[href="layout.jsp"]{
-
background-image: url(http://temporadadepatos.net/tiradero/basura/color_swatch.png) !important;
-
}
-
-
}
0 Respuestas a “Experimentando con Stylish y Blackboard: Parte 2: Pagina de inicio.”