Design

Chocoはフロントエンドのフレームワーク（HTML,CSS,JS）に Bootstrap を使用しています。Bootstrapをベースとして、サイト固有のCSSを追記することでデザインを変更します。

Bootstrapは統一感のある様々なパーツがあります。詳細は Bootstrapのドキュメントをご参照ください。

CSSファイル

サイト固有のCSSは webroot/assets/css/base.css ファイルに記述します。

webroot
└── assets
    └── css
        └── base.css

（例）ドキュメントヘッダの背景色を変更

デフォルトでは紫色のドキュメントヘッダの色をCSSを編集してチョコレート色に変更します。文字の色も少し変えます。

webroot/assets/css/base.css

/*
 * doc header
 */
.choco-doc-header {
/* background-color: #6f5499; */
  background-color: #2d1802;
  ...
}
.choco-doc-header h1 {
  ...
/* color: #fff; */
  color: #fdf6f1;
  ...
}
.choco-doc-header p {
/* color: #cdbfe3; */
  color: #f6d9c4;
  ...
}

（例）トップページのボタンの色を変更

トップページの "Download Choco" ボタンの色を水色から黄色に変更します。ここでは HTMLで、Bootstrapのボタン用に定義されている classを変更することで色を変えます。

view/page/index.html.twig

{% block doc_header %}
  {% embed 'partial/doc_header.html.twig' %}
    {% block content %}
      <h1 id="textillate">Choco CMS</h1>
      ... 

      <!-- ここで classを変更。btn-primary を btn-warningに変更 -->
      <!-- <a class="btn btn-primary btn-lg animated shake" href="...">Download Choco</a> -->
      <a class="btn btn-warning btn-lg animated shake" href="...">Download Choco</a>
    {% endblock %}
  {% endembed %}
{% endblock %}

（例）トップページのドキュメントヘッダ背景を写真に変更

webroot/assets/css/base.css

/*
 * home
 */
#home .choco-doc-header {
  ...
  background-image: url("http://www.99hdwallpaper.com/valentines-day/wallpapers/chocolate-day-wallpaper-free-download.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  filter: brightness(0.9);
  -webkit-filter: brightness(0.9);
}
#home .choco-doc-header h1 {
  ...
  text-shadow: 1px 1px 20px #2d1802;
}
#home .choco-doc-header p {
  ...
  text-shadow: 2px 2px 20px #2d1802;
}