DXPR Builder 테마 적용.

DXPR Builder 배우기확장빌더 위에 개발

빌더 콘텐츠는 페이지의 일반적인 HTML이므로 테마가 다른 콘텐츠처럼 스타일을 적용합니다. 이 페이지에서는 테마가 상속하는 내용, 에디터에 클래스를 추가하는 방법, 재정의 위치를 설명합니다.

테마가 스타일을 적용하는 대상

게시된 빌더 콘텐츠는 테마의 스타일을 상속합니다.

제목, 본문 텍스트, 링크는 테마의 스타일을 사용합니다.
레이아웃은 Bootstrap 5 행과 컬럼을 사용하므로 Bootstrap 5 테마와 잘 맞습니다. 다른 테마에서는 DXPR Studio > DXPR Builder > 일반 설정으로 이동하여 Bootstrap 파일 사이드로드를 Bootstrap 5로 설정합니다.
모든 요소는 유형마다 하나의 클래스를 가집니다. 예를 들어 az-card나 az-button이며 대부분 az-element도 포함합니다. CSS 아키텍처를 참조하세요.

에디터에 클래스 추가

테마의 info.yml에서

테마의 .info.yml에서 dxpr_builder_classes 아래에 클래스를 나열합니다. 테마가 활성화된 동안 모든 요소의 HTML 클래스 목록에 테마 이름의 옵션 그룹으로 표시됩니다.

# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

모듈에서

함수 hook_dxpr_builder_classes_alter()를 구현합니다. 이름은 _alter로 끝나야 합니다. 후크 API 참조를 참조하세요.

/**
 * Implements hook_dxpr_builder_classes_alter().
 */
function mymodule_dxpr_builder_classes_alter(&$classes) {
  $classes['optgroup-custom'] = t('Custom Styles');
  $classes['custom-card'] = t('Custom card');
  $classes['custom-hero'] = t('Custom hero');
}

버튼 스타일

버튼 요소는 Bootstrap 스타일인 기본, 보조, 성공, 정보, 경고, 위험, 링크, 밝은, 어두운을 제공합니다. 목록은 에디터에 고정되어 있으며 buttons folders 후크로 바뀌지 않습니다. 버튼에 브랜드 모양을 적용하려면 테마에서 Bootstrap btn-* 클래스의 스타일을 지정하거나 HTML 클래스로 직접 클래스를 추가합니다.

CSS 재정의

테마의 CSS에서 빌더 출력을 재정의합니다.

/* Section padding */
.az-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Card shadows */
.az-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

에디터가 스타일 탭에서 지정하는 설정은 인라인 스타일로 기록됩니다. 인라인 스타일은 !important를 사용하지 않는 테마 규칙보다 우선하므로 기본값은 테마 CSS로 지정하고 요소별 재정의는 에디터에게 맡깁니다.

에디터와 테마

에디터는 필드가 표시되는 페이지에서 실행되므로 관리 테마가 아니라 프런트엔드 테마 안에서 실행됩니다. 컨트롤 바, 메뉴, 대화상자에는 dxpr-builder-ui 클래스가 있으며 자체 스타일시트인 dxpr_builder_backend.css를 로드합니다. button이나 .modal 같은 넓은 선택자를 대상으로 하는 테마 규칙은 여전히 영향을 줄 수 있으므로 규칙을 콘텐츠 영역으로 한정합니다.