Wikidot Editor Buttons

Wikidot Editor Buttons

Wikidot Editor Buttons
rating: +14+x

These are the newest set of Wikidot Editor Buttons. Everything was carefully hand crafted pixel by pixel. I included a CSS stylesheet for the coding of the "sprite" images, all you need to do is just upload the sprite images to your site and place the CSS at the bottom of your Stylesheet. I also included a fully layered well organized PSD file for everyone so you can customize these buttons how ever you'd like.

I will also be using these buttons in the new Wikidot CSS theme I am creating. Please refer to the Wikidot Community for more detailed info about this new theme and the release date. So for now, please enjoy these buttons as a preview of the new theme.

The CSS:

/*** ------------------------------------------------------------
-----------------------------------------------------------------
 
Start New Wikidot Editor + Site Editor Buttons
 
The Design was created by Matt Gentile - CEO of Icondeposit.com
 
Re-sale and or Re-distribution is strictly prohibited.
 
If used elsewhere, remember to link back to Icondeposit.com
 
- Enjoy
 
-----------------------------------------------------------------
----------------------------------------------------------- ***/
 
.wd-editor-toolbar-panel a{
    margin: 0;
    /*padding: 0.1em 0.2em;*/
    border: none;
    /*float: left;*/
    background-color: transparent !important;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        box-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -webkit-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -moz-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -o-shadow: 0px 1px 3px rgba(0,0,0,0.18);
}
.wd-editor-toolbar-panel a:hover{
    /*background-color: transparent;*/
    border: none;
}
.wd-editor-toolbar-panel a:active {
        box-shadow: none;
        -webkit-shadow: none;
        -moz-shadow: none;
        -o-shadow: none;
}
 
.wd-editor-toolbar-panel a {
    background-image: url(http://www.icondeposit.com/local--files/design:4/wdb.png);
}
.wd-editor-toolbar-panel a:hover {
    background-image: url(http://www.icondeposit.com/local--files/design:4/wdbhover.png);
}
.wd-editor-toolbar-panel a:active {
    background-image: url(http://www.icondeposit.com/local--files/design:4/wdbactive.png);
}
 
a.weditor-bold{
    background-position: -132px 0;
}
a.weditor-italic{
    background-position: -154px 0;
}
a.weditor-underline{
    background-position: -176px 0;
}
a.weditor-strikethrough{
    background-position: -198px 0;
}
a.weditor-teletype{
    background-position: -220px 0;
}    
a.weditor-quote{
    background-position: -242px 0;
}    
a.weditor-superscript{
    background-position: -264px 0;
}
a.weditor-subscript{
    background-position: -286px 0;
}    
a.weditor-raw{
    background-position: -308px 0;
}
a.weditor-hr{
    background-position: -330px 0;
}
a.weditor-div{
    background-position: -352px 0;
}
a.weditor-clearfloat{
    background-position: -374px 0;
}
a.weditor-clearfloatleft{
    background-position: -396px 0;
}
a.weditor-clearfloatright{
    background-position: -418px 0;
}
a.weditor-divwiz{
    background-position: -440px 0;
}
a.weditor-table{
    background-position: -440px 0;
}
a.weditor-toc{
    background-position: -462px 0;
}
a.weditor-uri{
    background-position: -484px 0;
}
a.weditor-uriwiz{
    background-position: -506px 0;
}
a.weditor-pagelink{
    background-position: -528px 0;
}
a.weditor-pagelinkwiz{
    background-position: -550px 0;
}
a.weditor-image{
    background-position: -572px 0;
}
a.weditor-imagewiz{
    background-position: -594px 0;
}
a.weditor-video{
    background-position: -616px 0;
}
a.weditor-audio{
    background-position: -638px 0;
}
a.weditor-code{
    background-position: -660px 0;
}
a.weditor-codewiz{
    background-position: -682px 0;
}
a.weditor-numlist{
    background-position: -704px 0;
}
a.weditor-bullist{
    background-position: -726px 0;
}
a.weditor-incindent{
    background-position: -748px 0;
}
a.weditor-decindent{
    background-position: -770px 0;
}
a.weditor-deflist{
    background-position: -792px 0;
}
a.weditor-footnote{
    background-position: -814px 0;
}
a.weditor-math{
    background-position: -836px 0;
}
a.weditor-mathinline{
    background-position: -858px 0;
}
a.weditor-eqref{
    background-position: -880px 0;
}
a.weditor-bib{
    background-position: -902px 0;
}
a.weditor-bibcite{
    background-position: -924px 0;
}
a.weditor-h1{
    background-position: 0px 0;
}
a.weditor-h2{
    background-position: -22px 0;
}
a.weditor-h3{
    background-position: -44px 0;
}
a.weditor-h4{
    background-position: -66px 0;
}
a.weditor-h5{
    background-position: -88px 0;
}
a.weditor-h6{
    background-position: -110px 0;
}
 
a.weditor-html{
  background-position: -946px 0;
}
 
/*** ------------------------------------------------------------
-----------------------------------------------------------------
 
End New Wikidot Editor + Site Editor Buttons
 
-----------------------------------------------------------------
----------------------------------------------------------- ***/

The Stylesheet attatched is for Wikidot stylesheets only. If you would like to upload these buttons and use them elsewhere such as on Wordpress and on any other content management systems, you will have to customize the CSS yourself to fit the CMS you are using.

Re-sale and or redistribution is forbidden.

If used elsewhere, remember to always link back to Icondeposit.com or this post.

- Enjoy :)

File Information

License: Creative Commons Attribution-ShareAlike 3.0
Type of Design: Web Element
Layerd?: Yes
Minimum Adobe CS Version: CS5
Dimensions in Pixels: 22x22

Color Palette

Comments

Add a New Comment
developer-icon-set.png

More by This Author

Search UI
Twitter Follow UI
8 Subtle Photoshop Patterns (.PAT)
Equalizer UI
Copyright © 2011-2019 Icon Deposit - All rights Reserved