DXPR Builderのテーマ設定.

DXPR Builderを学ぶ拡張開発ガイド

ビルダーのコンテンツはページ内の通常のHTMLのため、テーマは他のコンテンツと同様にスタイルを当てます。このページでは、テーマが引き継ぐ内容、エディターへのクラスの追加方法、上書きの置き場所を説明します。

テーマがスタイルする範囲

公開したビルダーコンテンツは、テーマのスタイルを引き継ぎます。

見出し、本文テキスト、リンクはテーマのスタイルを使います。
レイアウトはBootstrap 5のローとカラムを使うため、Bootstrap 5テーマとは揃います。他のテーマでは、DXPR Studio > DXPR Builder > General SettingsでSideload Bootstrap filesをBootstrap 5に設定します。
各エレメントはタイプごとに1つのクラス（az-cardやaz-buttonなど）を持ち、ほとんどはaz-elementも持ちます。CSSアーキテクチャをご覧ください。

エディターへのクラスの追加

テーマのinfo.ymlで追加する

テーマの.info.ymlでdxpr_builder_classesの下にクラスを列挙します。テーマ有効中は、各エレメントのHTML classes一覧に、テーマ名のオプショングループで表示されます。

# 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で終わる必要があります。Hooks 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');
}

ボタンのスタイル

ButtonエレメントにはBootstrapスタイルのPrimary、Secondary、Success、Info、Warning、Danger、Link、Light、Darkがあります。一覧はエディターで固定で、buttons foldersフックでは変わりません。ボタンにブランドらしい見た目を付けるには、テーマでBootstrapのbtn-*クラスにスタイルするか、HTML classesで独自クラスを追加します。

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);
}

編集者がStyleタブで行う設定は、インラインスタイルとして書き込まれます。インラインスタイルは!importantなしのテーマルールより優先されるため、テーマCSSは初期値に使い、エレメントごとの上書きは編集者に任せます。

エディターとテーマ

エディターは、フィールドが表示されるページ上で動作します。管理テーマではなくフロントエンドテーマ内です。コントロールバー、メニュー、ダイアログはdxpr-builder-uiクラスを持ち、独自のスタイルシートdxpr_builder_backend.cssを読み込みます。buttonや.modalのような広いセレクターを狙うテーマルールは届く場合があるため、ルールはコンテンツ領域に限定します。