EC-CUBE3系のデフォルトテンプレートを改変し、デザインを変更しようとしています。
たとえばPick Up Itemsのエリアに背景色をつけて、
・背景色はブラウザの横幅いっぱいに表示
・コンテンツはデフォルトテンプレート通り1150pxまでの横幅で中央に表示
というかたちに改変したいと考えています。
横幅1150pxの制限はstyle.cssのinnerクラスで行われていると思うので、default_frame.twigの内容を以下のように変更し、メインコンテンツエリアの横幅が制限されないようにしたつもりです。
<div class="container">
{# <div class="container-fluid inner"> #}
{# ▼LEFT COLUMN #}
{% if PageLayout.SideLeft %}
<div id="side_left" class="side">
{# ▼左ナビ #}
{{ include('block.twig', {'Blocks': PageLayout.SideLeft}) }}
{# ▲左ナビ #}
</div>
{% endif %}
{# ▲LEFT COLUMN #}
<div id="main center">
{# ▼メイン上部 #}
{% if PageLayout.MainTop %}
<div id="main_top">
{{ include('block.twig', {'Blocks': PageLayout.MainTop}) }}
</div>
{% endif %}
{# ▲メイン上部 #}
<div id="main_middle">
{% block main %}{% endblock %}
</div>
{# ▼メイン下部 #}
{% if PageLayout.MainBottom %}
<div id="main_bottom">
{{ include('block.twig', {'Blocks': PageLayout.MainBottom}) }}
</div>
{% endif %}
{# ▲メイン下部 #}
</div>
{# ▼RIGHT COLUMN #}
{% if PageLayout.SideRight %}
<div id="side_right" class="side">
{# ▼右ナビ #}
{{ include('block.twig', {'Blocks': PageLayout.SideRight}) }}
{# ▲右ナビ #}
</div>
{% endif %}
{# ▲RIGHT COLUMN #}
{# ▼BOTTOM COLUMN #}
{% if PageLayout.ContentsBottom %}
<div id="contents_bottom">
{# ▼下ナビ #}
{{ include('block.twig', {'Blocks': PageLayout.ContentsBottom}) }}
{# ▲下ナビ #}
</div>
{% endif %}
{# ▲BOTTOM COLUMN #}
</div>
そのうえで、new_product.twigに以下のようにinnerクラスを追加しました。(以下のうち3行目)
<div id="contents_top">
<div id="item_list">
<div class="container-fluid inner">
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="row no-padding">
<div class="col-xs-6">
<div class="img img_right"><a href="{{ url('product_detail', {id : 2}) }}"><img src="{{ app.config.front_urlpath }}/img/top/img01.jpg"></a></div>
</div>
<div class="col-xs-6">
<div class="img"><a href="{{ url('product_detail', {id : 2}) }}"><img src="{{ app.config.front_urlpath }}/img/top/img02.jpg"></a></div>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12 comment_area">
<div class="txt_center">
<h4>新入荷商品</h4>
<h5>この季節にぴったりな商品をご用意しました</h5>
<p>さわやかな日差しが過ごしやすい季節。心地よいくらしのための、お部屋のアクセントになるおすすめのファブリックやグッズをご紹介します。</p>
<p><a class="btn btn-success" href="#">一覧を見る<svg class="cb cb-angle-right"><use xlink:href="#cb-angle-right" /></svg></a></p>
</div>
</div>
</div>
.
.
.
この状態で、上記のcontainer-fluid innerより上層にいるitem_listに背景色を設定したのですが、やはり背景色の横幅が1150pxに制限されてしまいます。
(以下のように記述しました。)
#item_list{
background-color: #F9F1E6;
}
背景色を横幅いっぱいに表示するには、どのようにしたら良いのでしょうか?
EC-CUBEの質問というよりCSSの質問のようになってしまって恐縮なのですが、よろしくお願いいたします。
▼テンプレート
[EC-CUBE] EC-CUBE3.0.10
[レンタルサーバ] エックスサーバー
[ブラウザ] Chrome
[導入プラグインの有無] なし
[カスタマイズの有無] その他CSSは基本的になし
[現象] 上記の通り