Not planned Please add a bottom border to the editor toolbar

[AndyB]

The current editor toolbar looks incomplete because it lacks a bottom border. The user is not sure where the toolbar stops and where to click to begin typing.

Current design


Example from Froala which has a bottom border

 

[AndyB]

In order to improve the look of the quick editor, I suggest adding the following code to your extra.less template:

// quick editor

.fr-box.fr-basic {
    border: 1px solid @xf-borderColorLight;
}

.fr-box.fr-basic .fr-toolbar.fr-top {
	border-bottom: 1px solid @xf-borderColorLight;
}

.fr-toolbar .fr-btn-grp.rte-tab--inactive {
    border-bottom-width: 0px;
	border-left: 1px solid @xf-borderColorLight;
}

 

[AndyB]

With the above code added your quick editor will look like this:

 

[djbaxter]

Works perfectly, @AndyB! Thank you!

 

[DigNap15]

That looks much better.
Maybe you could sell that as an Add-on to the XF team

 

[Kier]

Feel free to add the CSS for a bottom border to the editor toolbar to your own extra.css, we just put out templates and styles as we want to see them, if you feel differently, we also provide the tools to make XF look however you want.

 

[Ozzy47]

That looks much better.
Maybe you could sell that as an Add-on to the XF team

Sell 10 lines of CSS?