DSモジュールのカスタムCSSクラスの追加できない

drupal
drupal
development
display suite
css
customization

DrupalのDS（Display Suiet）モジュールが非常にパワフルです。各種コンテントの表示画面のレイアウトを自由自在に変更し、必要な要素を適切な場所に表示させることができます。非常に魅力のあるモジュールと感じます。

残念なところで、DSのregionへのカスタムcssクラス名を自由に指定できますが、実際にそのカスタムcssクラスの本体が自由に追加できない点が分かりました。

モジュールのバージョンなど

  • Drupal：7.38
  • Dispaly Suite：7.x-2.10

表示画面の表示例：　ノートタイプの一覧画面（Teaser）に画像（128x128pix）とコンテント説明を一緒に表示したい

  • ノートタイプの一覧表示設定（Home » Administration » Structure » Content types » Article » Manage display）のTeaserタブでの「Layout for article in teaser」セクション、「Fluit two column」レイアウトを選択します
  • 左カラムに画像（128x128pix）を割当し、右カラムにタイトルと本文の一部を割当して表示します。
  • 結果として、左右が50%づつで割り当てられバランスが悪いし、25%：75%に変更したいです。
  • 上記表示エリア（region）のcssを変更して、左右の比例を変えられれば良いです。そのために、同じ設定画面（Home » Administration » Structure » Content types » Article » Manage display）のTeaserタブでの「Custom classes」セクションの一番下にある「Manage region and field CSS classes」リンクをクリックして、cssクラスの追加画面が開かれます。そこで適切なcssクラス名を追加します
    • 例：　custom-article-teaser-left|Custom Article Teaser Left
    • 例：　custom-article-teaser-reft|Custom Article Teaser Right

  • cssのクラス名の追加ができました。実際の表示画面のcssクラス名も正しく表示されましたが、画面の表示が何も変わりません。実際のcssクラス定義本体はどこにもないからです。
  • DSモジュールがcssクラス名の追加手段を提供したが、そのcssクラスの記述本体の追加手段は提供されていないようです。cssクラスの追加か、スタイルシートの追加方法を考えなければならないです。

cssクラスの追加方法

  • DSモジュールにあるcssファイル（ds_2col_fluid.css）に直接上記クラスの記述を追加します。
    • ファイルのパス： ルートパス >> sites -> modules -> ds -> layouts -> ds_2col_fluid -> ds_2col_fluid.css
    • 上記ファイルに定義したカスタムクラス名とcss定義を追加します 
      .ds-2col-fluid > .group-left > .custom-article-teaser-left{
  float: left;
  width: 25%;
}
.ds-2col-fluid > .group-right > .custom-article-teaser-right{
  float: left; 
  width: 75%;
}
    • この方法はあまりお勧めすることができません。DSがアップグレードされる時点で、上記記述が消されてしまいうことからです。
  • 公開されている関数でcss定義ファイルの追加ができます
    • 利用可能な関数：hook_preprocess、drupal_add_cssなど
    • カスタムモジュールを作成して、上記関数の実装でcssの定義ファイルを追加します
  • カスタムモジュール/テーマモジュールの.infoファイルに上記cssファイルの追加ができます
    • .infoファイルに以下のような記述を追加すれば、上記cssファイルの追加ができます 
      ; すべののmediaタイプに適応cssの追加
stylesheets[all][] = theStyle.css

最終解決案

  • DSの各種レイアウトのcssをよく読んでいくと、ds_3col_stacked_fluidの活用ができると感じました。
  • 3カラムの比例：25%:50%:25%となりますが、右側が空白の場合、ミドルは75%の配分と定義されています(sites/modules/ds/layouts/ds_3col_stacked_fluid/ds_3col_stacked_fluid.css)
    • 左と右をそれぞれ25%と定義します
    • 左と右がなければ、ミドルは100%
    • 右、または左がなければ、ミドルは75% 
      .ds-3col-stacked-fluid > .group-left {
  width: 25%;
  float: left; /* LTR */
}
.ds-3col-stacked-fluid > .group-middle {
  width: 100%;
  float: left; /* LTR */
}
.ds-3col-stacked-fluid.group-one-sidebar > .group-middle {
  width: 75%;
}
.ds-3col-stacked-fluid.group-two-sidebars > .group-middle {
  width: 50%;
}
  • このレイアウトを利用して、右側のコンテンツを開けといて、見事に25%：75%の配分になりました