Freebie - New wikidot editor buttons

A brand new set of wikidot editor buttons just for you (oh, and everyone else with a wikidot site).

If you’re a wikidot guru, chances are you hardly ever look at the buttons above the editor, let alone use them. But for someone learning the wikidot syntax, they can be a great help in what can be a steep learning curve. So I decided I’d undertake the task of redesigning the buttons to give them a simpler appearance, and hopefully make them easier to understand.

The buttons include three states: normal, hover and active (when you click the button). To add them to your site, all you have to do is add the following code to your site’s CSS.

.wd-editor-toolbar-panel a {
    background-image: url(http://css3.wdfiles.com/local--files/files/wikidot-editor-buttons.png);
}
.wd-editor-toolbar-panel a:hover {
    background-image: url(http://css3.wdfiles.com/local--files/files/wikidot-editor-buttons-hover.png);
}
.wd-editor-toolbar-panel a:active {
    background-image: url(http://css3.wdfiles.com/local--files/files/wikidot-editor-buttons-active.png);
}

Or, if you’d prefer to host the images on your own site, you can download the file below, which has the three image files and the CSS.

If you'd like to see the buttons in action before committing to adding them to your site, you can head over to the sandbox, where you can edit the page and see them for yourself.

If you have any suggestions for the buttons, I'd love to hear them. And I hope you enjoy the new addition to your site!

Edit - License Info: The buttons are covered by a Creative Commons Attribution-ShareAlike 3.0 license.