팁/튜토리얼

이 강좌(팁)는 이런 사람에게 적극적으로 추천합니다.

스킨단에 경험치바를 넣고 싶은 사람, 도전 정신이 있는 사람, 심심한 사람

 

@보고님의 요청으로 해당 팁을 적었습니다.

이 강좌의 목표는 가능한 쉽게 서술하는 데 있습니다. 따라서 쓸데없는 설명으로 길어질 겁니다.

 

네, 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>

 

잘 따라 오셨다면 다음 처럼 출력됩니다. 오오오!! 신기해라..!!(효과) 흐이잌..

3_00001.jpg

 

하지만 나는 검정색이 싫다.. 아니면 더욱 꾸미고 싶다 하시는 분들..!!

 

자, 이번에는 (초보자에게)고급 설정을 알려드릴게요. 이번에는 못 따라오시는 분이 있을지는 모르겠지만.. (설마..) 

도전 정신이 강한 분들을 위해 남겨놓을게요.

 

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 부분도 똑같이 수정해야 합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

수고하셨습니다.(여러분 말고 글쓴이 본인에게요) 

 

추천도 좋지만 사실 댓글이 더 보기 좋습니다 ~_~

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.

.

.

.

.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.

.

.

.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.

.

.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.

.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

끝입니다. 두근?

댓글 44