ECCUBE3 のデフォルトでは、ログインしているかどうかがわかりづらい。
ログイン中、アイコンの色を変えてみる。
SVGファイルで形状を規定しているファイル。
html/template/default/img/common/svg.html
CSSで色など規定しているファイル。
html/template/default/img/common/svg\_list.html
という手順で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; }