# 테마/컴포넌트 패널(CSS 내부)에 대한 제 제안

**URL:** <https://meta.discourse.org/t/my-suggestion-for-the-themes-components-panel-css-inside/358553>\
**Category:** UX\
**Created:** [3월 24, 2025, 9:15오전 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:** 1\
**Showing post:** 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:** [3월 24, 2025, 9:15오전 UTC](https://meta.discourse.org/t/my-suggestion-for-the-themes-components-panel-css-inside/358553/1 "2025-03-24T09:15:24Z")

</div>

이전 테마/컴포넌트 패널([https://forum.alltiago.com/admin/customize/components](https://forum.alltiago.com/admin/customize/components))은 크게 좋아하지 않았지만, 공간 활용이나 구성 방식(그럭저럭)은 괜찮았어요. 하지만 새 패널은 제 생각엔 정말 엉망이에요.

다음과 같이 변경하는 제 대안을 공유합니다:

 ![SCR-20250324-ihkz](https://global.discourse-cdn.com/meta/original/4X/2/a/0/2a0625d04d6fb0bca544888b18b00c0e5115f0b2.png)

… 왼쪽의 작고 좁은 박스, 'Components’라는 단어의 숨김 처리(이건 제 13인치 화면만의 문제일 수도 있지만, 다른 분들도 같은 문제를 겪고 있을까요?), 그리고 스크롤 동작이 마음에 들지 않아요.

… 다음과 같이 변경합니다:

 ![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)

더 넓은 공간, 스크롤바 제거, 그리고 빨간색 계열의 배경으로 비활성화된 컴포넌트를 더 쉽게 구별할 수 있습니다. 마우스를 올리면 배경이 조금 더 밝아져요:

 ![SCR-20250324-ihsg](https://global.discourse-cdn.com/meta/original/4X/0/b/6/0b671dad62c82f5fcda8f2354a0801ff9d432253.png)

또한 불필요한 헤딩, 이미지, 그리고 중복된 설치 버튼(이제 2개 대신 1개만 있음)을 제거하고, 링크를 왼쪽으로 정렬했으며 줄바꿈을 방지하기 위해 폭을 넓혔습니다.

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

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;
}

```

저는 CSS에 아주 정통하지는 않아서 이것이 좋은 코드인지 아닌지는 모르겠지만, 동작은 합니다. 이 부분은 ChatGPT에게 요청해서 만들었습니다:

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

```

중복되거나 개선할 부분이 있다면 자유롭게 공유해 주세요. 그러면 코드를 업데이트하겠습니다.

---

_[View the full topic](https://meta.discourse.org/t/my-suggestion-for-the-themes-components-panel-css-inside/358553)._