ManageWiki/Sidebar

ManageWiki with the top tabs at the side

The following is a custom CSS which allows you to move the tabs on ManageWiki from the top to the left. To load this script, add it as a subpage of your username titled either common.css (to apply it to all skins) or [skinname].css (to apply it to only one skin, for example, if named the subpage is named Vector.css, the change will only apply to the Vector skin). For example, if my username is Example, then I would add this CSS to User:Example/common.css or User:Example/Vector.css (replace Vector for your skin name). Credit to Joritochip for sharing this on Discord.

CSS code

.mw-special-ManageWiki #mw-content-text .oo-ui-menuLayout {
    display: flex;
}
.mw-special-ManageWiki #mw-content-text .oo-ui-indexLayout-tabPanel,
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget {
    box-sizing: border-box;
    height: 100%;
}
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget {
    display: flex;
    flex-direction: column;
    padding-bottom: 0.5em;
    width: 160px
}
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget .oo-ui-optionWidget {
    background: none;
    border: none;
    border-left: 4px solid transparent;
}
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget .oo-ui-optionWidget .oo-ui-labelElement-label {
    border: none;
}
.mw-special-ManageWiki #mw-content-text .oo-ui-tabSelectWidget .oo-ui-optionWidget-selected {
    background: rgba(51, 102, 204, .35);
    border-left: 4px solid #36c;
    border-radius: 2px 0 0 2px;
}