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.pngThe 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!