이 강좌(팁)는 이런 사람에게 적극적으로 추천합니다.
스킨단에 경험치바를 넣고 싶은 사람, 도전 정신이 있는 사람, 심심한 사람
@보고님의 요청으로 해당 팁을 적었습니다.
이 강좌의 목표는 가능한 쉽게 서술하는 데 있습니다. 따라서 쓸데없는 설명으로 길어질 겁니다.
네, XE타운 우측 상단에 있는 경험치바를 간단하게 만들어봅시다.
일단 소스를 따로따로 분리했지만.. 하나의 문서로 통합해주세요. (쉽게 이해 시키기 위해서 분리한겁니다)
그럼 시작합니다.
일단은 경로는 ../layouts/사용 중인 레이아웃/layout.html에 삽입하시면 됩니다.
{@
$oModuleModel = &getModel('module');
$config = $oModuleModel->getModuleConfig('point');
$oPointModel = &getModel('point');
$point = $oPointModel->getPoint($logged_info->member_srl);
$level = $oPointModel->getLevel($point, $config->level_step);
$next = $config->level_step[$level+1];
$perc = round(($point-$now)/($next-$now)*100, 2);
}
그리고 이제 CSS을 입혀봅시다. 이번에도 그냥 복사하면 됩니다. (Ctrl+c)
<style>
/* 경험치바 베이스*/
#bar{border:1px solid #ccc; background:#e9e9e9;}
#bar{height:14px; width:250px;}
/* 경험치 비율 출력 */
.perc{display:inline-block;border:1px solid #8c9bac; background:#332f2e;}
.perc{height:14px; width:{$perc}%; margin:-1px;}
</style>
이제 출력을 해보죠. 아래 소스도 Ctrl+c로 복사해서 적용하시면 됩니다.
<div id="bar" cond="$is_logged"><span class="perc"></span></div>
잘 따라 오셨다면 다음 처럼 출력됩니다. 오오오!! 신기해라..!!(효과) 흐이잌..
하지만 나는 검정색이 싫다.. 아니면 더욱 꾸미고 싶다 하시는 분들..!!
자, 이번에는 (초보자에게)고급 설정을 알려드릴게요. 이번에는 못 따라오시는 분이 있을지는 모르겠지만.. (설마..)
도전 정신이 강한 분들을 위해 남겨놓을게요.
1. 이것 저것 정보를 출력을 하고 싶어요 뷁에엙!!
레벨 - {$level}
포인트 - {$point}
다음 레벨의 최소 포인트 - {$next}
레벨 퍼센스 출력 - {$perc}
+보너스 (Bonus)
나도 XE타운 처럼 레벨 아이콘도 출력하고 싶다고요..!!! 붸에에엙!!
<img src="{sprintf('%smodules/point/icons/%s/%d.gif', Context::getRequestUri(), $config->level_icon, $level)}" />
그냥 레이아웃에 해당 코드를 삽입하면 출력합니다.
2. 레이아웃바를 원하는대로 수정하고 싶어요 뷁에엙!!
<style> CSS 부분만 수정하면 됩니다. 수정하면 되는 부분에 대해 설명할게요.
#bar 부분의 background의 #e9e9e9부분은 밑색입니다. 원하시는 걸로 변경해도 좋아요.
#bar height는 높이를 width는 길이를 의미합니다. 숫자를 변경하면 원하시는 높이나 길이로 조정 가능합니다.
.perc 부분의 background의 #332f2e부분은 그래프(바)색입니다. 원하시는 걸로 변경해도 좋아요.
.perc 부분의 width는 건드리지 마시고 만약 #bar의 height을 수정하셨다면 .perc의 height 부분도 똑같이 수정해야 합니다.
수고하셨습니다.(여러분 말고 글쓴이 본인에게요)
추천도 좋지만 사실 댓글이 더 보기 좋습니다 ~_~
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
끝입니다. 두근?
