Custom Toolbar Separators

By WeregooseWeregoose

Description

This simple CSS code will allow site authors to modify the vertical separators inside editor toolbars.

Code

Go to your site manager and publish the following CSS code in a custom theme:

.wd-editor-toolbar-panel li.hseparator {
    width: 22px;
    height: 22px;
    margin: 1px;
}

Here, you may change the background properties, add a border, and so on. If you choose to modify the dimensions already listed, you'll be opting out of having a refreshing grid-like pattern within the toolbar!

In action

dot-in-action.png

The above customized toolbar results from this CSS code:

.wd-editor-toolbar-panel li.hseparator {
    background: #f00 url('http://snippets.wikidot.com/local--files/code:custom-toolbar-separators/dot.png');
    width: 22px;
    height: 22px;
    margin: 1px;
}

Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by Weregoose


Rate this solution

If you think this solution is useful — rate it up!

rating: +6+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License