Custom Toolbar Separators

By Weregoose

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

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!