2010-11-10 18 views

Antwort

3

Es gibt eine neuere Version des Repositorys namens wmd-new. Wie im StackOverflow-Blog beschrieben, ist diese Version uses CSS sprites für bessere Leistung. So ist die Symbolleiste eine einzige Grafik:

enter image description here

Es gibt eine PSD (Photoshop-Datei) für die Symbolleiste im Repository, die Sie bearbeiten können. Im Grunde müssen Sie den Dateien wmd.css und wmd.js eine neue Schaltfläche hinzufügen. Schauen Sie sich um Linie 93 in der CSS und Sie werden sehen:

/* sprite button slicing style information */ 
#wmd-button-bar #wmd-bold-button {left: 0px; background-position: 0px 0;} 
#wmd-button-bar #wmd-italic-button {left: 25px; background-position: -20px 0;} 
#wmd-button-bar #wmd-spacer1  {left: 50px;} 
#wmd-button-bar #wmd-link-button {left: 75px; background-position: -40px 0;} 
#wmd-button-bar #wmd-quote-button {left: 100px; background-position: -60px 0;} 
#wmd-button-bar #wmd-code-button {left: 125px; background-position: -80px 0;} 
#wmd-button-bar #wmd-image-button {left: 150px; background-position: -100px 0;} 
#wmd-button-bar #wmd-spacer2  {left: 175px;} 
#wmd-button-bar #wmd-olist-button {left: 200px; background-position: -120px 0;} 
#wmd-button-bar #wmd-ulist-button {left: 225px; background-position: -140px 0;} 
#wmd-button-bar #wmd-heading-button {left: 250px; background-position: -160px 0;} 
#wmd-button-bar #wmd-hr-button  {left: 275px; background-position: -180px 0;} 
#wmd-button-bar #wmd-spacer3  {left: 300px;} 
#wmd-button-bar #wmd-undo-button {left: 325px; background-position: -200px 0;} 
#wmd-button-bar #wmd-redo-button {left: 350px; background-position: -220px 0;} 
#wmd-button-bar #wmd-help-button {right: 0px; background-position: -240px 0;} 

Hinweis, wie die ursprüngliche Styling von wmd-button-bar und wie left wird oben verwendet wird.

Verwandte Themen