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

**URL:** https://meta.discourse.org/t/my-suggestion-for-the-themes-components-panel-css-inside/358553
**Category:** UX
**Created:** [March 24, 2025, 9:15am UTC](https://meta.discourse.org/t/my-suggestion-for-the-themes-components-panel-css-inside/358553 "2025-03-24T09:15:24Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [March 24, 2025, 9:15am UTC](https://meta.discourse.org/t/my-suggestion-for-the-themes-components-panel-css-inside/358553/1 "2025-03-24T09:15:24Z")

</div>

I wasn’t a big fan of the old Themes/Components panel ([https://forum.alltiago.com/admin/customize/components](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](https://global.discourse-cdn.com/meta/original/4X/2/a/0/2a0625d04d6fb0bca544888b18b00c0e5115f0b2.png)

… 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](https://global.discourse-cdn.com/meta/original/4X/0/f/7/0f7496c486ff5e3fce5f29ce752b93263022ee8e.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/4/6/c4694e486381d838c449d0d5841bf36b2fcb78f4.png)

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](https://global.discourse-cdn.com/meta/original/4X/0/b/6/0b671dad62c82f5fcda8f2354a0801ff9d432253.png)

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](https://global.discourse-cdn.com/meta/original/4X/6/f/5/6f5e54a3a2166f8209c35a61f24a7285ae3d4fa0.png)

Here’s the CSS:

```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:

```css
/*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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 24, 2025, 1:19pm UTC](https://meta.discourse.org/t/my-suggestion-for-the-themes-components-panel-css-inside/358553/2 "2025-03-24T13:19:19Z")

</div>

> [@alltiagocom](#):
>
> I wasn’t a big fan of the old Themes/Components panel ([https://forum.alltiago.com/admin/customize/components](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.

This is actually the reverse,

> [@New themes & components layout](https://meta.discourse.org/t/new-themes-components-layout/357320/23):
>
> Thanks for the feedback here everyone! We’re actively working on improving the theme and component selection pages, and your feedback here is very helpful. For the time being, we’re rolling back these changes while we continue to work on the new interfaces. We’re confident that when we’re finished with these, the new pages will be much more user-friendly and attractive than the current interface. For those interested, here’s the PR for the rollback of the new UI, while we continue to work on i…

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.

---

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [March 24, 2025, 3:08pm UTC](https://meta.discourse.org/t/my-suggestion-for-the-themes-components-panel-css-inside/358553/3 "2025-03-24T15:08:05Z")

</div>

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.
