Freebie - New wikidot editor buttons

Freebie - New wikidot editor buttons

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

new wikidot editor buttons

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.

Enjoy the article? Tweet it!

Discussion - No comments yet…6 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.