Ahir us vam explicar com afegir botons a l’editor HTML. Doncs bé, avui, per completar l’anotació d’ahir, us ensenyarem com modificar aquests botons amb CSS i fer que destaquin una mica més. Utilitat? Doncs sí, molta: d’aquesta manera, veurem ràpidament quin botó hem d’apretar, perquè els botons per defecte, a part qu són molt sossos, costa distingir-los entre ells.

Com sempre, modificarem un arxiu: en aquest cas, modificarem el wp-admin/wp-admin.css.

Primer de tot, recordem el codi dels botons:

edButtons[edButtons.length] =
new edButton('ed_more'
,'more'
,'<!--more-->'
,''
,'t'
,-1
);

Ara fixem-nos en la segona línia, allà on diu ed_more. Això ens dóna una pista sobre com aplicar un estil a aquest botó en concret. Si volem que el botó more ens quedi com a la imatge anterior, la cosa hauria de quedar així:

#ed_more {
font-weight: bold;
border: dotted;
}

Com veieu, aprofitem la ID del botó per aplicar-li un estil. En el cas que vulguem aplicar només un fons, podríem fer una cosa semblant a això, en aquest cas pel botó b-quote:

#ed_block {
background-color:#CCFF66;
}

El codi corresponent a la imatge anterior (els dos trets del Codex de WordPress) és aquest:

#ed_strong {
background-color:#ff0000;
}
#ed_em {
background-color:#ff6633;
}
#ed_link {
background-color:#ffff00;
}
#ed_block {
background-color:#CCFF66;
}
#ed_del {
background-color:#00CC00;
}
#ed_ins {
background-color:#33FF99;
}
#ed_img {
background-color:#00FFFF;
}
#ed_ul {
background-color:#0066CC;
}
#ed_ol {
background-color:#9933FF;
}
#ed_li {
background-color:#993399;
}
#ed_pre {
background-color:#CCCCCC;
}
#ed_more {
font-weight: bold;
border: dotted;
}
#ed_next {
color:#ff0000;
background-color:#000;
}