My suggestion for the Themes/Components panel (CSS inside)

Contribute UX

AI-generated summary

In a UX-focused discussion, alltiagocom criticizes the current (reverted) Themes/Components panel for being cramped, poorly labeled, and hard to navigate—especially on smaller screens—and proposes a CSS-based redesign. Their mockups show a wider layout, removed redundant elements (like duplicate Install buttons and headings), left-aligned links with more width, and visual improvements such as red-highlighted inactive components that brighten on hover. They share the full CSS code, noting it was partly generated with ChatGPT, and invite feedback for optimization. awesomerobot clarifies that the current “messy” layout is actually the old one, temporarily reverted while the newer grid-based design (which alltiagocom originally disliked) is being improved. alltiagocom explains their “old/new” terminology was timeline-based for clarity, not technical accuracy.

1

I wasn’t a big fan of the old Themes/Components panel (https://forum.alltiago.com/admin/customize/components), but it was good enough in terms of space and how it was organized (kinda). But the new one is really a mess, imho.

Here’s my alternative to go from this:

SCR-20250324-ihkz
SCR-20250324-ihkz979×712 60.5 KB

… not a fan of the tiny and cramped box on the left, and hiding the word Components (maybe this is just an issue with my 13" screen, but maybe others have the same issue?), and the scrolling behavior…

… to this:

SCR-20250324-igwu
SCR-20250324-igwu969×1427 72.6 KB

image
image977×513 29.7 KB

More space, no scroll bars, disabled components are easier to see with the red-ish background. When you hover over them, it gets a bit brighter:

SCR-20250324-ihsg
SCR-20250324-ihsg965×150 6.92 KB

I also removed that extra heading, the image, and the redundant Install button (now there’s only 1 instead of 2), and aligned the links to the left and gave them extra width to avoid wrapping.

image
image558×211 11.8 KB

Here’s the CSS:

/* Admin - wider theme/component panel */
.desktop-view .admin-customize .themes-list,
.desktop-view .admin-customize .show-current-style{
    width: 98%;
}

/* Admin - margin top component's content */
.desktop-view .admin-customize .show-current-style {
    margin-top: 3rem;
}

/*Admin - remove scroll on components' container */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

/* Admin - hide H1, Install button, image */
.admin-contents.admin-customize.admin-customize-themes .content-wrapper h1,
.admin-contents.admin-customize.admin-customize-themes .content-wrapper div.create-actions,
.admin-contents.admin-customize.admin-customize-themes img {
    display: none;
}

/* Admin - adjust bottom links */
.admin-contents.admin-customize.admin-customize-themes .admin-intro {
    margin: 2rem 0 0;
}

.admin-contents.admin-customize.admin-customize-themes .admin-intro .content-wrapper {
    width: 100%;
}

/* Admin - unused components' background (red) */
.admin-customize .themes-list-container__item.inactive-theme {
    background-color: #3f2525;
}

.admin-customize .themes-list-container__item.inactive-theme:hover {
    background-color: #573535;
}

I’m not super into CSS, so I don’t know if this is good or not, but it works. I asked ChatGPT for this one:

/*Admin - remove scroll on components' container */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

If there’s anything redundant or stuff like that, feel free to share it so I can update the code.

2 Likes
2

This is actually the reverse,

The old layout (the grid of rectangles) you’re referring to is actually what will be the new one, but the feedback was that it wasn’t quite ready yet — so we rolled back to the old one. The version you currently see will be replaced once we get a few missing features added to the new one. Understandably a bit confusing.

2 Likes
3

My “old” and “new” definitions was more related to a timeline. “New” as in “what’s visible now”, even though I was aware that it’s the old version. I just didn’t want to make it more confusing to someone who didn’t know about this.

2 Likes