헤더의 CSS 충돌

개발
1

Chocoboe Studios

// custom search banner customizations
.custom-search-banner-wrap {
  margin: 0 auto !important;
  max-width: unset;
  color: #f9f9f9;
  -webkit-text-fill-color: transparent;
  background: -webkit-gradient(linear,right top, left bottom,from(#eaf0ff),to(#0932a5),to(#060064));
  -webkit-background-clip: text;
  h1 {
    font-size: 4em;
  }

하지만 이로 인해 검색창 텍스트가 배경색으로 사라지는 문제가 발생합니다.

<div id="ember16" class="ember-view"><!----><div class="search-widget"><div class="search-menu" data-mouse-down-outside="true"><button class="widget-button btn search-icon no-text btn-icon"><svg class="fa d-icon d-icon-search svg-icon svg-node" aria-hidden="true"><use xlink:href="#search"></use></svg></button><div class="search-input"><input id="search-term" type="text" value="" autocomplete="off" placeholder="Search" aria-label="Search"><div class="searching"><a class="widget-link show-advanced-search" href="/search?expanded=true" title="Open advanced search"><svg class="fa d-icon d-icon-sliders-h svg-icon svg-node" aria-hidden="true"><use xlink:href="#sliders-h"></use></svg></a></div></div></div></div></div>

2

사실 우회 방법을 찾았지만 소스 파일을 찾는 데 도움이 필요합니다.

아래와 같이 콘솔을 사용해 헤더 클래스를 강제 적용하면:

<h1 class="main-title-text">Welcome to our community</h1>

그리고 관련 CSS를 생성하면:

.main-title-text {
    background: -webkit-gradient(linear, left center, right bottom, from(#484848), to(#0097ff), to(#ffffff));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

모든 것이 정상적으로 작동합니다. 이제 우회 방법을 파악했으니, “Welcome to the community” 텍스트가 렌더링되는 “ember14” div 아래에서 수정해야 할 파일을 어떻게 찾으면 될까요?

index.js와 같은 특정 파일이 있나요?

(Flarum에서 이 플랫폼으로 이전하고 있으며, 이 플랫폼에 처음입니다)
감사합니다

3

안녕하세요,

정확히 이해하지 못하신 것 같은데, 커스텀 검색에서 h1과 p를 타겟팅하면 입력 필드에 영향을 주지 않습니다.

특정 소스 파일을 수정할 필요는 없습니다. 이러한 경우, 특정 CSS 코드 부분을 덮어쓰기 위해 새로운 테마 컴포넌트를 만들 수 있습니다. 하지만 정말로 수정하고 싶다면, 테마 컴포넌트를 포크해야 합니다: GitHub - discourse/discourse-search-banner · GitHub 포크한 후 템플릿 파일을 수정할 수 있습니다.

하지만 훨씬 더 쉽고 유지보수하기 좋은 방법이 있습니다 :arrow_down_small:

새로운 컴포넌트를 만듭니다.

  1. /admin/customize/themes/로 이동합니다.
    커스터마이즈 → 테마
  2. 컴포넌트 탭을 클릭한 다음 설치 버튼을 클릭합니다.
  3. 팝업 창에서 새로 만들기 버튼을 클릭하고 새 컴포넌트 이름을 입력합니다.

Screenshot 2022-10-14 at 20.23.38
Screenshot 2022-10-14 at 20.23.38744×347 19 KB

  1. 만들기 버튼을 클릭합니다.
  2. 컴포넌트가 생성되었습니다. 이제 활성화할 테마를 선택합니다. 여기서는 Discourse Air 테마를 선택해야 할 것 같습니다.
    Screenshot 2022-07-26 at 12.06.13
    Screenshot 2022-07-26 at 12.06.13628×132 8.32 KB
  3. 이제 CSS/HTML 편집 버튼을 클릭합니다.
    Screenshot 2022-07-26 at 12.07.53
    Screenshot 2022-07-26 at 12.07.53670×240 11.7 KB
  4. 이제 공통 탭을 클릭하고 아래 코드를 CSS 섹션에 붙여넣습니다.

Screenshot 2022-10-14 at 20.35.10
Screenshot 2022-10-14 at 20.35.101101×552 47.8 KB

.custom-search-banner-wrap {
  h1, p {
    background: -webkit-gradient(linear, right top, left bottom, from(#eaf0ff), to(#0932a5), to(#060064));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

저장을 클릭하세요. 완료! :slightly_smiling_face:

그리고 이전 코드를 제거하는 것을 잊지 마세요.

.custom-search-banner-wrap {
  // 이 부분은 h1과 p에 추가했으므로 제거하세요
  -webkit-text-fill-color: transparent;
  background: -webkit-gradient(linear,right top, left bottom,from(#eaf0ff),to(#0932a5),to(#060064));
  -webkit-background-clip: text;
}

변경 전

Screenshot 2022-10-14 at 20.32.53
Screenshot 2022-10-14 at 20.32.53952×242 38 KB

변경 후

Screenshot 2022-10-14 at 20.34.09
Screenshot 2022-10-14 at 20.34.09946×239 42.7 KB

4

정말 마법사시네요. 감사드립니다. Flarum에서 이관하고 있는데, 제 생각에는 학습 곡선이 가파릅니다.

그리고 이전 코드를 제거하라는 것도 잊지 않고 알려주셔서 감사합니다. :sweat_smile: