ECCUBE3のログインアイコンの色を変える

ECCUBE3 のデフォルトでは、ログインしているかどうかがわかりづらい。

ログイン中、アイコンの色を変えてみる。

SVGファイルで形状を規定しているファイル。 html/template/default/img/common/svg.html

CSSで色など規定しているファイル。 html/template/default/img/common/svg\_list.html

1. svg.htmlのクラス名やid名を修正
2. style.cssを変更

という手順でCSSレベルでの変更ができる。

svg.htmlから26行目辺り、cb-lock-cirvleを探す

<symbol id="cb-lock-circle" viewBox="0 0 360 360">
<circle class="icon-bg" cx="180" cy="179.85" r="155"/>
<path class="icon-with-bg" d="M253.204,176.911v73.204c0,3.391-1.188,6.271-3.557,8.644c-2.373,2.373-5.256,3.558-8.645,3.558H118.997    c-3.391,0-6.271-1.185-8.643-3.558c-2.373-2.372-3.559-5.253-3.559-8.644v-73.204c0-3.388,1.186-6.27,3.559-8.642    c2.371-2.371,5.252-3.559,8.643-3.559h4.066v-24.401c0-15.589,5.592-28.977,16.775-40.161    c11.186-11.184,24.57-16.776,40.162-16.776c15.588,0,28.977,5.592,40.16,16.776c11.184,11.185,16.775,24.572,16.775,40.161v24.401    h4.066c3.389,0,6.271,1.188,8.645,3.559C252.016,170.641,253.204,173.523,253.204,176.911z M147.463,164.71h65.072v-24.401    c0-8.98-3.178-16.649-9.533-23.003c-6.354-6.355-14.023-9.532-23.002-9.532c-8.982,0-16.65,3.177-23.004,9.532    c-6.355,6.354-9.533,14.023-9.533,23.003V164.71z"/>
</symbol>

ここがログインの錠前アイコン。

<circle class="icon-bg"の部分はグレー（#b6bcc2）の丸。<path class="icon-with-bg" の部分は、錠前の白（#fff）。

複製してidを書き換える

<symbol id="cb-lock-circle__red" viewBox="0 0 360 360">
<circle class="icon-bg__red" cx="180" cy="179.85" r="155"/>
<path class="icon-with-bg" d="M253.204,176.911v73.204c0,3.391-1.188,6.271-3.557,8.644c-2.373,2.373-5.256,3.558-8.645,3.558H118.997    c-3.391,0-6.271-1.185-8.643-3.558c-2.373-2.372-3.559-5.253-3.559-8.644v-73.204c0-3.388,1.186-6.27,3.559-8.642    c2.371-2.371,5.252-3.559,8.643-3.559h4.066v-24.401c0-15.589,5.592-28.977,16.775-40.161    c11.186-11.184,24.57-16.776,40.162-16.776c15.588,0,28.977,5.592,40.16,16.776c11.184,11.185,16.775,24.572,16.775,40.161v24.401    h4.066c3.389,0,6.271,1.188,8.645,3.559C252.016,170.641,253.204,173.523,253.204,176.911z M147.463,164.71h65.072v-24.401    c0-8.98-3.178-16.649-9.533-23.003c-6.354-6.355-14.023-9.532-23.002-9.532c-8.982,0-16.65,3.177-23.004,9.532    c-6.355,6.354-9.533,14.023-9.533,23.003V164.71z"/>
</symbol>

svg_list.html内にもCSSらしきものがある。

/src/Eccube/Resource/template/default/Block/login.twigをsrc/app/template/default/Block/login.twigにコピー。

35行目 <svg class="cb cb-lock-circle"><use xlink:href="#cb-lock-circle" /></svg>Log out を書き換え。

~<svg class="cb cb-lock-circlered">~<use xlink:href="#cb-lock-circlered" />~</svg>~Log out

/html/template/default/css/syle.css 1308行目〜のfillの値を変更する。

.member\_link a .cb {
font-size: 30px;
font-size: 3rem;
fill: #f00/*#B8BEC4*/;
margin-right: 5px;
position: relative;
top: -1px;
}