에어 테마

이 작업을 수행하려면 카테고리 페이지를 커스터마이징하는 구성 요소를 비활성화해야 합니다. https://discourse.jordanvidrine.com/admin/customize/themes로 이동하여 Components를 클릭한 후 Modern Category + Group Boxes를 찾아주세요. 해당 페이지에 도달하면 맨 아래로 스크롤하여 Disable을 클릭하세요.

1개의 좋아요

알겠습니다. 하지만 테마를 사용자 지정할 수 없어요 :dizzy_face:

2개의 좋아요

한 가지 더 질문이 있습니다. 토픽 목록에 조회수 표시를 해야 하는데, 어떻게 하면 되는지 알려주시면 감사하겠습니다.

1개의 좋아요

조던 씨, 답변해 주셔서 감사합니다! 정말 감사드립니다!

1개의 좋아요

안녕하세요 @jordan.vidrine, 멋진 테마를 만들어 주셔서 감사합니다! 홈페이지에 카테고리 및 최신 게시물을 표시할 수 있는 방법이 있는지 궁금합니다. 알려주시면 감사하겠습니다.

2개의 좋아요

제 테마는 discourse.fotografos.online입니다. 제 목숨 걸고 묻는데, 왜 상단이 흰색인가요? 제 헤더는 어디에 있는 거예요!?? :hot_face: 누군가 도와주세요! 방금 설치한 건데! 고체 파란색 대신 거기에 이미지를 추가하려면 어떻게 해야 하나요?

2개의 좋아요

@jordan.vidrine 뷰(Views) 열을 추가할 수 있나요? 가능하다면 이 옵션을 어디서 접근할 수 있나요? 감사합니다.

2개의 좋아요
1개의 좋아요

답변해 주시고 정보를 보내 주셔서 감사합니다. 이 내용을 테마에 어떻게 적용해야 하는지 알았으면 좋겠습니다!

1개의 좋아요
  1. admin/customize/themes로 이동하세요
  2. 구성 요소(Components)를 클릭하세요
  3. 설치(Install)를 클릭하세요
  4. 새 구성 요소 만들기(Create New)를 클릭하고 이름을 지정하세요
  5. 구성 요소 목록에서 새로 만든 구성 요소를 클릭하세요
  6. HTML/CSS 편집(Edit Html/css)을 클릭하세요
  7. 위에 링크된 코드를 공용 CSS 파일에 추가하세요.
  8. 현재 사용 중인 테마에 이 새 구성 요소를 추가하세요
2개의 좋아요

감사합니다. 정말로 당신의 도움이 큰 도움이 되었습니다.

1개의 좋아요

현재 테마와 함께 HTML/CSS가 제대로 작동하지 않고 있습니다. 하지만 새 컴포넌트를 미리 볼 때 “Views” 섹션은 확인할 수 있습니다. 테마에서도 새 컴포넌트가 추가된 것으로 표시됩니다.

짧은 영상입니다: https://share.cleanshot.com/ekutkT

시간이 나실 때 설정 과정에서 제가 잘못하고 있는 부분이 있는지 확인해 주시면 감사하겠습니다.

도와주셔서 감사합니다.

1개의 좋아요

이걸 어디에 추가해야 하나요? 이미지처럼 배경 이미지가 잘리는 문제를 해결해 주는 거죠, 맞죠?

1개의 좋아요

다음 단계를 따라가서 해당 위치에 CSS를 추가할 수 있습니다:

1개의 좋아요

주제 목록에 “조회” 열 추가하기

저는 개발자나 프로그래머가 아닙니다. Google Chrome의 “요소 검사” 기능을 사용하여 CSS 코드를 몇 시간 동안 직접 조정해 보았습니다. 이렇게 하면 조회 열이 올바르게 표시되며, 모든 열의 너비를 원하는 대로 조정할 수도 있습니다. 아래 CSS 코드에서 너비를 자유롭게 조정할 수 있습니다. 또한 각 열에 해당하는 코드를 쉽게 구분할 수 있도록 코드에 주석을 추가했습니다. 각 열에는 두 가지 영역(헤더와 행)이 있습니다. 이 두 영역의 너비가 일치해야 합니다.

모두에게 도움이 되기를 바랍니다: @daming @bksubhuti @eddy2

설명

1. 새 컴포넌트 생성

2. 이 CSS 복사

위에서 @jordan.vidrine이 제공한 코드 대신 아래 업데이트된 CSS를 사용하세요.

옵션 A) 데스크톱에만 조회 열 추가 (권장)

  • CSS 코드를 데스크톱 탭에 추가합니다.

옵션 B) 데스크톱 및 모바일 모두에 조회 열 추가

  • CSS 코드를 공용 탭에 추가합니다.

옵션 C) 모바일에만 조회 열 추가

  • CSS 코드를 모바일 탭에 추가합니다.

참고: 옵션 B 또는 C를 선택한 경우…

모바일에서는 3개의 열(답변, 조회, 활동)이 너무 많은 공간을 차지하여 조여 보입니다. 모바일에서 이 기능이 필요하시다면 3개 열 중 하나를 제거하는 것을 권장합니다. 숨기고자 하는 열의 CSS 코드 내 두 영역(헤더, 행) 모두에 Display: none을 추가하여 수행할 수 있습니다.

/* [주제] */

    /* 주제 헤더 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
        width: 66%;
    }
    
    /* 주제 행 */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.default {
        width: 66%;
    }

/* [답변] */

    /* 답변 헤더 */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
        width: 7%;
        order: 2;
    }
    
    /* 답변 행 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
        width: 7%;
        order: 2;
    }

/* [조회] */

    /* 조회 헤더 */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.views {
        display: block;
        width: 7%;
        order: 3;
    }
    
    /* 조회 행 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
        width: 7%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* [활동] */

    /* 활동 헤더 */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
        display: block;
        width: 7%;
        order: 4;
    }
    
    /* 활동 행 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
        width: 7%;
        order: 4;
    }

@jordan.vidrine 제가 작성한 CSS에 수정 사항이 있다면 알려주세요. 제가 정확히 무엇을 하고 있는지 잘 모르지만… 작동은 합니다 ㅋㅋ.

6개의 좋아요

모바일 뷰를 개선하기 위해 적용한 내 CSS 변경 사항

이 테마를 정말 좋아하지만, 몇 가지 사소한 이상한 부분들이 있어서, 제 취향에 맞게 조금 더 보기 좋게 보이도록 아래 CSS도 추가했습니다. 같은 취향을 가진 다른 분들에게도 도움이 되기를 바랍니다.

원본 (수정 전)

위 사진에서 다음 사항을 주목해 주세요:

  • 답변을 나타내는 숫자 1이 너무 왼쪽에 위치해 있습니다.
  • 토픽 버블이 파란 배경과 약간 겹쳐 있습니다.
  • 모든 콘텐츠와 파란 배경 사이에 패딩이 없습니다.
  • 파란 배경이 카테고리 페이지에서는 보기 좋지 않습니다. 하지만 홈 페이지에서는 좋아합니다.

모바일 탭에 추가한 CSS 코드입니다.

/* 카테고리, 하위 카테고리, 태그, 검색, 최신, 새 토픽, 알림 영역에 패딩 추가 */
.list-controls {
    padding: 5px;
}

/* 토픽 영역에 패딩 추가 */
div#list-area {
    padding: 6px;
}

/* 답변 수를 더 오른쪽으로 정렬 */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
    float: right;
}

업데이트된 모습 (CSS 추가 후)

여러분도 파란 배경을 제거하는 것을 선호하신다면, 카테고리 페이지에서만 제거하는 코드는 다음과 같습니다.

/* 카테고리에서만 파란 배경 제거 */
html .category .background-container {
    background: #fff;
    clip-path: none;
}

모든 변경 사항이 적용된 모습은 다음과 같습니다.

4개의 좋아요

모바일 문제 보고

모바일에서는 카테고리 드롭다운이 있습니다. 이 드롭다운을 클릭한 후 최신, 읽지 않음, 상단 중 하나를 선택하면, 다시 드롭다운에서 카테고리를 선택할 수 없습니다.

1. 이전

2. 드롭다운 메뉴를 클릭했을 때

3. 클릭한 후

4. 드롭다운 메뉴 (카테고리 누락)

이 시점에서 사용자는 드롭다운을 선택하여 다시 카테고리를 선택할 수 없습니다.

이 문제를 수정하는 방법에 대한 조언이 있을까요?

감사합니다

2개의 좋아요

@UnitedFreedom

:clap: :clap: :clap:

보기 컬럼이 표시되도록 설정하려는 사람들을 위해 유용한 지침을 올려주셔서 정말 감사합니다.

사이트 링크를 공유해 주실 수 있나요? 제 로컬 환경에서 테스트해 보고 있는데 재현이 되지 않습니다.

3개의 좋아요

완벽하게 다듬어진 이 전체 테마를 제공해 주셔서 감사합니다.

현재 추천 주제(Featured Topics) 컴포넌트가 카드가 표시되지 않는 문제를 겪고 있습니다. 또한 지정된 카테고리 내에서만 추천 주제를 표시할 수 있는 옵션도 추가되기를 바랍니다. 이론적으로는 공식 버전이나 그 변형(variants)에서도 그렇게 되어야 합니다.

아래 이미지를 참고해 주세요.

필요하다면 확인을 위해 링크를 DM으로 보내드리겠습니다. 두 개의 테스트 주제 모두 추천으로 설정된 이미지가 있으며, 커스텀 태그 pi-featured를 사용하고 있습니다. 테스트는 통과했습니다.

링크 보내 주세요. 확인해 볼게요 :+1:

2개의 좋아요