web-dev-qa-db-ja.com

Joomla 3.3.6に付属するデフォルトのProtostarテンプレートのコンテナーサイズの幅を変更するにはどうすればよいですか

Protostarテンプレートのデフォルト（コンテナ）の幅は、デフォルトのレスポンシブな静的レイアウトで960pxに設定されています。プロトスターテンプレートをレスポンシブスタティックレイアウトのままにする必要がありますが、レスポンシブスタティックレイアウトでは幅が1150pxです。

デフォルトのプロトスターテンプレートのレスポンシブな静的レイアウトの固定（コンテナー）幅（960pxから1150px）を変更するにはどうすればよいですか？

理解しました。新しいcssファイルを作成し、別のファイルに追加する必要があるかもしれません。

固定幅を960pxから1150pxに変更し、デフォルトのプロトスターテンプレートのレスポンシブな静的レイアウトを維持するために必要なすべての手順を教えていただければ、本当にありがたいです。

どうもありがとうございました

joomla-3.xtemplateslayout
1
Tim

templates/protostar/css/template.cssを変更する必要があります：

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.span12 {
width: 940px;
}
.offset12 {
margin-left: 980px;
}
.container {
max-width: 960px;
}

ただし、これらの変更は次回の更新時に上書きされる可能性があります。私はあなたにアドバイスします to to copy Protostarテンプレートと必要な変更を行います。

編集：Joomla 3.5.0以降、/ templates/protostar/css/user.cssにカスタムCSSファイルを作成できます。このファイルは自動的にロードされ、テンプレートの将来の更新によって上書きされません。

1
Dmitry Rekun

Dmitryが指摘したように、幅はファイルtemplates/protostar/css/template.cssに設定されますが、ProtostarテンプレートはコアJoomlaの一部であるため、Joomlaを更新すると変更が失われる可能性があります。

まず、テンプレートのコピーを作成します（まだ作成していない場合）。手順は ここにあります です。任意の名前を使用しますが、スペースや特殊文字は使用しないでください。

個人的には、Protostar template.cssファイルは少し面倒です（約7500行のコード）。 CSSオーバーライド用の新しいファイルを作成する方が良いと思います。好きな名前を付けて（私はcustom.cssを使用します）、templates/YOURTEMPLATENAME/css/に配置します。

次に、ファイルtemplates/YOURTEMPLATENAME/index.phpを編集します。終了</head>タグ（約121行）の直前に、次のコードを追加します。

<?php
  $doc->addStyleSheet(JUri::base() . 'templates/' . $this->template . '/css/custom.css', $type = 'text/css', $media = 'screen,projection');
?>

これにより、CSSファイルがロードされます。このファイルに変更を追加します。

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1130px;
}
.span12 {
width: 1130px;
}
.offset12 {
margin-left: 1170px;
}
.container {
max-width: 1150px;
}

編集：Joomla 3.5.0以降、/ templates/protostar/css/user.cssにカスタムCSSファイルを作成できます。これは自動的にロードされ、テンプレートへの今後の更新によって上書きされません。

1
johanpw