사용자 지정 CSS/HTML 활성화

제품 지원
1

커스텀 CSS와 HTML을 추가했습니다. 미리보기를 확인해 보니 모든 것이 완벽해 보입니다.

이제 이 변경 사항을 커밋하고 싶은데, 어떻게 해야 할까요? 관련 명령어를 찾을 수 없고, discourse 앱을 다시 빌드해 보았지만 아무런 변화가 없습니다.

검색해도 결과가 없습니다. 아마도 너무 쉬운 일이라 아무도 질문을 하지 않았겠지만, 이 초보자에게 힌트를 주실 수 있을까요…

2

무관해 보이지만, 솔직히 잘 모르겠어요.

3

어디에 추가하셨나요? 커스텀 테마인가요, 기본 테마인가요?
공통 CSS / 데스크톱 CSS / 모바일 CSS 중 어디인가요?
무엇을 하셨는지 더 자세한 정보가 도움이 될 것입니다.

보통은 테마를 선택한 후(/admin/customize/themes) 이렇게 하시면 됩니다:

Theme Css
Theme Css640×292 1010 KB

저장 버튼을 누르면, 편집한 테마가 활성화된 상태라면 변경 사항이 거의 즉시 반영됩니다.

4

비디오에서 보여준 내용을 그대로 하였습니다. 다만, 미리보기 버튼을 눌러야만 변경 사항이 보입니다.

5

테마를 활성 기본 테마로 선택했나요? 초록색 체크 표시를 확인해 보세요?

screenshot-vapingcommunity.co.uk-2020.09.08-15_44_09
screenshot-vapingcommunity.co.uk-2020.09.08-15_44_091065×358 21.5 KB

screenshot-vapingcommunity.co.uk-2020.09.08-15_45_16
screenshot-vapingcommunity.co.uk-2020.09.08-15_45_16706×171 7.68 KB

6

네. 표준 라이트 테마를 수정했으며, 현재 활성화되어 기본 테마로 설정되어 있습니다.

7

네, 적용한 변경 사항들을 나열해 주시겠어요?

웹사이트 링크도 있으면 도움이 될 것 같습니다.

8

CSS:

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400, 400i, 700");
    .docked #main-outlet {
    margin-top: 0;
}
.docked nav#bar {
    display: none;
}
nav#bar {
    font-family: 'Open Sans',  sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
nav#bar ul {
    display: inline-flex;
    list-style-type: none;
    margin: 0 0 0 25px;
    align-items: center;
}
nav#bar ul li {
    margin-left: 20px;
}
@media (max-width: 650px) {
    nav#bar {
    flex-wrap: wrap;
    justify-content: center;
}
nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%}
nav#bar #logo img {
    width: 120px;
}
nav#bar ul li {
    margin-left: 8px;
}
nav#bar ul li a {
    font-size: 14px;
}
nav#bar ul li a.www-btn {
    padding: 3px 8px 5px;
}
}
nav#bar li a {
    text-decoration: none;
    color: #333;
}
nav#bar li a:hover {
    border-bottom: 5px solid;
}
nav#bar li:nth-of-type(1) a:hover {
    border-color: #D13239;
}
nav#bar li:nth-of-type(2) a:hover {
    border-color: #f15c22;
}
nav#bar li:nth-of-type(3) a:hover {
    border-color: #F2E88F;
}
nav#bar li:nth-of-type(4) a:hover {
    border-color: #00953A;
}
nav#bar li:nth-of-type(5) a {
    font-weight: bold;
}
nav#bar li:nth-of-type(5) a:hover {
    border-color: #14A0F4;
}
nav#bar img {
    width: 150px;
    height: auto;
    max-height: 40px;
}
nav#bar .www-btn {
    border: none;
    border-radius: 100px;
    background: #13a0f5;
    color: #fff;
    padding: 5px 20px 7px;
}
nav#bar .www-btn.big {
    font-size: 1.5rem;
    padding: 7px 30px 10px 30px;
}
nav#bar .www-btn:hover {
    background: #0a5783;
}
nav#bar .www-btn:active {
    background: #08476b;
    box-shadow: none;
}
nav#bar a.www-btn {
    text-decoration: none;
    color: #fff !important;
}
.d-header {
    background: linear-gradient(-90deg,  #F2E88F,  #a3e6ff);
    background-size: 100% 100%;
    background-repeat: repeat-x;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.15);
}
.d-header .icons .icon {
    color: #555;
}

잠시 후 헤더의 내용을 게시할게요. 붙여넣기하면 포럼에서 html이 계속 렌더링되거든요…

9

이것은 잘못되었습니다. 다음과 같이 수정해야 합니다.

nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%;
}
10

맞아요! 눈이 정말 밝으시네요!

그런데 미리보기에서는 그 구문 오류를 문제 삼지 않던 게 좀 웃기네요.

11

동작하게 되어 기뻐요 :smile:

  • CSS에 오류가 있으면 해당 CSS가 무효화됩니다.
  • 저는 미리보기 기능을 사용해 본 적이 없어서 이에 대해 언급할 수 없어요.
  • 예전에는 페이지에 오류 알림이 있었을 것 같아요 :thinking:

아, 그리고 생일 축하해요 @tshenry :tada: 좋은 하루 보내세요