PXE Board Pro는 XE 1.2 기본 보드의 기능과 디자인을 강화한 WTA Board의 업그레이드 버전입니다
- PXE Candy Shop에 어울리는 녹색계열과 일반적인 흰색배경에 어울리는 2개의 컬러셋으로 구성되어 있습니다
- 확장변수가 출력되는 페이지는 확장변수 리스트를 끄거나 킬 수 있는 토글 기능이 추가 되었습니다
- 댓글과 엮인글을 끄거나 킬 수 있습니다
- 갤러리 보기에서는 썸네일 이미지에 라벨을 달 수 있고 마우스 오버 미리보기를 넣을 수 있으며, 이를 끄거나 킬 수 있습니다
- 원하는 링크 어디든 title 프로퍼티를 통해 툴팁을 띄울 수 있습니다
- Safari 룩의 깨끗한 체크박스를 사용합니다
- 모든 페이지의 코드를 정리하여 너무 많은 기능으로 인해 산만해 보이지 않도록 수정하였습니다
- XE에서 제공하는 기본 스킨의 코드를 유지하면서 토글 기능으로 처리했기 때문에 기본 스킨을 참조해가며 PXE Board Pro의 기능을 더욱 확장시키거나 하는등의 커스터마이징이 수월합니다
PXE Board Pro는 PXE Candy Shop 레이아웃에 어울리는 흰색 바탕용 녹색 컬러와 일반적인 흰색 바탕용 그라파이트 컬러 두가지로 구성되어 있습니다
압축을 풀어 나온 PXE_board_pro 폴더를 XE가 설치 된 폴더에 알맞게 복사 한 후 서버에 업로드 합니다
XE가 설치 된 폴더/modules/board/skins/PXE_board_pro
XE 관리자 페이지로 접속하여
서비스 관리 > 게시판에서
생성 버튼을 눌러
PXE 보드 프로를 선택하여 생성합니다
라벨과 미리보기 설정하기
PXE Board Pro의 각종 토글이나 jQuery 플러그인들은 설치 후 자동으로 작동합니다. 다만, 갤러리 보기에서 썸네일에 라벨과 미리보기 기능을 사용하려면 해당 게시판의 확장변수 1, 2번을 설정해야 합니다. 게시판에서 가장 처음에 첨부되는 이미지 파일은 썸네일로 나타납니다. 마우스를 올렸을 때 나타나는 더 큰 미리보기 이미지는 첨부와는 관계없이 해당 게시물의 확장변수를 참조해서 출력하게 됩니다. 따라서 해당 보드 모듈에 확장변수 셋팅을 먼저 해야 합니다. 미리보기 이미지는 게시물의 확장변수 1번을 사용합니다. 따라서 이미지를 추출하는 원래 게시물의 확장변수 1번을 미리보기를 위해 사용해야만 합니다.
XE 관리자 페이지 > 서비스 관리 > 게시판 > 확장변수 설정에서 첫번째 확장변수를 아래와 같이 설정해 줍니다
이제 확장변수가 활성화 되었으니 게시물 쓰기에서 확장변수 입력항목이 나타납니다. 글쓰기에서 이 항목에는 미리보기 이미지로 사용 할 이미지가 위치한 경로를 적어주게 됩니다. 상대경로를 넣어줘도 되고 전체 URL도 상관 없습니다. 다른 사이트에 있는 이미지의 위치를 사용 할 경우에는 전체 URL을 적어주게 되겠죠. 이 부분을 찾기 버튼등으로 파일 첨부 형식이 가능하다면 좋겠지만 현재 XE에서는 확장변수에서 파일첨부를 지원하지 않습니다.
만일 test.jpg라는 이름의 이미지가 해당 보드 모듈의 images 폴더에 위치했다면,
images/test.jpg
만일 이미지가 루트 폴더의 images 폴더에 위치했다면,
/images/test.jpg
만일 외부 사이트의 이미지를 넣어야 한다면 전체 URL을 넣어줍니다
http://www.premiumxe.com/images/test.jpg
2. 썸네일에 라벨을 달고 싶다면?
썸네일 이미지의 한편에 라벨을 달면 해당 게시물의 집중도를 올릴 수 있습니다. 이러한 라벨은 대부분 몇가지를 정해놓고 사용하기 때문에 위의 미리보기 이미지와는 다른 방식으로 출력하도록 합니다. 라벨을 사용하려면 해당 게시물의 확장변수 2번을 사용해야 합니다.
위 그림의
형식에서는
단일 선택을 선택하고,
기본 값 부분에는 위 그림과 같이 기재합니다. 위 샘플은
images/label 폴더에 위치한 3개의 라벨 이미지를 리스트에 출력시킵니다. 만일 라벨을 더 추가하고 싶다면
기본 값에 라벨 이미지의 파일 이름만을 콤마와 함께 기재합니다. 확장자는 적지 않습니다. 예를들어 프리미엄과 업데이트라는 라벨 이외에 Free라는 라벨을 선택항목에 추가하고 싶다면
기본 값에 아래와 같이 기재하게 됩니다.
labelPremium,labelUpdate,labelFree,labelBlank
그리고
images/label 폴더에
labelFree.png라는 이름으로 라벨 이미지를 저장해서 넣으면 됩니다. 한가지 주의 할 점은, labelBlank는 꼭 확장변수에 넣어 놓으라는 것 입니다. 아무 라벨도 출력 시키지 않을 때는 이 labelBlank를 선택해서 라벨을 숨겨줘야만 IE계열에서 이미지가 엑박으로 나타나는 현상을 해소시킬 수 있습니다.
3. 제목에 마우스를 올렸을 때 나타나는 정보들을 관리하고 싶다면?
제목부에 마우스를 올리면 작성자, 작성일, 조회수등의 게시물 정보가 툴팁으로 나타납니다. 이 부분은 보드의
스킨관리 설정의 해당 정보의 출력 여부에 따라 달라지게 됩니다.
스킨관리 설정에서
출력하지 않음으로 설정 된 정보들은 여기에도 나타나지 않습니다.
4. 미리보기 이미지와 툴팁을 감싸는 테두리 색상과 여백을 변경하고 싶다면?
아래에 위치한 파일을 엽니다
제로보드 설치 폴더/modules/board/skins/PXE_board_pro/css/common.css - PXE Candy Shop용 녹색 컬러
제로보드 설치 폴더/modules/board/skins/PXE_board_pro/css/PXEwhite.css - 일반 흰색 바탕용 컬러
아래의 CSS 코드를 찾습니다. 가장 하단에 위치하고 있습니다. 이 코드가 툴팁에 관련 된 모든 스타일을 지정하고 있으므로 이 안에서 원하는 색상과 여백등 원하는대로 조절 할 수 있습니다 (CSS 스타일 설명까지는 여기서 언급하지 않겠습니다)
/* Mouse Over Tooltip (Image Preview) */
#tooltip {
position: absolute;
z-index: 999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #cacaca;
background-color: #fafafa;
padding: 5px;
}
#tooltip h3 { margin: 0; font:12px 굴림; color:#8493aa; font-weight:bold; line-height:140%; }
#tooltip div { color:#828282; }
- 이 보드 모듈은 XE 1.2 이상에서 작동합니다 (1.1.5 대응 안함)
- 이 보드 모듈은 IE6/7, 가장 최신의 FireFox, Opera 그리고 Safari에서 테스트 되었습니다
- 이 보드는 PXE Gallery Widget과 jQuery 플러그인을 공유합니다. 따라서 PXE Gallery Widget과 함께 사용 할 때는 레이아웃 설정의 헤더 부분에 넣는 자바스크립트 코드를 추가하지 말고 사용하시기 바랍니다. 이에 대한 자세한 내용은 PXE Gallery Widget의 설정하기 설명부를 참조해 주시기 바랍니다
- 비영리 라이센스 : 30,000원
- 영리 라이센스 : 60,000원
라이센스 구입을 원하시는 분께서는 아래의 계좌로 비용을 입금 하신 후,
clubnb2@naver.com으로 입금확인 메일을 보내주세요. 메일에는 본인
아이디, 입금자명, 스킨명, 라이센스 형태 4가지를 꼭 기재해 주셔야 합니다. 비용 지불이 확인되면 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의
[다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.
PayPal을 이용해 결제를 원하시는 해외 이용자분께서는 위의 4가지 항목에 추가로 자신의
PayPal 이메일 주소를 함께 기입하시면 Request Money로 청구메일이 가게 됩니다. 입금이 확인되면 마찬가지로 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의
[다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.
위 이메일 주소로는 일체 문의내용을 받지 않습니다. 별도의 문의사항이 있으신 경우에는
문의사항 코너를 이용해 주시기 바랍니다.
국민은행 036102-04-168370 정현화
깔끔하고 예뿐데 얼릉 업뎃 해주세요^-^