トップパネルとヘッダー
次のステップは、トップパネルとヘッダーコンテナ内のブロックを作成します。
これらの変更はデフォルトのロケーションで設定します。
編集するには、デザイン > レイアウトセクションに移動します。
デフォルトは最初のロケーション・タブです。
ブロックの編集
通貨や言語のブロックを置き換えることができます。
それを行うには、言語ブロックを通貨ブロックの後へドラッグアンドドロップします。
次に24時間配送ブロックを追加します。
ブロックに新しいグリッドを追加します。特定の場所に新しいグリッドを追加するには、まずヘッダーコンテナにグリッドを追加する必要があります。
トップメニューブロックとグリッドを移動します：
ヘッダーコンテナにマウスポインターをおき、＋ボタンをクリックし、グリッドの追加をクリックします。開いたウィンドウで
横幅16を選択し、ユーザ定義のCSSクラスのフィールドで、top-menu-grid を入力し、[作成]をクリックします。新しく作成されたグリッドを
トップメニューブロックにドラッグアンドドロップします。すると、トップメニューブロックを移動した場所に空の16列のグリッドができます。16列のグリッドのギアアイコンをクリックします。
開いたウィンドウで
横幅選択ボックスで「3」を選択し、ユーザー定義のCSSクラスフィールドで_cart-content-grid_を入力し、保存をクリックします。
- カートの内容 ブロックをこのグリッドにドラッグアンドドロップします。
空のグリッドのギアアイコンをクリックします。
開いたウィンドウの
横幅選択ボックスで5を選択し、ユーザー定義のCSSクラスフィールドで_search-block-grid_ と_cart-content-grid_ を置き換えて保存をクリックします。このグリッドに
検索ブロックをドラッグアンドドロップします。
ヘッダー コンテナに空の3列のグリッドができます。これを毎日配送ブロックを作成するために使用します。
空の3列のグリッドのギアアイコンをクリックします。
ユーザー定義のCSSクラスフィールドを消して保存します．＋アイコンをクリックし、
ブロックの追加をクリックします。開いたウィンドウで
ブロックの追加タブに切り替え、HTMLブロックボタンをクリックします。名前フィールドに「毎日配送」と入力し、コンテンツタブに切り替えます。コンテンツフィールドの設定で、\</>（ソースコード表示）ボタンをクリックして、フィールドに次のコードをコピーします：
登録ボタンをクリックします。
残りのブロックはそのままにしておきます。
例の中にはマイカウントはありませんが、それは重要な機能なのでそのままにします。
結果、以下のようになります：
＜画像＞
トップパネルとヘッダー用のスタイルを作成する
CS-Cartではビジュアルエディタで背景やリンクの色などを変えることが可能です。
管理パネルのビジュアルエディタを開き、デザイン > テーマに移動し、「現在のテーマ」のビジュアルエディターボタンをクリックします。
＜画像＞
トップパネルの背景を変更するには：
ビジュアルエディタの左側のパネルでカスタマイズセクションのドロップダウンメニューから「背景」を選択します。
ビジュアルエディタの左側のパネルで
カスタマイズセクションのドロップダウンメニューから「背景」を選択します。トップパネルセクションを探して、背景色のフィールドをクリックします。 開いたパネルの右下隅に手動で色を定義するための入力フィールドがあります。#573c27と入力し色を定義します。
背景のグラデーションを定義することもできます。
背景色フィールドのギアアイコンをクリックします。
追加の設定のドロップダウンパネルが表示されます。
ここではグラデーションの2つ目の色を選ぶことができ、トップパネルを透明にするかどうかを選択します。
同様に、ヘッダーの背景色も定義します。例ではこの色は
#fbfbfbです。 このセクションを全幅表示の設定をオンに切り替えます。
＜画像＞
全ての変更が適応されたら、
保存ボタンをクリックします。開いたウィンドウにスタイルの名前を新たに定義し、[OK]をクリックします。
独自のCSSスタイルを追加する
CS-Cartをインストールした直下のthemes/tutorial/css/ディレクトを開き、
_custom.less_ファイルを作成します。
これはthemes/tutorial/templates/common/styles.tplファイルにインクルードすることができます。
通貨、言語、毎日配達、カートの内容のカスタムスタイルなどをこのファイルに記述します。
通貨ブロックのカスタマイズ
デフォルトでは3つの通貨が表示されています。 画面解像度が小さい場合は、ドロップダウンリストとして表示されます。
＜画像＞
デフォルトでドロップダウンリストを表示するには：
デザイン > レイアウトセクション移動し、通貨ブロックを探します。このブロックのギアアイコンをクリックして「ブロック設定」タブに切り替えます。
アイテムをドロップダウンリストにする場合は、「ドロップダウン表示を行う最小アイテム数」に1を入力し、
保存をクリックします。
管理パネルの一般設定 > 通貨セクションで通貨名と通貨記号を定義することができます。
例でも見たように、通貨記号が使われていないのでテンプレートから削除されます。
通貨記号が定義されているテンプレートを見つけるためには2通りの方法があります：
レイアウトで使用されるクラスを検索 このクラスがFirefoxやChromeのFirebugやDevToolsを使って調べることができます。
templates/common/select_object.tplファイルで使用されているty-select-block__a-itemクラスを検索します。
次のコードは、表示する通貨のアイコンを制御します：
この箇所をテンプレートから削除し保存します。
階層を含んだテンプレートを使用する ブロックのテンプレートは
templates/blocksに格納されています。通貨ブロックにはcurrencies.tplファイルが使用されています。
さらにapp/schemas/block_manager/blocks.phpスキームに定義されます。
ドロップダウンリストに通貨を表示するコード：
このコードではcommon/select_object.tplファイルがincludeされています。
これは、通貨のアイコンが定義されているファイルです。
ここで、スタイルを追加します。
トップパネルの全リンクは白です。なので、以下のスタイルを追加してみましょう：
top-grid - グリッド設定で変更することができるグリッドのためのカスタムクラス。
ブロックとグリッドのカスタムクラスは、名称にプレフィックスty-がありません。
これは、テンプレート内のクラスとそれらを混同しないようにするのに役立ちます。
例の通貨のテキスト文字は大文字です。
ty-select-block__a-item に対してのみスタイルを追加することは正しくありませんし、言語の表示もまたそうです。
ty-select-block__a-itemがセレクタに配置されたブロックにクラスを使用することをお勧めします。
言語ブロックのカスタマイズ
言語名の近くにある矢印を消すには、CSSを使います：
クイックリンクのスタイルを追加します；
「毎日配送」ブロックのカスタマイズ
はじめに、このブロックにアイコンを追加します。 icomoon.io のサービスを使用可能です。アイコンフォントの詳細をご確認下さい。
IcoMoonのアイコンのセットから時計 アイコンを選びます。
＜画像＞
Tutorial theme テーマの_media/fonts/_ ディレクトリにフォントを保存します。
style.cssファイルからcustom.lessファイルへアイコンスタイルを移動し、フォントのパスを更新します。
注意
新しいアイコンフォントを作成する際、アイコンクラス名がテンプレートのアイコンクラス名と一致しないように注意してください。プレフィックスty-icon-を使用しないでください。
🚧 注意
新しいアイコンフォントを作成する際､アイコンクラス名がテンプレートのアイコンクラス名と一致しないように注意してください。 プレフィックス
ty-icon-を使用しないでください。
deriveryブロックのty-delivery__icon にtt-icon-clock クラスを追加してください。
検索フィールドのスタイルを追加します。スタイルのみで、レイアウトは変更しません：
メインメニューのスタイルを追加します：
「カートの内容」ブロックのカスタマイズ
「カートの内容」ブロックはtemplates/blocks/cart_content.tplテンプレートが使用されています。
以下のコードは､表示するカートの内容をコントロールします：
これを以下の内容に置き換えてください：
カートのスタイルを追加します：
最終的に、それらに要素の正しいインデントとスタイルを追加します。
以下はトップパネルとヘッダーのcustom.lessファイルの変更後です:
カスタマイズ結果
最後に新しく作成された「Tutorial theme」でのショップフロントがどのように見えるかを確認しましょう：
＜画像＞
最終更新