Drupal8のw3cssテーマ改造５：フロントページのRSSアイコンを復活させる

Durupl8ではテーマは単独のディレクトリで管理

• Drupal8のテーマ（theme）がモジュールのインストール/アンインストール（機能拡張）の部分でインストールすることができます
  • 「テーマ」管理画面でも「新しいテーマのインストール」ボタンをクリックして、インストールすることがもできます
• 通常モジュールのフォルダー（drupal8/modules）と違って、単独のフォルダー（drupak8/theme）で管理しています
  

インストールしたテーマ(theme)にカスタマイズのため、サブテーマ（sub-theme）の作成ができます

• いろいろテーマをインストールすることができます
• インストールしたテーマの一部分をカスタマイズをしたいことがよくあります
  • 例：個別の詳細をcssで定義して、cssファイルをテーマに追加したい
• Drupalでは複数のサブテーマ（sub-theme）を作成することができます
• 複数のサブテーマを並列/直列して親テーマに継承することができます
  
• 子テーマが親テーマの要素を継承します
  • 子テーマで各要素の再定義、追加などができます

テーマ/サーブテーマのディレクトの集約ができます

• 初期のテーマディレクトリにインストールした複数のテーマが入っています
• サブディレクトもテーマディレクト（drupal8/theme）に作成して保管しています
• 複数のテーマをインストールして、複数のサブテーマを作成したら、フォルダー数が多くなり、どっちがサブテーマかはわかりづらくなります
• ここで、元のテーマを集約するディレクトリ(contrib)、とカスタマイズのサブテーマのディレクトリ(custom)を作成して、集約することができます
  • themes
        +-- contrib
                 +-- theme 1
                 +-- theme 2
                 +-- theme ・・・
        +-- custom
                 +-- sub_theme 1
                 +-- sub_theme 2
                 +-- sub_theme ・・・
     
• 作成された集約ディレクトリ（例：contrib, custom）、各テーマ/サブテーマのディレクトリを移動します
  • 移動後に各テーマ/サブテーマの構成ファイル（例：_info.yml）の定義の修正（ディレクトリ名に合わせ）必要はありません

問題点：Bootstrap導入後にモジュール（Better Exporsed Filters）のレイアウトが崩れました

• Drupal：7.53
• Views：7.x-3.14
• Better Exporsed Filters:7.x-3.4
• モジュールViewsのExposed Filterがよく利用されると思います。特により機能良いBetter Exposed Filtersの導入で、選択肢セレクトからチェックボックスでの利用ができ、検索用の「適応」ボタンを外すことができます
• ここで、Bootstrapを導入したら、Better Exposed Filtersの外観が崩れました

原因：Better Exposed Filtersの検索フォームの要素、プロパティがBootstrapテーマに書き直されました

• Bootstrap導入より、Better Exposed Filtersの検索フォーム（選択肢ブロック）の要素、プロパティが書き直されました
  • 選択肢ブロックに「form-control」クラスが追加されました
  • Bootstrapの「form-control」クラスがブロックの高さ（height）が定義しています
• 「form-control」クラスがブロックの高さ（height）を消せば、通常の検索フォームに戻ります
  

他にいろいろな要素の確認が必要

• Bootstrap導入より、Better Exposed Filtersのレイアウトへの影響は上記だけではなく、いろいろ部分に影響を与えています。
• style.cssで各要素の上書き対応が必要となります

Durupl8ではテーマは単独のディレクトリで管理

• Drupal8のテーマ（theme）がモジュールのインストール/アンインストール（機能拡張）の部分でインストールすることができます
  • 「テーマ」管理画面でも「新しいテーマのインストール」ボタンをクリックして、インストールすることがもできます
• 通常モジュールのフォルダー（drupal8/modules）と違って、単独のフォルダー（drupak8/theme）で管理しています
  

インストールしたテーマ(theme)にカスタマイズのため、サブテーマ（sub-theme）の作成ができます

• いろいろテーマをインストールすることができます
• インストールしたテーマの一部分をカスタマイズをしたいことがよくあります
  • 例：個別の詳細をcssで定義して、cssファイルをテーマに追加したい
• Drupalでは複数のサブテーマ（sub-theme）を作成することができます
• 複数のサブテーマを並列/直列して親テーマに継承することができます
  
• 子テーマが親テーマの要素を継承します
  • 子テーマで各要素の再定義、追加などができます

テーマ/サーブテーマのディレクトの集約ができます

• 初期のテーマディレクトリにインストールした複数のテーマが入っています
• サブディレクトもテーマディレクト（drupal8/theme）に作成して保管しています
• 複数のテーマをインストールして、複数のサブテーマを作成したら、フォルダー数が多くなり、どっちがサブテーマかはわかりづらくなります
• ここで、元のテーマを集約するディレクトリ(contrib)、とカスタマイズのサブテーマのディレクトリ(custom)を作成して、集約することができます
  • themes
        +-- contrib
                 +-- theme 1
                 +-- theme 2
                 +-- theme ・・・
        +-- custom
                 +-- sub_theme 1
                 +-- sub_theme 2
                 +-- sub_theme ・・・
     
• 作成された集約ディレクトリ（例：contrib, custom）、各テーマ/サブテーマのディレクトリを移動します
  • 移動後に各テーマ/サブテーマの構成ファイル（例：_info.yml）の定義の修正（ディレクトリ名に合わせ）必要はありません

問題点：Bootstrap導入後にモジュール（Better Exporsed Filters）のレイアウトが崩れました

• Drupal：7.53
• Views：7.x-3.14
• Better Exporsed Filters:7.x-3.4
• モジュールViewsのExposed Filterがよく利用されると思います。特により機能良いBetter Exposed Filtersの導入で、選択肢セレクトからチェックボックスでの利用ができ、検索用の「適応」ボタンを外すことができます
• ここで、Bootstrapを導入したら、Better Exposed Filtersの外観が崩れました

原因：Better Exposed Filtersの検索フォームの要素、プロパティがBootstrapテーマに書き直されました

• Bootstrap導入より、Better Exposed Filtersの検索フォーム（選択肢ブロック）の要素、プロパティが書き直されました
  • 選択肢ブロックに「form-control」クラスが追加されました
  • Bootstrapの「form-control」クラスがブロックの高さ（height）が定義しています
• 「form-control」クラスがブロックの高さ（height）を消せば、通常の検索フォームに戻ります
  

他にいろいろな要素の確認が必要

• Bootstrap導入より、Better Exposed Filtersのレイアウトへの影響は上記だけではなく、いろいろ部分に影響を与えています。
• style.cssで各要素の上書き対応が必要となります

Drupal8でw3cssテーマ（theme）の初期フォントサイズ（font-size）設定が大き目になっているので、調整する必要があります。

Drupal8のw3cssテーマ設定画面（ホーム >> 管理 >> テーマ >> Appearance settings >> w3_css theme）では、フォント関連設定項目がないようで、cssスタイルで設定したほうが良いでしょう

サブテーマ（sub-theme）でフォントサイズ（font-size）を設定

• w3cssのサブテーマを作成します
  • Drupal8のサブテーマ作成について「Drupal8のテーマ（theme）の構造及びディレクトリの整理 」をご参考
• 作成したサブテーマのcss定義（例：style.css）にフォントサイズを再定義します

  h1{font-size:28px;}
  h2{font-size:24px;}
  h3{font-size:20px;}
  h4{font-size:18px;}
  h5{font-size:16px;}
  h6{font-size:14px;}

   

• css定義更新後に、Drupal8のキャッシュクリアを忘れずにしてください

見出し（H1）のフォントサイズが変わらない問題

• 見出し（h2）などが順調に変更できました
• 見出し（h1）が変わらないことを気づきました
• ブラウザの開発ツールで見出し（H1）を確認します
  
• 見出し（H1）のフォントサイズ設定はcssクラス：w3-xxlargeで管理しているようです

解決：サブテーマのcss定義でh1.w3-xxlargeクラスを再設定

• 見出し（H1）を限定して、w3-xxlargeのフォントサイズを設定します

  h1, h1.w3-xxlarge{font-size:28px!important;}
  h2{font-size:24px;}
  h3{font-size:20px;}
  h4{font-size:18px;}
  h5{font-size:16px;}
  h6{font-size:14px;}

   

• 「w3-xxlarge{font-size:28px;}」のような設定を避けたほうが良いでしょう。なぜならば、ここで見出し（H1）のフォントサイズを再定義、ほかの部分のw3-xxlargeの定義を変更するつもりはありません
• これで、見出し（H1）のフォントサイズが順調に変更されました
• 開発ツールで見出し（H1）のフォントサイズがオーバーライドされました