web-dev-qa-db-ja.com

Drupalテーマの領域の高さはどのように定義されていますか？

テーマの.infoファイルで領域が定義されていることは確認できますが、これらの領域がスタイル設定に使用されるCSSにどのように関連しているかはわかりません。

たとえば、acq_minimal/Minimalテーマでは、ヘッダー領域の高さが固定されていますが、defaults.cssおよびその他のcssファイルと.phpテンプレートファイルを調べましたが、高さがどのように定義されているかわかりません。

ヘッダー領域の高さは、コンテンツ内のコンテンツに対して柔軟ではなく固定されています。非常に大きなフォントでテキストをそこに配置すると、これが他の領域に溢れるためです。つまり、ヘッダー領域は収まるように伸縮しません。

しかし、できればヘッダー領域（およびその他のヘッダー）の高さを変更する方法を知りたいだけです。幅を変更して位置を設定する方法を知っていることも役立ちます。

お知らせ下さい。

7themingregions
4
therobyouknow

ここでは魔法のようなことは何も起こっていません。 .infoファイルでスタイルシートを確認してから、それらを確認してください。そこにあるCSSは、page.tpl.phpのHTMLと他のテンプレートファイルを組み合わせて、ページを作成しますdrupalが作成します。まあ、いくつかのJavaScriptが機能することもありますが、ページマークアップの大部分をカバーしています。

添加：

私が私のマシンで具体的に参照しているテーマはありません、そしてDrupal 7を使用している場合は少し異なりますが、Drupal 6例として、上記と以下のコメントを詳しく説明すると、.infoファイルを開くと、次のようになります。

regions[header] = Header

これは、ヘッダーと呼ばれる領域があることをテーマエンジンに通知します。したがって、そのpage.tpl.phpファイルを調べると、次のことがわかります。

<div id="header-region" class="clear-block"><?php print $header; ?></div>

したがって、ユーザーがブロック管理ページを介してヘッダー領域にブロックを配置すると、drupalはそれらのブロックの$ header変数にすべてのHTMLなどを配置します。ページ。

ご覧のとおり、$ headerはCSSのIDとクラスでラップされているため、.infoファイルを見て、CSSファイルを見つけることができます。

stylesheets[all][] = style.css

Style.cssを開くと、次のことがわかります。

#header-region {
  min-height: 1em;
  background: #d2e6f3 url(images/bg-navigation.png) repeat-x 50% 100%;
}

これは、テーマのヘッダー領域に適用する最初の多くのカスケードスタイルを提供します。 clear-blockクラスを気にする必要はありません。これは、ヘッダーの横に何も浮かんでいないことを確認するための魔法のような方法であり（逆も同様です）、その準備はまだできていません（笑）。

したがって、テーマでこれを行うと、ヘッダーのスタイルがどのようになっているかを確認できるはずです。

8
Jimajamma

Firebugはあなたの友達です。ページを読み込み、スタイルを調べます。参照されるcssが実際のファイル名のように見えない場合は、css集約がオフになっていることを確認してください。

2
Malks

試してみてください Sweaver それは素晴らしいです！

Sweaverは、CSSを知らなくてもDrupalテーマを完全に変更するためのビジュアルインターフェースを提供します。画面の下部にあるバーから、すべてのフォント、色、寸法などを変更できます設計要素を変更してリアルタイムで変更を確認します。変更に満足したら、変更として簡単に保存してすぐにアクティブ化したり、後で使用するために保存したりできます。上級ユーザーは、完全に操作できる高度にプラグイン可能な構成可能なシステムを見つけることができます機能のインターフェースと拡張性。

何ができるかを読んだとき、私は懐疑的でしたが、それは素晴らしく、魅力のように機能しました！素晴らしいエディター、コーディングにかかる​​時間を数分に短縮！

0
ranito1980