로그인 부근 레벨 경험치바 색상 변경하기
로그인 부근에 레벨 경험치바 색상이 기본은 블루계열 입니다.
이 색상을 변경하는 방법은 쉽지만 처음 접할 때 어딜 수정해야 하는지 잘 모릅니다.
방금 제가 테스트 해 본 결과 제대로 변경이 되기에 팁란에 올립니다.
다들 알고 있는 것인데 괜히 나서는 것 아닌가 싶네요. ㅎㅎ
고수분들은 살며시 백스페이스를 눌러주세요. ^^;
보통 경험치바 색상 변경하기 위해서 색상 코드만 열심히 찾았을 겁니다.
rgb 칼라 색상만 열심히 찾았을텐데요.
경험치는 이미 지정되어 있는 색상을 갖고 옵니다.
대표적으로 기본색상 외에 아래 4가지 색상이 있지요.
위 코드가 각각
progress-bar-success
progress-bar-info
progress-bar-warning
progress-bar-danger
이렇게 됩니다. 색상이 아니었던 것 입니다.
위 색상 외에 다른 색상을 지정하고 싶을 경우 커스텀으로 지정하면 되는 것 같습니다.
그런데 커스텀으로 지정하면 수정해야 하는 부분이 늘어나니 간편하게 위 색상으로 변경해 봅시다.
그럼 이 코드를 어디에 넣어야 로그인 부분의 경험치바에 반영이 되는지 알아보겠습니다.
기본 위치는 위젯에 넣으면 됩니다.
/thema/Basic/widget/basic-outlogin/widget.php
여기서 40줄 부근에
<div class="progress-bar progress-bar-exp" role="progressbar" aria-valuenow="<?php echo round($member['exp_per']);?>" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo round($member['exp_per']);?>%;">
<div class="progress-bar progress-bar-warning progress-bar-exp" role="progressbar" aria-valuenow="<?php echo round($member['exp_per']);?>" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo round($member['exp_per']);?>%;">
위와 같이 해당 색상 코드를 넣어주면 반영됩니다.
참고로 바가 움직이는 효과를 원하시면 뒷부분에 active를 추가하면 됩니다.
<div class="progress-bar progress-bar-warning active progress-bar-exp" role="progressbar" aria-valuenow="<?php echo round($member['exp_per']);?>" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo round($member['exp_per']);?>%;">
이렇게 넣어 주시면 진행바가 움직이게 됩니다.
이상 허접팁이었습니다. 더 좋은 방법이 있으면 알려주세요.