XEtown(xe타운) 경험치바 따라하기 - Simplestrap 레이아웃 + 포인트,경험치 현황 위젯(Deniskim님)

안녕하세요 심플스트랩 레이아웃 사용하고 있는 1人 입니다 오늘은 경험치 모듈을 구매한 기념으로

XETOWN 과 비슷한 경험치바 를 레이아웃 에 삽입 하려 합니다

그래서 저도 공부도 하고 혹시 저와 같은 고민을 하고 있을 분들을 위해 공유를 하려 기록 합니다

일단 필요한 레이아웃,모듈,위젯 을 만들어주신 분들께 매우매우 감사하며 나중에 길에서 만나면 아는척 하시죠 ㅋㅋㅋㅋ

● 제작자님들의 아이디 입니다

@wincomi

@CONORY

@DenisKim

시작할께요

● 준비물 

1. 윈컴이님 심플스트랩 레이아웃

2. 콘노리님 경험치 시스템 모듈

3. 데니스킴님 포인트+경험치 현황 위젯

활용방안 은 2가지 입니다 선택은 읽고 실행하는 이 의 몫 입니다

심플스트랩 로그인 화면 입니다

로그인을 하기전엔 안보여야 당연한거겟죠?

일단 먼저 보여드리기 위해 2가지 를 다 적용한 모습을 일단 캡처화면으로 보여드릴께요

이건 심플스트랩 메뉴바에 바로 나오는것 입니다

이친구는 로그인 후 우측 상단의 닉네임쪽에 마우스를 가저가면 나오는 회원정보인데요 거기에 출력을 시켜봤어요

그리고 이제 이걸 출력시키려면 준비물이 충족해 저야 하는데

준비물은 충족됬다는 설정 하에 시작할께요

일단 위젯을 먼저 설정해야하는데요

데니스킴님의 위젯을 먼저 해볼께요

XE관리자 설정화면에 가셔서

"고급" 탭에서 설치된 위젯을 클릭하여

"경험치 현황 출력 위젯"의 코드생성을 클릭 합니다

그리고 스킨 및 컬러셋 셋팅 후 코드생성 버튼을 클릭하여 

위젯코드를 복사 한 후 메모장에 옮겨주세요

그럼 이제 데니스킴님의 스킨은 기본적으로 좀 어둡더라구요 글자색이 그래서 저같은 경우에는

심플스트랩 레이아웃 메뉴를 검은색으로 설정하였으므로 수정을 해야 합니다

★ 흰색 메뉴를 쓰고 게신분들은 따로 수정을 하지 않습니다

/widgets/experience_status/skins/default/css/widget.css 파일을 수정해야 합니다

파일을 열고 21,22,23 줄의 글씨 컬러를 흰색으로 변경 해 주었습니다

자 이제 윈컴이님 레이아웃을 수정해야 하는데요

/layout/simplestrap/_layout.html 파일을 수정을 할꺼에요

85번,86번 라인 사이에 아까 복사한 위젯 코드를 집어 넣으면

회원정보가 보여지는 자리에 경험치 + 포인트 현황 위젯이 보여지구요

81 또는 111번 라인에 위젯코드를 집어넣으면

우측 또는 좌측에 설정한 사이드바의 위젯이 살짝 가려지네요

요건 조금더 찾아보거나 윈컴이님게 여쭤봐야 할것 같네요 ㅎㅎ

111번 라인 </ul> 옆에 코드를 복사해서 넣으면

메뉴 닉네임 밑에 경험치 위젯이 출력 됩니다

그럼 필요하신 분들께 많은 도움 됬으면 좋겠습니다~