Default Theme more compact

[suki]

Hello,

Congratulations on the new “Default Dark Theme,” but I would like to ask if it would be possible to focus on a new more compact version…

Let me explain:

I have used several WordPress managers, and MainWP is one of the most complete in terms of functionality, but there is one area where it falls short: the UI and UX (in my humble opinion)

In this regard, one of the things that struck me the most is the use of “white space” in the default theme, which means that even with just a few websites connected, you have to scroll all the time to view all the websites…

For example, while MainWP can barely fit 8 or 9 websites on the screen:

in other systems, you can view more than 20 sites on the screen without scroolling

And I’m not just referring to the main page, but also in general to almost all list views (of plugins, themes, updates, etc.).

Sometimes you even have to scroll horizontally!!!

I’ve been working on a more compact version that makes better use of space, and the difference is big:

before:

after:

before:

after:

Do you agree that the default view should be a little more compact? Or am I exaggerating?

As you can see, I’ve already solved this for my own personal use, but I think MainWP would greatly improve its functionality if this improvement were implemented in the default theme.

Do you think it would be possible to propose or study the feasibility of modifying the default theme to make it a little more compact?

PS: Of course, you can count on me for development if necessary (although it’s just a little CSS adjusting “paddings and margins” here and there).

[bojan (Bojan Katusic)]

Hey @suki

Glad you’re enjoying the new Dark theme.

Thanks for the detailed feedback and screenshots regarding information density.

The best place to suggest this is our feedback site: https://voice.mainwp.com, where others can upvote and help us gauge demand.

If you’d like, you can also share your tweaks here so others can try them out too.

[suki]

Some custom CSS for more compact theme:

:root {
–mainwp-area-padding: 0.2rem !important;
–mainwp-bg-base: #f0f0f1 !important;
–mainwp-dark: #1d2327 !important;
–mainwp-dark-alt: #2c3338 !important;
–mainwp-blue: #2271b1 !important;
–area-radius: 0.2rem !important;
}

body {
background: #f0f0f1 !important;
}

element.style {
padding: 10px !important;
}

.gs-id-0 > .grid-stack-item > .grid-stack-item-content {
top: 0rem !important;
right: 0rem !important;
bottom: 1rem !important;
left: 1rem !important;
}

i.big.big.big.icon, i.big.big.big.icons {
font-size: 16px !important;
}

i.icon {
margin: 0 0 0 0 !important;
font-size: 13px !important;
}

.mainwp-content-wrap {
margin-bottom: 0px !important;
margin-top: 44px !important;
}

#mainwp-main-navigation-container {
top: 44px;
}

.mainwp-manage-plugin-item .content, .mainwp-manage-theme-item .content {
padding: 0rem !important;
}

.mainwp-manage-plugin-item-website, .mainwp-manage-theme-item-website {
padding: 0em !important;
}

#mainwp-manage-sites-content.segment {
padding: 0.5rem !important;
}

#mainwp-navigation-icon {
width: 34px;
margin-left: 0px !important;
margin-top: 4px !important;
}

#mainwp-select-sites-body {
height: auto !important;
max-height: 500px !important;
}

#mainwp-top-header {
height: 44px !important;
padding: 0px !important;
}

.mainwp-ui.mainwp-custom-theme #mainwp-first-level-navigation {
padding-top: 0 !important;
}

.mainwp-ui.mainwp-custom-theme #mainwp-first-level-navigation .ui.vertical.inverted.menu .item .text {
font-size: 10px !important;
font-weight: 300 !important;
}

.mainwp-ui.mainwp-custom-theme #mainwp-second-level-navigation .ui.inverted.menu .item {
padding: 0.5rem !important;
}

.mainwp-ui.mainwp-custom-theme .mainwp-side-content {
padding: 0.5rem !important;
}

.mainwp-ui.mainwp-custom-theme #mainwp-top-header .ui.icon.button:not(.red):not(.green):hover {
background: var(–mainwp-link-color) !important;
}

.mainwp-ui.mainwp-custom-theme .ui.modal .ui.list .item {
padding: 0.5rem 0;
}
.mainwp-ui.mainwp-custom-theme .ui.dropdown.selection {
background: white !important;
}

.mainwp-ui.mainwp-custom-theme .ui.form input[type=“text”], .mainwp-ui.mainwp-custom-theme .ui.form input[type=“search”], .mainwp-ui.mainwp-custom-theme .ui.form input[type=“file”], .mainwp-ui.mainwp-custom-theme .ui.search .prompt, .mainwp-ui.mainwp-custom-theme .ui.form input[type=“password”], .mainwp-ui.mainwp-custom-theme .ui.input input[type=“search”] {
background-color: white !important;
}

.mainwp-ui.mainwp-custom-theme .ui.modal i.icon.close {
top: 0.5rem;
right: 1.5rem;
}

.mainwp-ui.mainwp-custom-theme .ui.modal > .header {
padding: 0.5em;
}

.mainwp-ui.mainwp-custom-theme .ui.green.message:before {
top: 4px !important;
}

.mainwp-ui.mainwp-custom-theme .ui.info.message, .mainwp-ui.mainwp-custom-theme .ui.blue.message {
border-left: 16px solid var(–mainwp-blue);
}

.mainwp-ui.mainwp-custom-theme .ui.info.message:before, .mainwp-ui.mainwp-custom-theme .ui.blue.message:before {
left: -10px !important;
top: 4px !important;
}

.mainwp-ui.mainwp-custom-theme .ui.yellow.message:before {
top: 5px;
}

.mainwp-ui.toplevel_page_mainwp_tab.mainwp-ui-leftmenu .mainwp-content-wrap {
margin-left: 72px !important;
padding-right: 1rem;
background: #f0f0f1;
}

.ui.accordion:not(.styled) .title ~ .content, .ui.accordion:not(.styled) .accordion .title ~ .content {
margin: 0px; !important;
padding: 0.5rem 0rem !important;
}

.ui.accordion.mainwp-manage-plugin-item, .ui.accordion.mainwp-manage-theme-item {
padding: 0rem !important;
}

.ui.accordion > .title, .ui.accordion .accordion > .title {
padding: 0rem !important;
}

.ui.button {
padding: 0.5rem 0.5rem !important;
}

.ui.button:hover {
background-color: #000000 !important;
}

.ui.circular.image {
border-radius: 0rem;
width: 18px !important;
height: 18px !important;
}

.ui.divider {
margin: 0.25rem 0;
}

.ui.dropdown.selection {
background: white !important;
}

.ui.grid {
margin: 0rem 0rem !important;
}

.ui.grid > .column:not(.row) {
padding-top: 0.3rem !important;
padding-bottom: 0.3rem !important;
}

.ui.grid > .column:not(.row), .ui.grid > .row > .column {
padding-left: 0.2rem !important;
padding-right: 0.2rem !important;
}

.ui.grid > .row {
padding: 0;
}

.ui.grid > .row > .column {
padding: 0rem 0.25rem !important;
}

.ui.header {
margin: 1rem 0rem 0rem 0rem;
}

.ui.label {
padding: 0.2rem 0.2rem !important;
}

.ui.labeled.icon.menu > .item > i.icon:not(.dropdown) {
font-size: 1rem !important;
}

.ui.menu {
font-size: 0.8rem;
}

.ui.message {
margin: 0.5rem 0.5rem !important;
padding: 0.3rem 0.3rem !important;
font-size: 12px !important;
color: var(–mainwp-dark) !important;
}

.ui.message > .close.icon {
position: absolute;
top: auto;
right: 0.5em;
background-color: #2185d0;
color: white;
border-radius: 3px;
}

.ui.message p {
margin: 0.2rem 0 !important;
}

.ui.mini.images .image, .ui.mini.images img, .ui.mini.images svg, .ui.mini.image {
width: 25px !important;
}

.ui.modal > .scrolling.content {
max-height: calc(90vh - 1rem);
}

.ui.segment {
margin: 0 0 !important;
padding: 0.2rem !important;
}

.ui.segments {
margin: 0.2rem 0 !important;
}

.ui.segments .segment, .ui.segment {
font-size: 0.9rem;
}

.ui.selection.dropdown > .dropdown.icon {
top: 8px !important;
right: 1em !important;
margin: 0 !important;
padding: 0 !important;
}

.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
padding-bottom: 0.3rem;
}

.wp-die-message, p {
font-size: 12px !important;
line-height: 1.5 !important;
margin: 1em 0 !important;
color: var(–mainwp-dark) !important;
}

[Benjamin-Scott]

I totally see your point. Making the default theme more compact would really improve usability, especially for managing multiple sites. Your before-and-after examples make the benefits clear. Hope the team considers this improvement!