테마 CSS로 빌더 콘텐츠 스타일 지정.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

DXPR Builder 콘텐츠는 테마가 렌더링하는 페이지의 일부이므로, 테마의 CSS가 에디터와 게시된 페이지에 스타일을 적용합니다. 이 페이지는 여러 요소나 페이지에 반복될 모양이 필요하거나 요소 설정으로 만들 수 없을 때 사용하세요. 테마의 스타일시트와 편집자가 적용할 수 있는 클래스로 끝납니다.단일 요소에는 settings dialog(을)를 사용하세요.

시작하기 전에

  • 테마 파일에 접근할 수 있고 배포 방법이 있습니다.
  • 커스텀 테마나 서브테마를 사용하세요. 기여 테마를 업데이트하면 해당 파일이 교체되며 CSS도 함께 사라집니다.

설정

  1. 테마 폴더에 css/custom.css(을)를 만드세요. 예: themes/custom/mytheme/css/custom.css.

  2. 파일을 다음에 선언하세요: mytheme.libraries.yml.

    global-styling:
  css:
    theme:
      css/custom.css: {}

  3. 다음에서 모든 페이지에 라이브러리를 불러오세요: mytheme.info.yml.

    libraries:
  - mytheme/global-styling

  4. 직접 만든 클래스 이름의 규칙을 작성하세요:

    .brand-hero {
  background: linear-gradient(135deg, #1a4d8f, #0f2a4d);
  color: #ffffff;
}

  5. 다음에서 캐시를 비우세요: Configuration > Development > Performance (/admin/config/development/performance)의 Clear all caches. 또는 drush cr(을)를 실행하세요.

  6. 빌더에서 Section의 설정을 열고 brand-hero(을)를 HTML classes 아래에 추가하세요. HTML ID and classes 문서에 직접 만든 클래스의 입력 방법이 나와 있습니다.

테마가 해당 위치에 나열하면 편집자는 HTML classes 목록에서 클래스를 고를 수도 있습니다. 자세한 내용은 Utility classes 문서를 참고하세요.

표시되는 내용

클래스를 추가하자마자 섹션에 그라데이션과 흰색 텍스트가 적용됩니다. 에디터가 테마가 렌더링하는 페이지에서 실행되기 때문입니다. 페이지를 저장하면 방문자에게도 동일하게 표시됩니다. 클래스는 페이지 HTML에 저장되므로 나중에 규칙을 바꾸면 해당 클래스가 있는 모든 요소에 적용됩니다.

DXPR Builder가 작성하는 클래스

직접 만든 클래스가 가장 안전한 대상입니다. 저장된 HTML에는 다음 클래스도 있습니다:

선택자 일치 대상
.az-container 각 DXPR Builder 필드의 래퍼. 편집 중에는 .dxpr-editor(을)도 가짐
.az-section 모든 Section. 안에는 .container(이)가 있으며, .container-fluid는 Full width(이)가 켜지면 대신 들어감
.row 모든 Row. DXPR Builder는 Bootstrap 자체 클래스를 사용하며 추가 없음: az-row
.col-* 모든 열. 예: .col-12.col-md-6. 없음: az-column
.az-text, .az-image, .az-button, .az-card 단일 요소 유형. az-와 요소 이름의 조합입니다. 예: Divider용 .az-separator.
.az-element 대부분의 콘텐츠 요소. Image, Icon, Button은 제외

인라인 속성은 다음 패널에서 작성됩니다: Style. style 속성은 같은 속성에서 클래스 규칙보다 우선하며, !important(이)가 표시된 Bootstrap 유틸리티 클래스는 둘보다 우선합니다.

스타일이 표시되지 않는 경우

  • 클래스는 요소에 있지만 바뀌지 않습니다. 라이브러리가 불러와지지 않았거나 캐시에 이전 CSS가 있습니다. mytheme.info.yml에 라이브러리가 나열되는지 확인한 뒤 /admin/config/development/performance에서 캐시를 비우세요.
  • 일부 속성만 적용됩니다. 같은 속성의 Style 패널 값이 우선합니다. 요소의 Style 패널에서 해당 값을 비우거나 전체 모양을 클래스로 옮기세요.
  • 스타일이 에디터에는 표시되지만 방문자에게는 표시되지 않습니다. Apply text format filters to frontend content 항목이 켜져 있어 필드의 텍스트 형식이 class 속성을 제거합니다. Text Filters(/admin/dxpr_studio/dxpr_builder/settings에서) 아래에서 끄거나 형식에 클래스를 허용하세요.
  • 다음 규칙은 절대 일치하지 않습니다: .az-row, .az-column입니다. DXPR Builder는 해당 클래스를 작성하지 않습니다. .row, .col-* 클래스나 직접 만든 클래스를 대상으로 하세요.

다음 단계

  • Utility classes: 편집자가 고를 수 있도록 HTML classes 아래에 클래스를 나열합니다.
  • Custom fonts: 같은 방법으로 브랜드 글꼴을 불러옵니다.
  • Text editor: Styles 목록에서 문단과 단어용 클래스를 제공합니다.