接客アクションに枠線をつける方法はありますか?

ウィジェットタイプでは無いテンプレートについて、接客アクションの編集画面の「カスタマイズ」より、以下の編集を行うことでアクションの外側に任意の太さ・色の枠線をつけることができます。今後、ウィジェットタイプのテンプレートには枠線の設定がビジュアルに含まれる予定です。

CSSの追加:

①アクションの全体をカバーしているクラスに以下を追記

border: {{border_width}}px solid {{border_color}};

変数の追加:

① border_width  数値 枠線の太さ (任意の太さの数値)

② border_color 色  枠線の色  (任意の色)

設定例:

 

変数を使わずに、

border: 2px solid #444444;

のようにCSSで直接太さと色を記入しても枠線の設定が可能です。

 

floatで配置している、画像とテキスト群、アイコンとテキスト群が横並びになっているテンプレートの場合、枠線を追加することで文章の位置がずれてしまいプレビュー画面から消えて見えなくなることがあります。その時には、文章部分をカバーしているクラスで、上記にて設定したborder_widthの2倍の数字を引く数式に編集をしてください。

例:

例えばこのテンプレートは、

.karte-temp-content {
   float: left;
   width: {{bar_width}}-{{icon_size}}-45px;
   margin: 15px;
   margin-left: 0;
}

のように、width(横幅)がbar_width(全体の横幅)からicon_size(アイコンのサイズ/幅)を引き、さらに45pxのゆとりを持たせた位置にテキストが来るようにCSSで調整されていますので、枠線を上記の手順で追加するとテキストの位置がずれてしまいます。

そこで、widthを以下のように編集します。

width: {{bar_width}}-{{icon_size}}-{{border_width}}*2-45px;