テーマのCSSでビルダーコンテンツをスタイルする.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

DXPR Builderコンテンツはテーマがレンダリングするページの一部であり、テーマのCSSがエディターと公開ページの両方にスタイルします。多くのエレメントやページで繰り返す見た目や、エレメント設定では実現できない見た目に使います。最終的にテーマ内のスタイルシートと、編集者が適用できるクラスができます。1つのエレメントには設定ダイアログを使います。

始める前に

  • テーマのファイルへのアクセスとデプロイ方法が必要です。
  • カスタムテーマまたはサブテーマを使います。コントリビュートテーマのアップデートはそのファイルを置換し、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とクラスをご覧ください。

テーマが一覧に掲載すれば、編集者はHTML 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 1つのエレメントタイプ。az-とエレメント名の組み合わせです(例: Divider用の.az-separator)
.az-element ほとんどのコンテンツエレメント。Image、Icon、Buttonは除きます

書き込むのはStyleパネルで、インラインstyle属性です。同じプロパティのクラスルールより優先されます。Bootstrapユーティリティクラスは!important付きで、両方より優先されます。

スタイルが表示されない場合

  • クラスはエレメントにあるのに何も変わりません。ライブラリーが読み込まれていないか、キャッシュが古い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-*クラス、独自のクラスを対象にします。

次のステップ