XF 2.3 How to move the toolbar to the bottom of the editor,

Abraham54

Well-known member
Licensed customer

Is it possible to move the toolbar to the bottom of the editor.​


In my phpBB forum I could do that and it improves working with it, because when writing a big message makes you not scrolling up, to ad a picture or something else!
Also smartphone user will like it!
 
Add the following code to the extra.less

Less:
/* Move XenForo Editor Toolbar to the Bottom */
.fr-box.fr-basic {
    display: flex !important;
    flex-direction: column !important;
}

.fr-toolbar.fr-top {
    order: 2 !important;
    border-top: 1px solid @xf-borderColor !important;
    border-bottom: none !important;
    border-radius: 0 0 @xf-borderRadiusMD @xf-borderRadiusMD !important;
}

.fr-wrapper {
    order: 1 !important;
    border-bottom: none !important;
    border-radius: @xf-borderRadiusMD @xf-borderRadiusMD 0 0 !important;
}

/* Position Editor Dropdown Menus Upwards (Dropup Effect) */
.fr-dropdown-menu {
    top: auto !important;
    bottom: 100% !important;
    margin-bottom: 5px !important;
    margin-top: 0 !important;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.15) !important; /* Adjusted box-shadow to cast upwards */
}

/* Hide the Dropdown Arrow to Prevent Visual Glitches */
.fr-dropdown-menu::after {
    display: none !important; /* Hiding the arrow is the cleanest solution for the dropup layout */
}
 
Back
Top Bottom