web-dev-qa-db-ja.com

ガントリーグリッドレイアウト

最新のガントリーフレームワークでJoomla 3サイトを作成しています。現在、サイトはまだ私のローカル開発サーバー上にありますが、この質問にはサイトリンクは必要ないと思います。

したがって、ロゴ、メニュー、ソーシャルアイコン（この順序で）には、ヘッダーの位置a、b、cを使用しています。テンプレートマネージャーの[レイアウト]タブでヘッダーの位置を編集すると、c（私のソーシャルアイコンがある場所）または任意の位置にできる最小の位置は2です。つまり、rt-grid-2です。ソーシャルアイコンのブロックの幅を1つのグリッドサイズ（rt-grid-1）のみにする必要があります。

テンプレートでこのサイズ設定を強制するにはどうすればよいですか？

私は数年前からJoomla Webサイトを作成していますが、カスタム設計されたテンプレートを作成するために常に別のフレームワークを使用していました。いくつかの点でより優れたフレームワークであることがわかったので、最近ガントリに移動しましたが、それでもすべての詳細を学習しています。

gantry
3
adadeacon

rt-grid-1を強制的に動作させる方法に関する質問への正確な回答ではありませんが、別のアプローチを次に示します。

ソーシャルメディアアイコンをheader-b位置（メインメニューと同じ）に公開し、position:absoluteを使用して配置できます。 Module Class Suffix （例：socialmedia）を使用してモジュールをターゲットにし、次のようにします。

#rt-header .socialmedia {
    position: absolute;
    top: 0;
    right: 0;
}

（top＆rightを必要な位置に変更します）。

ソーシャルメディアボタンが干渉する場合は、header-bの位置がページの右端まで広がるため、メインメニューにCSSを追加する必要がある場合もあります。 #rt-header .menu-blockを使用して、メニューを含むdivをターゲットにできるはずです。

1
johanpw

これはtemplate-options.xmlテンプレートのルートディレクトリにあるファイル（そうJOOMLA-ROOT/templates/TEMPLATE-NAME/template-options.xml）。

位置ごとに、このファイルで定義されたフィールドが表示されます。そのフィールド定義内には2つの項目があります：schemasおよびwords。スキーマは可能な列の数を定義します（したがって、最大3つの列のみを許可したい場合、値は1,2,3）。ワードは、許容される列幅を定義します（通常、2,3,4,5,6,7,8,9,10、それゆえ、なぜあなたは1列幅を持つことができないのですか？）.

追加できるはずです1および11をリストに追加して、これらの値を許可します。このテンプレートを複数のWebサイトで使用する場合は、デフォルトを変更することもできます。

4
David Fritsch

ガントリに非標準の列幅を実装する最も簡単な方法は、CSSをオーバーライドすることです。

以下の例では、2つの列が＃rt-topで定義され、テンプレート設定で4：8の比率に設定されています。

これにより、CSSで「rt-grid-4」の列幅は33.3333％、「rt-grid-8」の列幅は66.6667％になります。

firebug

ヒント：適切なCSSセレクターを作成するには、Firebugなどを使用してください。

列幅は、カスタムCSSファイルでオーバーライドできます。 /templates/rt_[template-name]/css/rt_[template-name]-custom.cssでファイルを作成または編集し、次のようなコードを追加して、幅のパーセンテージを指定します。以下の例のように、メディアクエリを含めて、オーバーライドを特定の画面幅に制限したり、さまざまな画面幅の割合を変更したりできます。

@media (min-width: 768px) {
  #rt-top .rt-grid-4 {
    flex-basis: 10%
  }
  #rt-top .rt-grid-8 {
    flex-basis: 90%
  }
}
0
Neil Robertson