매뉴얼

PXE Board Pro 3 Skin Manual

2010-03-10T21:20:53+09:00

PXE Board Pro 3가 XE의 기본 게시판을 토대로 프리미엄의 이름에 걸맞는 뛰어난 기능과 고급 디자인을 목표로 만들어진 PXE Board의 스킨으로 다시 거듭났습니다. 스크린샷, 다운로드파일 등록이 가능하여 자료실기능으로 사용할 수 있으며 등록자, 사용자 별점 기능을 더하여 완벽한 리뷰 게시판으로 활용이 가능합니다.

스크린샷 및 다운로드 파일을 등록할 수 있는 자료실 기능이 추가되었습니다.
등록자 및 사용자 별점 기능으로 리뷰 게시판으로 활용이 가능합니다.
다른 브라우저는 물론 IE6에서도 100%의 호환성을 가집니다
모든 디자인 요소 및 기본 HTML/CSS 은 표준을 준수합니다.
Clean Type 기능을 이용하여 항목명을 말끔한 이미지 서체로 변경할 수 있습니다
목록설정에 등록자별점, 사용자 별점이 추가되었습니다.
기존 확장변수를 사용한 미리보기 및 라벨 이미지 출력을 모듈에서 직접 지원하므로 사용이 편리해 졌습니다.
넣고 싶은 링크에 깔끔한 툴팁을 띄울 수 있습니다
썸네일에 미리보기 이미지를 추가하여 툴팁에서 출력시킬 수 있습니다
제목과 썸네일을 링크화 시켜서 본문보기 페이지가 아닌 다른 URL로 링크시킬 수 있습니다
기 본 스타일 3개(리스트, 웹진, 갤러리) 외에 구현이 안되어 있던 블로그 형식이 추가되었고 스튜디오 형식 보기가 새롭게 추가되었습니다(Board Pro 2). 이 형식은 이제 갤러리 보기에서처럼 양쪽에 마진이 남지않고 정확하게 양쪽 정렬할 수 있게끔 정렬관련 함수 및 jQuery가 추가되었습니다
확장변수는 이제 내용이 들어가 있는 변수만 리스트에 출력시킵니다
썸네일에 라벨을 달아 게시물을 환기시킬 수 있습니다
XpressEditor가 에러없이 제대로 작동합니다. 앞으로 만들어지는 PXE의 레이아웃에서도 이제 default 에디터를 사용하지 않고 XpressEditor를 사용 할 수 있습니다
이미지로 사용된 텍스트들은 Naver의 나눔글꼴을 사용하여, 이용자가 포토샵에서 쉽게 텍스트를 바꿀 수 있도록 하였습니다
스튜디오 형식 보기에서는 썸네일이 첨부되어 있지 않은 게시물은 리스트에서 표시시키지 않습니다. 스펨성 게시글이 달려도 관리자에게만 보이도록 설정되었습니다
스튜디오 형식 보기에서는 중요도가 떨어지는 항목(조회, 추천등)은 사라지고 썸네일에 마우스를 올리면 썸네일 자체에 블록이 나타나며 제목과 등록일등의 간단한 정보만 출력시켜 가독성을 올렸습니다
"이 게시물을..." 옵션을 표시할지 안할지 관리자에서 지정할 수 있으며, 표시하지 않을 경우 자동으로 각 항목들이 버튼으로 출력됩니다
제목 옆에 관리자의 수정/삭제 버튼이 있어 이제 게시물을 수정하기 위해 스크롤을 내려 버튼을 찾아다니지 않아도 됩니다. 목록으로 돌아가기 버튼도 추가 될 예정이었으나 공간의 문제로 이 부분은 다음 패치 때 이루어집니다

4개의 컬러셋 중 하나를 선택할 수 있습니다.

하얀색 컬러셋
검은색 컬러셋
사용자 정의 컬러

PXE Board Pro 3는 PXE Board 전용 스킨이므로 반드시 PXE Board가 먼저 설치된 상태에서 설치합니다. 다운받은 PXE_board_pro_v3.3.zip 압축을 풀면 pxeboard와 Image_Source 폴더가 나오는데 pxeboard 폴더를 XE가 설치된 폴더의 modules 폴더 아래로 복사해 넣거나 혹은 서버에 업로드 합니다. (pxeboard/skins 아래에 PXE_board_pro3 스킨이 포함되어 있습니다)

XE가 설치 된 폴더/modules/pxeboard

제어판 > 모듈 에서 PXE 게시판에 빨강색 설치 링크가 나타나면 꼭 클릭하셔서 모듈 설치를 끝내시기 바랍니다.

XE 관리자 페이지로 접속하여 서비스 관리 > PXE 게시판에서 생성 버튼을 눌러 PXE Board pro 3를 선택하여 생성합니다

1. 글목록 형식 설정

PXE Board Pro 3는 5개의 글목록 형식을 지원합니다.

일반 목록
웹진
갤러리
커뮤니티 [적용된 게시판 보러가기]
스튜디오
블로그
FAQ [적용된 게시판 보러가기]

일반목록, 웹진, 갤러리, 커뮤니티는 XE기본 게시판에서 지원되는 형식으로 일반 회원이 임의로 형식을 변경할 수 있지만 스튜디오, 블로그 형식은 사용자가 임의로 변경할 수 없습니다.

2. 자료실 게시판으로 설정하기

기존의 게시판으로 자료실로 활용하기가 쉽지 않았는데요 PXE Board Pro 3의 자료실 기능을 사용하시면 손쉽게 자료실 게시판으로 만드실 수 있습니다.

자료실 기능을 사용하기 위해서는 제어판 > 서비스관리 > PXE 게시판 > 스킨관리에서 자료실 기능을 사용으로 변경해 주세요.

분류, 자료 제목 등이 스크린샷 이미지 옆으로 출력될 수 있도록 확장변수를 추가해 줍니다.

3. 리뷰 게시판으로 설정하기

등록자 별점, 사용자별점을 사용하여 리뷰 게시판으로 활용할 수 있습니다.

리뷰 게시판으로 활용하시려면 등록자 별점 및 사용자 별점 기능을 켜주시면 됩니다.

4. 자료실 리뷰 게시판으로 설정하기

자료실 기능과 등록자, 사용자 별점 기능을 함께 사용하면 완벽한 자료실 리뷰 게시판이 만들어 집니다.

5. 라벨 달기

스크린샷 및 글목록의 썸네일에 왼쪽 혹은 오른쪽 위치에 라벨 이미지를 달 수 있습니다.

라벨 기능을 사용하기 위해서는 스킨관리에서 라벨관련 설정을 켜주시면 됩니다.

라벨 이미지 출력을 출력으로 설정하시면 글 쓰기 할 때 라벨 이미지 항목이 나타납니다.

기본라벨 출력을 출력으로 설정해 놓으면 라벨 이미지를 등록하지 않은 게시물은 기본라벨로 출력됩니다. 만약 이 기본라벨을 변경하고 싶으시면 기본라벨 이미지를 직접 변경해 주시면 됩니다.

왼쪽 정렬 라벨은 아래 파일을 변경해 줍니다.

img/label/labelDefault_left.png

오른쪽 정렬 라벨은 아래 파일을 변경해 줍니다.

img/label/labelDefault_right.png

6. 미리보기 이미지 설정하기

PXE Board Pro 3에서는 기존의 확장변수로 등록해야 했던 미리보기 이미지를 게시물 등록시 직접 이미지를 올려서 등록하도록 개선이 되었습니다. 스킨관리에서 미리보기 이미지 출력을 출력으로 설정하시면 됩니다.

7. 다른게시판에서 가져오기 혹은 내보내기

상호변환 기능으로 XE 기본 게시판 혹은 게시판EX 등 다른 게시판으로부터 생성된 게시판을 가져오거나 PXE Board의 게시판을 내보낼 수 있습니다. 제어판 > 서비스 관리 > PXE 게시판 > 상호변환 버턴을 눌러주세요.

8. 썸네일 및 스크린샷 크기 설정

썸네일 및 스크린샷 크기 설정 시 뒤에 px를 넣지 않도록 주의합니다. 그냥 숫자로만 입력하여 주세요.

9. FAQ 페이지 꾸미기

기본형태 옵션의 목록형식을 FAQ로 설정하고 분류출력형식을 탭으로 설정하여 완벽한 FAQ 페이지로 꾸밀 수 있습니다. 목록설정에서 제목을 맨 앞에 오도록 하시는 것이 보기에 좋습니다.

이 보드 모듈은 XE 1.4 이상에서 작동합니다.
이 보드 모듈은 IE6/7/8, 가장 최신의 FireFox, Opera 그리고 Safari에서 테스트 되었습니다
이 보드는 PXE Gallery Widget과 jQuery 플러그인을 공유합니다. 따라서 PXE Gallery Widget과 함께 사용 할 때는 레이아웃 설정의 헤더 부분에 넣는 자바스크립트 코드를 추가하지 말고 사용하시기 바랍니다. 이에 대한 자세한 내용은 PXE Gallery Widget의 설정하기 설명부를 참조해 주시기 바랍니다
포인트 시스템 관리 모듈별 설정에서 PXE Board 목록이 나타나지 않습니다. 게시판의 추가설정에서 설정하세요.
파일 다운로드시 포인트가 + 혹은 - 되지 않습니다.
압축된 자바스크립트(.min.js로 끝나는 스크립트파일)과 자동출처표시 애드온의 자바스크립트와 충돌이 있습니다. 이런 경우 원본을 읽어들이도록 하거나 자동출처표시 애드온을 꺼주시면 됩니다.

비영리 라이센스 : 60,000원
영리 라이센스 : 240,000원

구매하길 원하시면 지불과 다운로드 안내(지불과 다운로드 안내 탭 클릭하여 보세요)를 참조해서 구매하신 후 스토어에 등록된 PXE Board Pro 자료를 통해 다운로드 받으세요.

PXE 공식 레이아웃

2010-02-11T22:11:31+09:00

PXE Official Layout은 Premiumxe의 공식 레이아웃 입니다. 이 레이아웃은 이용자 설정을 통해 사이트의 구조를 대단히 다양하게 구성할수 있습니다. 기존의 PXE Sky나 PXE Leaflet Pro의 기능들이 일부 흡수되었으며 이 레이아웃 고유의 강화된 기능들도 만나볼수 있습니다. 아래의 특징은 기존의 레이아웃들이 흡수 된 부분입니다. 먼저 기본 기능을 살펴보고 그 아래 새로 추가된 기능들도 함께 참고해 보세요.

넓은 리플릿 영역과 좁은 리플릿 영역을 설정하는 리플릿 스타일링 기능이 있습니다
리플릿 영역을 왼쪽이나 오른쪽에 위치시킬 수 있고, 혹은 사용하지 않음으로 설정할수도 있습니다
좁은 리플릿 영역을 설정하는 경우 4단계 세로메뉴인 위치표시기를 출력할수 있습니다
리플릿 영역은 배너를 적용하여 링크시킬수도 있습니다
본문부 다단 가변설정을 통해 포탈, 블로그, 일반 사이트등에서 사용하는 모든 단 구성을 관리자 화면에서 설정할 수 있습니다
사이트를 구성하는 모든 요소들의 너비(사이트 전체, 헤더, 사이드바, 푸터 너비 등)을 손쉽게 변경할 수 있습니다
1단계 메인메뉴를 상단에 표시할 수 있습니다
2차 하위메뉴를 메인 메뉴 하단에 표시할 수 있습니다
아주 예쁘고 깔끔한 3차 세로메뉴를 사이드바에 표시할 수 있습니다. 이 메뉴는 사이드바의 폭에 따라 너비가 자동으로 조정됩니다
4차 풀다운 메뉴를 메인메뉴와 연결하여 마우스 오버 형식으로 표시할 수 있습니다
2가지의 컨텐츠단 구성형식을 선택할 수 있습니다. 배경 마진이 있는 형태와 없는 형태입니다.
하단 좌측에 하단메뉴와 상호등을 넣을 수 있으며 우측에도 엑스트라 메뉴가 존재합니다
모든 메뉴는 이미지 메뉴를 사용해도 위치나 정렬이 흐트러지지 않도록 CSS로 포지셔닝 되어있습니다
PXE Board Pro 2의 말끔한 서체 기능과 함께 사용하면 사이트 전체 메뉴 및 항목을 모두 이미지화 할 수도 있습니다
위에 기재된 모든 기능은 별도의 파일 수정없이 모두 관리자 페이지에서 마우스 클릭만으로 설정할수 있습니다
포토샵 레이아웃 소스와 함께 메뉴등과 같은 소스 파일들이 포함되어 있습니다

아래 내용은 위의 기존 기능들에 추가된 PXE Official Layout만의 기능입니다.

기존에 단 6개 단 구조에서 12개 단 구조로 확장되었습니다. 플랫 형식을 사용하게 되면 네이버 메일 화면과 같이 컨텐츠와 사이드바의 마진이 사라지고 전체화면에서도 잘 어울리는 플랫한 느낌으로 구성할수 있습니다.
오른쪽 사이드바에서는 별도의 메뉴 설정을 통해 사이드바를 강조할수 있는 영역을 표현할수 있습니다.
스카이 블루, 코코아 블랙에 이어 PXE Official Layout 고유의 메인 컬러셋인 Cyan(샤이안)이 추가되었습니다.
모든 컬러셋은 12개의 단 구조를 모두 사용할수 있도록 재코딩 되었습니다.
검색 박스의 너비를 지정할수 있습니다.

1. 압축을 풀어 나온 PXE_official_layout 폴더를 귀하의 layouts 폴더에 넣은 후 서버에 업로드 해주세요.

XE가 설치 된 폴더 > layouts > PXE_official_layout
2. 관리자로 접속하여 사이트 설정 > 레이아웃에서 생성 버튼을 눌러 PXE 공식 레이아웃을 선택 한 후 레이아웃으로 등록합니다.

3. 게시판등의 모듈에서 PXE 공식 레이아웃을 연결합니다

1. 컬러셋
PXE 공식 레이아웃은 총 3개의 컬러셋이 있습니다. 기본으로 제공되는 3가지 컬러셋은 안정적인 업그레이드를 위해 파일을 수정하지 말고 유지시키면서, 사용자 지정 컬러셋을 선택하여 커스터마이징 하는 것이 효과적입니다. 이 방법에 대해서는 고급 설정에서 다시 설명합니다.

스카이 블루 (PXE Leaflet Pro와 동일)
코코아 블랙 (PXE Leaflet Pro와 동일)
샤이안 (Cyan)
사용자 지정 (샤이안과 동일)

2. 리플릿 스타일 선택
리플릿은 NHN Deview 공식 사이트와 같이 왼편에 본문과는 독립된 영역입니다. PXE 공식 레이아웃에서는 이 리플릿의 스타일을 선택할수 있습니다.

리플릿 출력 안함 : 리플릿을 출력시키지 않습니다
넓은 리플릿(436px) : NHN Deview 공식 사이트의 첫 페이지와 같이 폭이 넓은 리플릿을 출력시킵니다
일반 리플릿(279px) : NHN Deview 공식 사이트의 서브 페이지와 같이 폭이 좁은 리플릿을 출력시킵니다

3. 리플릿 위치 선택
리플릿을 어느쪽에 위치시킬지 결정할수 있습니다.

위치시키지 않음 : 리플릿을 출력시키지 않을 경우 여기서도 위치시키지 않음으로 설정합니다
리플릿을 왼쪽에 위치 : NHN Deview 공식 사이트와 같이 리플릿이 화면의 왼편에 위치합니다
리플릿을 오른쪽에 위치 : 이 샘플 화면과 같이 리플릿을 화면의 오른편에 위치시킵니다.

4. 본문부 레이아웃 구성 선택
사이트의 본문부를 몇 단으로 구성 할 것인지 설정 할 수 있습니다. 6개식 2셋트, 총 12가지 구조를 설정할수 있습니다. 일반 형식과 플랫 형식으로 나뉘어져있는데, 일반 형식은 본문부와 사이드바 부분이 어느정도 마진(여백)을 두고 있으며 플랫 형식의 경우는 마진이 없이 실선으로 구역이 나뉘어져 있습니다. 쉽게말해 플랫 형식은 네이버 메일에 로그인 했을시의 화면과 같으며 전체화면을 사용합니다.

5. 메인메뉴 선택

일반 1단 형식 : 일반적으로 메뉴바에 생성되는 메인 메뉴입니다
일반 2단 형식 : 2차 서브 메뉴를 메뉴바 하단에 출력시켜줍니다. 본문부 레이아웃 구성을 플랫 형식으로 지정한 경우에는 디자인과 매치되지 않으니 사용하지 않는것이 좋습니다
4단 풀다운 형식 : 메인 메뉴에 마우스를 올리면 서브 메뉴가 풀다운되어 나타나는 형식입니다

6. 우측 단일메뉴 선택

우측 단일메뉴란, 레이아웃 구성 선택에서 3단 형식의 스타일을 지정하여 사이드바 2가 출력될때 해당 사이드바를 좀 더 강조시키는 역할을 합니다. 웹 표준화 가이드 사이트인 NULI 사이트에서와 같이 메뉴바의 우측에 초록색으로 Blog라고 적힌 부분과 같은 역할을 합니다.

7. 서브메뉴(세로) 출력

1단 형식이 아닌 경우 사이드바 1의 위치에 2차 메뉴를 출력합니다. 이 서브메뉴는 반드시 관리자 설정의 메뉴에서 2차 메뉴들이 생성되어 있는 조건하에 출력됩니다.

8. 리플릿 위치표시기 출력 여부

리플릿을 사용하는 경우 리플릿 영역에 현재 위치한 페이지를 메뉴 형태로 보여줍니다. 넓은 리플릿을 사용했을 경우에만 위치표시기가 출력됩니다.

9. 사이트 너비, 위젯공간 1의 너비, 위젯공간 2의 너비

이 부분은 일단 아무런 수치도 기입하지 말고 빈 상태로 놔두시면 기본 셋팅된 수치로 적용이 됩니다. 일단 빈 상태로 놔두신 후 나중에 입맛에 맞게 수치를 넣어보세요.

P.S : 이후부터의 추가적인 설명이 필요한 것들은 팁 형식으로 유저포럼에 등록하겠습니다.

이 레이웃은 모바일 대응을 위하여 코드의 클래스명등이 함축적인 의미로 짧아져있기 때문에 핸드코딩을 하시는 분들은 다소 복잡할수 있습니다.
샘플 화면에 나타나는 사이드바의 요소들은 말그대로 샘플만을 위해 임의적으로 넣어놓은 것들이기 때문에 작동을 하지 않는것도 있습니다. 사이드바의 요소는 위젯을 사용하여 이용자가 스스로 꾸며야 합니다.
이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.

현재까지 문제점이 없습니다

PXE AppBlog

2009-11-25T15:20:40+09:00

PXE AppBlog는 Apple 아이폰용 앱스토어(AppStore)에서 개발자들이 주로 사용하는 GUI(Graphic User Interface)로 디자인 된 최신 트랜드의 텍스타일 블로그 스킨입니다. 무미건조하고 일륜적인 디자인의 한국 블로그와 차별화 된 자신만의 하이엔드 블로그를 운영하시고자 하는 분들, 그리고 IT 업종에 종사하는 분들께 이 블로그 스킨을 권해드립니다. 이제 2009년 11월 28일부로 KT에서도 아이폰(iPhone)이 출시되고 국내 스마트폰 시장도 앱스토어와 같은 고급 디자인으로 무장한 막강한 애플리케이션들의 상용화에 접어들기 시작합니다.

PXE AppBlog는 iPhone 애플리케이션을 제작하는 해외의 유명 디자이너 및 개발자들의 블로그 디자인과 일맥상통하며, 이를 이용하면 이러한 최신의 트랜드와도 확실히 결부되는 장점을 가지고 있습니다. 이 스킨이 온라인에서 어떻게 작동하는지 보려면 여기를 클릭하십시오.

플랫(Flat)하면서도 황금색의 컬러 키포인트가 이 블로그 스킨만의 매력입니다
토글 버튼을 이용하면 방명록, 태그, 프로필과 검색창등의 옵션 영역을 열거나 닫을수 있습니다
웹진 형식 보기, 리스트 형식 보기, 블로그형 보기 모두 나름대로의 특색을 살린 디자인으로 마무리 되었습니다
방명록, 태그, 프로필, 검색결과등과 같은 부수 페이지들의 디자인이 모두 완성되어 있습니다
별도의 위젯을 설치하거나 설정하지 않아도 카테고리, 최근 댓글, 최근 게시물, 태그등과 같은 위젯이 디자인에 매치되어 기본으로 작동합니다
댓글보기에서는 PXE AppBlog와 PXE Photoware에서만 볼수있는 개성있는 날짜 출력형식이 사용됩니다
몇몇 텍스트에는 음영효과를 살려 텍스트가 디자인에 더 잘 녹아들어 보이도록 해줍니다
디자인에 사용된 모든 요소가 포토샵 원본 파일로 제공됩니다. 꼭 디자인에 커스터마이징이 필요하신 분들께서 적절히 사용할수 있습니다

PXE AppBlog는 텍스타일의 구조상 1개의 기본 컬러셋만 존재합니다.

압축을 풀어 나온 PXE_AppBlog_textyle 폴더를 아래의 경로에 위치시킨 후 서버에 업로드 합니다
XE가 설치된 폴더/modules/textyle/skins/PXE_AppBlog_textyle

1. 관리자 화면에 접속하여 상단의 TexTyle을 선택합니다 (기존에 TexTyle을 이미 만드신 분은 1번부터 4번까지 패스하십시오)

2. TexTyle 생성 버튼을 눌러 새 텍스타일을 만듭니다

3. 접속방법과 관리자를 설정 한 후 TexTyle 생성 버튼을 누릅니다

4. 생성 된 텍스타일 이름을 클릭합니다

5. 생성 된 기본 TexTyle 스킨에서 우측 상단의 Admin을 클릭하여 관리자로 접속합니다

6. Textyle 관리자 화면에서 스킨선택을 클릭합니다

7. PXE_AppBlog_textyle의 썸네일에서 스킨적용을 클릭합니다. (아래 이미지는 다른 스킨입니다)

작성 준비중입니다

이 모듈 스킨은 XE 1.2.6 이상에서만 작동합니다.
이 스킨은 IE6/7/8, FireFox2/3, Opera, Safari Windows에서 테스트 되었습니다.

현재까지 알려진 문제가 없습니다

텍스타일 스킨은 레이아웃 스킨과 달리 관리자가 직접 설정에서 마우스 클릭만으로 단 구조등을 변경하는 등의 기능이 제공되지 않고 있습니다. 이러한 부분은 CSS 프레임워크를 만져야만 가능하나 이 스킨에서는 현재 왼편에 위젯, 오른편에 본문이 위치하는 1개의 구조만 사용하고 있습니다. 다른 구조로의 변경이나 너비등을 수정할 경우 스킨이 오작동을 할수있으니 가급적 로고와 같은 그래픽적인 부분만 변경해서 사용하십시오.
PXE AppBlog는 개인이 입맛에 맞게 디자인을 수정하거나 커스터마이징 할 필요없이 모든 디자인 컨셉이 잡혀있는 완성형 스킨입니다. 불필요하게 많은 부분을 수정하여 디자인 컨셉이 흐려지지 않도록 유의해주세요.
텍스타일 스킨은 레이아웃 스킨보다 스킨의 코드등이 더 복잡하고 섬세합니다. 스킨에 사용된 기본적인 코드를 임의로 수정해서 발생하는 문제들은 일체 기술지원에 포함되지 않습니다.
이 스킨을 텍스타일 허브등을 이용하여 다른 이용자에게 분양하는 경우에는 분양형 멀티 라이센스에 해당됩니다.
Platinum 영리 멤버쉽의 경우는 분양형 멀티 라이센스를 사용할수 있습니다.

싱글 라이센스(영리/비영리 구분없음) : 150,000원
분양형 멀티 라이센스 : 800,000원

라이센스 구입을 원하시는 분께서는 아래의 계좌로 비용을 입금 하신 후, clubnb2@naver.com으로 입금확인 메일을 보내주세요. 메일에는 본인 아이디, 입금자명, 스킨명, 라이센스 형태 4가지를 꼭 기재해 주셔야 합니다. 비용 지불이 확인되면 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [업데이트 및 다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

PayPal을 이용해 결제를 원하시는 해외 이용자분께서는 위의 4가지 항목에 추가로 자신의 PayPal 이메일 주소를 함께 기입하여 이메일로 보내주시면 Request Money로 청구메일이 가게 됩니다. 입금이 확인되면 마찬가지로 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [업데이트 및 다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

위 이메일 주소로는 일체 문의내용을 받지 않습니다. 별도의 문의사항이 있으신 경우에는 문의사항 코너를 이용해 주시기 바랍니다.

국민은행 036102-04-168370 정현화

PXE Photoware

2009-11-16T07:22:47+09:00

PXE Photoware는 사진과 관련된 업종에 종사하는 분들을 위한 포토갤러리 전용 레이아웃입니다. 이 레이아웃을 이용하면 해외 유명 포토그래퍼들의 블로그나 개인 웹사이트의 최신 트랜드와 경쟁할 수 있을 정도의 하이엔드급 디자인을 제공합니다.

본문부 다단 가변설정을 통해 포탈, 블로그, 일반 사이트등에서 사용하는 모든 단 구성을 관리자 화면에서 설정할 수 있습니다
사이트를 구성하는 모든 요소들의 너비(사이트 전체, 헤더, 사이드바, 푸터 너비 등)을 손쉽게 변경할 수 있습니다
4차 풀다운 메뉴를 메인메뉴와 연결하여 마우스 오버 형식으로 표시할 수 있습니다
3차 세로형 메뉴를 사용할수 있습니다
2가지의 컨텐츠단 구성형식을 선택할 수 있습니다. 배경 마진이 있는 형태와 없는 형태입니다. 이 레이아웃에서는 기본적으로 배경 마진이 없는 형태를 사용하는 것이 좋습니다
마우스 토글에 따라 추가 옵션 위젯영역단이 슬라이드 되어 보여집니다
기본 로그인 기능과 팝업 로그인 기능이 모두 있어 원하는 기능을 선택해서 사용할수 있습니다
하단부에 1단계형 메뉴를 사용할수 있습니다
PXE Gallery Widget의 기능을 사용한 최근 이미지 위젯이 PXE Photoware 레이아웃 전용으로 포함되어 제공됩니다
최근 게시물 및 최근 댓글 위젯이 PXE Photoware 레이아웃 전용으로 포함되어 제공됩니다
로그인 위젯이 PXE Photoware 레이아웃 전용으로 포함되어 제공됩니다
모든 메뉴는 이미지 메뉴를 사용해도 위치나 정렬이 흐트러지지 않도록 CSS로 포지셔닝 되어있습니다
위에 기재된 모든 기능은 별도의 파일 수정없이 모두 관리자 페이지에서 마우스 클릭만으로 설정할수 있습니다

PXE Photoware는 총 3개의 컬러셋을 가지고 있으며 이 컬러셋들은 단순히 색상만 변경시키는 것에 그치지 않고 마치 1개의 컬러셋만을 위해 제작된듯이 각 메뉴등과 같은 요소들이 컬러셋에 잘 녹아 들어있습니다

1. 압축을 풀어 나온 PXE_photoware폴더를 귀하의 layouts 폴더에 넣은 후 서버에 업로드 해주세요.

XE가 설치 된 폴더 > layouts > PXE_Photoware

2. 관리자로 접속하여 사이트 설정 > 레이아웃에서 생성 버튼을 눌러 PXE 포토웨어 레이아웃을 선택 한 후 레이아웃으로 등록합니다.

3. 게시판등의 모듈에서 PXE 포토웨어 레이아웃을 연결합니다

1. 사이트 단 구성 선택
사이트의 본문부를 몇 단으로 구성 할 것인지 관리자 화면에서 설정 할 수 있습니다. 총 6가지의 설정을 아래의 그림을 참조하여 선택하세요.

2. 사이트 기본 환경 설정 확인
위의 단 구성을 선택했다면 이제 다른 설정항목들은 일단 전부 무시하고 게시판에 연결하여 레이아웃을 띄워보세요. 별다른 항목들을 입력하지 않아도 기본 구성이 되어진 레이아웃이 나타나게 됩니다. 너비는 기본크기인 1094px에 맞춰져 있습니다.

레이아웃을 설치하고 나면 맨 위의 샘플 이미지와 완전히 동일한 화면이 나타나는 것은 아닙니다. 화면에 보면 사용자 정의 공간 1과 같은 형태로 사용자가 해당 공간을 자유롭게 이용할 수 있도록 비워놓은 공간들이 있습니다. 이 공간에 자신이 원하는 위젯이나 혹은 이미지들로 정보를 채워나가면 됩니다.

3. PXE Photoware 전용 위젯 설치

다운로드 받은 파일의 압축을 풀어 widgets 폴더를 서버에 업로드 합니다. 최근 이미지, 최근 게시물, 최근 댓글, 로그인 위젯까지 총 4종류의 위젯이 있습니다.

4. jQuery 플러그인과 스크립트 코드 활성화

위젯이 서버에 업로드 되었으면 관리자로 접속합니다. 사이트 설정 > 레이아웃에 들어가서 PXE Photoware 레이아웃의 설정화면에서 아래 이미지와 같이 헤더 스크립트 영역에 코드를 넣어야 합니다.

코드는 다음과 같습니다
<script type='text/javascript' src='widgets/newest_images/skins/PXE_official_photoware/js/jquery.tooltip.js'></script>
<script type='text/javascript' src='widgets/newest_images/skins/PXE_official_photoware/js/global.js'></script>

주의! : PXE Board Pro 2는 이미 동일한 jQuery 플러그인에 대한 환경설정이 되어 있습니다. 동일한 설정이 중복되면 충돌현상이 발생하므로 PXE Board Pro 2를 사용하는 레이아웃에는 위의 코드를 추가하지 말고 사용하시기 바랍니다. 이 부분의 설명이 난해하게 느껴진다면 여기를 클릭하여 다른분이 질문하신 내용에 대한 답변을 확인해보면 쉽게 이해가 갑니다.

5. 위젯 위치시키기

PXE Photoware에는 상단 토글 영역에 3개의 위젯 영역, 하단부에 4개의 위젯 영역 총 7개가 준비되어 있습니다. 여기서 로그인과 검색창이 2개의 상단 토글 영역에 이미 자리잡고 있기 때문에 이 이외의 5개의 위젯 영역을 여러분이 원하는대로 꾸밀 수 있습니다. 위젯 코드생성을 통해 발생한 코드를 layout.html 파일을 열어 추가 위젯 영역 1과 같이 적혀 있는 부분에 붙여 넣으시면 됩니다.

6. 최근 이미지 위젯을 사용하여 마우스 오버 미리보기 이미지 및 라벨 사용하기

PXE Photoware 레이아웃에는 PXE Gallery Widget의 기능을 가진 최근 이미지 위젯이 있습니다. 이 위젯을 100% 활용하는 방법은 여기를 클릭하여 참고하세요. PXE Gallery Widget과 사용방법이 동일합니다.

최근 이미지 위젯과 PXE Board Pro 2에서 사용하는 겔러리 보기 형식의 jQuery가 충돌하지 않으려면 반드시 위에서 설명한 주의사항을 염두해 주세요.
샘플 화면에 나타나는 위젯등은 정식 등록자에 한해 모두 무료로 배포되고 있습니다

이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
일부 IE6에서 토글 영역의 로그인 박스에서 로그인 박스가 좁아지고 로그아웃 버튼이 이상한 곳에 위치하는 CSS 버그가 있습니다. 이러한 버그가 나타나는 IE6 이용자분들로부터 피드백을 받고 있는 중이며 곧 수정 될 내용입니다

비영리 라이센스 : 40,000원
영리 라이센스 : 150,000원

PXE Tab Widget Part 1

2009-10-06T21:59:02+09:00

PXE Sky와 PXE Leaflet Pro 레이아웃의 샘플 화면에 사용된 탭 방식 최근글 위젯입니다

본 위젯은 샘플용 위젯으로서, 흰 색 계열 1개의 컬러셋으로만 구성되어 있습니다

1. 압축을 풀어 나온 tab_pxe_01 폴더를 귀하의 widgets\tab_newest_document\skins 폴더에 넣은 후 서버에 업로드 해주세요.

XE가 설치 된 폴더 > widgets > webzine >skins > tab_pxe_01
2. 관리자로 접속하여 사이트 설정 > 위젯 > 탭 방식 최근 문서 출력에서 코드생성 버튼을 눌러 PXE Tab 형식 최근글 스킨 파트 1을 선택 한 후 세부사항을 설정합니다.

이 위젯은 샘플 위젯으로서 몇가지 부분은 이용자의 코드 수정이 필요한 경우가 있습니다. 기본적으로는 목록이 5개가 출력 될때 제대로 보이게 되어 있으며, 만일 목록수를 늘리게 될 경우에는 css/normal.css에서 .PXE_tab_01{ position:relative; height:160px; } 부분의 파란색 코드의 수치를 높여 위젯의 높이를 전체적으로 올려줘야 합니다.
이 위젯은 탭 부분을 이미지로 사용하고 있기 때문에 탭에 적히는 부분의 모듈 제목이 길어지게 되면 탭 영역을 벗어나게 됩니다. 모듈 이름은 항상 탭을 넘지 않도록 짧게 지정하십시오.
위젯 특성상 글 제목만 표기되도록 되어 있으니 조회수와 추천수는 표시로 설정하셔도 화면에는 표시되지 않습니다.
이 위젯은 업데이트 및 다운로드 코너에서는 다운로드 링크가 없습니다. 직접 PXE Sky와 PXE Leaflet Pro를 다운로드 받는 페이지로 이동하셔서 다운로드 해주세요.

이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
아직까지 알려진 문제점이 없습니다

무료

PXE Leaflet Pro

2009-10-06T21:44:28+09:00

PXE Leaflet Pro는 PXE Leaflet Lite의 모체가 되는 기능 강화판으로서, PXE Sky의 본문부 가변형 다단 기능이 포함된 프리미엄 레이아웃 입니다. 이 레이아웃이 온라인에서 어떻게 작동하는지 보려면 여기를 클릭해서 살펴보세요

넓은 리플릿 영역과 좁은 리플릿 영역을 설정하는 리플릿 스타일링 기능이 있습니다
리플릿 영역을 왼쪽이나 오른쪽에 위치시킬 수 있고, 혹은 사용하지 않음으로 설정할수도 있습니다
좁은 리플릿 영역을 설정하는 경우 4단계 세로메뉴인 위치표시기를 출력할수 있습니다
리플릿 영역은 배너를 적용하여 링크시킬수도 있습니다
PXE Sky의 주력 기능인 본문부 다단 가변설정을 통해 포탈, 블로그, 일반 사이트등에서 사용하는 모든 단 구성을 관리자 화면에서 설정할 수 있습니다
사이트를 구성하는 모든 요소들의 너비(사이트 전체, 헤더, 사이드바, 푸터 너비 등)을 손쉽게 변경할 수 있습니다
1단계 메인메뉴를 상단에 표시할 수 있습니다
2차 하위메뉴를 메인 메뉴 하단에 표시할 수 있습니다(샘플에서는 보여지지 않고 있습니다만 아주 예쁘게 자리를 잡아 놓았습니다)
아주 예쁘고 깔끔한 3차 세로메뉴를 사이드바에 표시할 수 있습니다. 이 메뉴는 사이드바의 폭에 따라 너비가 자동으로 조정됩니다
4차 풀다운 메뉴를 메인메뉴와 연결하여 마우스 오버 형식으로 표시할 수 있습니다
2가지의 컨텐츠단 구성형식을 선택할 수 있습니다. 배경 마진이 있는 형태와 없는 형태입니다. 이 레이아웃에서는 기본적으로 배경 마진이 없는 형태를 사용하는 것이 좋습니다
하단 좌측에 하단메뉴와 상호등을 넣을 수 있으며 우측에도 엑스트라 메뉴가 존재합니다
모든 메뉴는 이미지 메뉴를 사용해도 위치나 정렬이 흐트러지지 않도록 CSS로 포지셔닝 되어있습니다
PXE Board Pro 2의 말끔한 서체 기능과 함께 사용하면 사이트 전체 메뉴 및 항목을 모두 이미지화 할 수도 있습니다
위에 기재된 모든 기능은 별도의 파일 수정없이 모두 관리자 페이지에서 마우스 클릭만으로 설정할수 있습니다
포토샵 레이아웃 소스와 함께 메뉴등과 같은 소스 파일들이 포함되어 있습니다

PXE Leaflet Pro는 흰 색 계열의 스카이 블루와 검은 색 계열의 코코아 블랙 두가지의 컬러셋이 있습니다

1. 압축을 풀어 나온 PXE_leaflet_pro폴더를 귀하의 layouts 폴더에 넣은 후 서버에 업로드 해주세요. 레이아웃의 기본 사용법을 알고 싶다면 XE 동영상 메뉴얼을 참조하시기 바랍니다.

XE가 설치 된 폴더 > layouts > PXE_leaflet_pro

2. 관리자로 접속하여 사이트 설정 > 레이아웃에서 생성 버튼을 눌러 PXE 리플릿 프로 레이아웃을 선택 한 후 레이아웃으로 등록합니다.

3. 게시판등의 모듈에서 PXE 리플릿 프로 레이아웃을 연결합니다

본 레이아웃은 PXE Leaflet Lite 버전을 통해 대부분의 메이저 버그가 이미 수정된 안정화(Stable) 레이아웃입니다
샘플 화면에 나타나는 위젯등은 정식 등록자에 한해 모두 무료로 추가 배포되고 있습니다

이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
아직까지 알려진 문제점이 없습니다

비영리 라이센스 : 40,000원
영리 라이센스 : 150,000원

라이센스 구입을 원하시는 분께서는 아래의 계좌로 비용을 입금 하신 후, clubnb2@naver.com으로 입금확인 메일을 보내주세요. 메일에는 본인 아이디, 입금자명, 스킨명, 라이센스 형태 4가지를 꼭 기재해 주셔야 합니다. 비용 지불이 확인되면 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [업데이트 및 다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

PayPal을 이용해 결제를 원하시는 해외 이용자분께서는 위의 4가지 항목에 추가로 자신의 PayPal 이메일 주소를 함께 기입하시면 Request Money로 청구메일이 가게 됩니다. 입금이 확인되면 마찬가지로 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [업데이트 및 다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

위 이메일 주소로는 일체 문의내용을 받지 않습니다. 별도의 문의사항이 있으신 경우에는 문의사항 코너를 이용해 주시기 바랍니다.

국민은행 036102-04-168370 정현화

PXE Leaflet Lite

2009-09-25T18:26:14+09:00

PXE Leaflet Lite는 NHN deView 공식 사이트와 같이 3단 접지 전단지 디자인을 모티브로 한 2단 구성 레이아웃입니다. 리플릿 영역의 너비를 2가지중에 선택하여 메인 화면과 서브 화면으로 구성할 수 있으며, 좁은 폭 리플렛 영역에는 3단계 세로메뉴를 출력 시킬 수 있습니다.

이 레이아웃이 온라인에서 어떻게 작동하는지 보려면 여기를 클릭해서 살펴보세요

리플렛 영역(왼편에 띠가 둘러쳐져 있는 영역)을 메인 화면용 넓은 단과 서브 화면용 좁은 단으로 선택하여 사용할 수 있습니다
좁은 단 리플렛 영역으로 선택할 경우 3단계 세로메뉴를 출력시킬수 있습니다
리플릿 영역에는 배너 이미지를 첨부하여 링크할수 있습니다
게시판등이 뿌려지는 컨텐츠 영역에 마진 여백이 있는 형태와 없는 형태를 선택할수 있습니다

PXE Leaflet Lite는 스카이 블루와 코코아 블랙 2가지의 컬러셋이 있습니다.

1. 압축을 풀어 나온 PXE_leaflet_lite 폴더를 귀하의 layouts 폴더에 넣은 후 서버에 업로드 해주세요. 레이아웃의 기본 사용법을 알고 싶다면 XE 동영상 메뉴얼을 참조하시기 바랍니다.

XE가 설치 된 폴더 > layouts > PXE_leaflet_lite
2. 관리자로 접속하여 사이트 설정 > 레이아웃에서 생성 버튼을 눌러 PXE 리플릿 라이트를 선택 한 후 레이아웃으로 등록합니다.

3. 게시판등의 모듈에서 PXE 리플릿 라이트 레이아웃을 연결합니다

일반적인 다른 레이아웃들과 설정상의 큰 변화는 없습니다. XE에서 제공하는 레이아웃들의 설정을 아시는 분들은 손쉽게 필요 항목들을 끄거나 켜서 설정하실 수 있습니다.

이 레이아웃은 무료 배포판으로서 버그나 오류 수정 이외에 팁, 응용방법등에 대한 일체의 기술지원이 없습니다.
이 레이아웃은 Premiumxe.com에서 다운로드하거나 관리하지 않고 XE의 새로운 다운로드 자료실에서 관리되고 패치됩니다.
이 레이아웃의 가장 최신 버전은 여기를 클릭하여 다운로드 받으실 수 있습니다.

이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
아직까지 알려진 문제점이 없습니다

Lisence Free

해비핀 스타일 xeBanner

2009-09-18T17:32:05+09:00

PXE 해비핀 스타일 xeBanner는 XE에서 제공하는 xeBanner를 해피빈 스타일로 출력시켜주는 위젯 스킨입니다. 3개의 배너를 보여줄 수 있으며 각 배너는 이미지와 함께 링크를 제공합니다. 이 위젯이 온라인에서 어떻게 동작하는지 보려면 여기를 클릭하세요.

본래 스카이 블루와 올리브 2개의 컬러셋으로 배포될 예정이었으나 올리브 컬러의 경우 자칫하면 해피빈의 지적저작권을 침해 할 우려가 있어 배포에서 제외시켰습니다. 하지만 고급 유저의 경우 자신이 직접 컬러셋을 만들어 추가하여 사용할 수 있도록 컬러셋 코드는 넣어놓았습니다.

이 위젯을 설치하기 위해서는 먼저 XE에서 xeBanner 위젯을 다운로드 받아야 합니다. 다운로드는 여기를 클릭해서 받으신 후 설치해 주세요. 위젯의 설치도 위 링크에서 제공하고 있으니 참고해 주세요. 아래의 설명은 이 위젯의 스킨을 추가하기 위한 순서입니다.

1. 압축을 풀어 나온 pxeBanner_01 폴더를 귀하의 widgets/xeBanner/skins 폴더에 넣은 후 서버에 업로드 해주세요.

XE가 설치 된 폴더 > widgets > xeBanner > skins > pxeBanner_01
2. 관리자로 접속하여 사이트 설정 > 위젯 > XE Banner에서 코드생성 버튼을 눌러 xeBanner용 PXE 해피빈 스타일 배너를 선택 한 후 세부사항을 설정합니다.

이 위젯 스킨에서 사용되는 배너 이미지를 만드려면 포토샵에서 475*798 사이즈의 이미지를 만들면 됩니다. 먼저 아래의 샘플 이미지를 사용해서 배너 이미지를 넣어보세요.
PXE Sky 레이아웃 사용자의 경우에는 레이아웃 편집 화면에서 코드를 살펴보면 사용자 정의 공간 3(xeBanner등의 위젯)라는 곳이 있습니다. 이곳에 위젯 코드를 넣으시면 샘플 페이지와 동일한 공간에 출력됩니다.

이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
아직까지 알려진 문제점이 없습니다

무료

해피빈 스타일 최근글 위젯

2009-09-18T16:56:22+09:00

PXE 해비핀 스타일 최근글 위젯은 최근 등록 된 게시물을 해피빈의 첫화면과 같이 컨텐츠를 출력시켜주는 웹진형 위젯입니다.

1. 압축을 풀어 나온 webzine_pxe_01 폴더를 귀하의 widgets/webzine/skins 폴더에 넣은 후 서버에 업로드 해주세요.

XE가 설치 된 폴더 > widgets > webzine >skins > webzine_pxe_01
2. 관리자로 접속하여 사이트 설정 > 위젯 > 웹진 형태 최근 문서 출력에서 코드생성 버튼을 눌러 PXE 해피빈 스타일 최근글 스킨을 선택 한 후 세부사항을 설정합니다.

샘플 화면과 동일하게 출력시키고 싶다면 위젯 설정에서 이미지 가로크기를 42px, 이미지 세로크기를 34px로 설정해주세요
가로 이미지 수와 세로 이미지 수가 곧 리스트 항목갯수가 됩니다. 따라서 샘플과 같이 출력하려면 가로 이미지 수를 1로, 세로 이미지 수를 3으로 설정해 주세요
위젯 특성상 글 제목과 글 작성자만 표기되도록 되어 있으니 조회수와 추천수는 표시로 설정하셔도 화면에는 표시되지 않습니다

이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
아직까지 알려진 문제점이 없습니다

무료

PXE Sky

2009-09-17T18:30:03+09:00

PXE Sky는 국내 기업용 웹사이트를 제작하기 위한 다목적 레이아웃입니다. 한가지 테마에 국한되지 않고 수정방법 및 디자이너의 역량에 따라 수많은 장르에 걸쳐 광범위하게 사용 될 수 있는 모던한 한국형 디자인입니다. 이 레이아웃의 샘플로 사용 된 전체적인 구도는 Naver의 해피빈의 방식을 보여주고 있으며 총 6개의 단 구성을 자유롭게 변경하여 서로다른 느낌의 메인 페이지 및 서브 페이지들을 손쉽게 구성 할 수 있습니다.

이 레이아웃은 PXE Black Plain의 단 구조 프로토타입에서 발전 된 형태이기 때문에 PXE Black Plain 사용자 여러분들은 무료로 업그레이드되어 다운로드 받으실 수 있습니다.

이 레이아웃이 온라인에서 어떻게 작동하는지 보려면 여기를 클릭해서 살펴보세요

총 6가지의 단 설정을 통해 포탈, 블로그, 일반 사이트등에서 사용하는 모든 단 구성을 관리자 화면에서 설정할 수 있습니다
사이트를 구성하는 모든 요소들의 너비(사이트 전체, 헤더, 사이드바, 푸터 너비 등)을 손쉽게 변경할 수 있습니다
1단계 메인메뉴를 상단에 표시할 수 있습니다
2차 하위메뉴를 메인 메뉴 하단에 표시할 수 있습니다(샘플에서는 보여지지 않고 있습니다만 아주 예쁘게 자리를 잡아 놓았습니다)
아주 예쁘고 깔끔한 3차 세로메뉴를 사이드바에 표시할 수 있습니다
4차 풀다운 메뉴를 메인메뉴와 연결하여 마우스 오버 형식으로 표시할 수 있습니다
2가지의 컨텐츠단 구성형식을 선택할 수 있습니다. 배경 마진이 있는 형태와 없는 형태입니다.
좌측과 우측으로 나뉘어진 프로모션 영역을 표시할 수 있습니다(샘플에서 상단의 큰 그림 두개가 있는 곳)
하단 좌측에 하단메뉴와 상호등을 넣을 수 있으며 우측에도 엑스트라 메뉴가 존재합니다
해피빈에서와 같은 우측에 조그마한 썸네일이 있고 제목과 코멘트가 있는 웹진형 위젯이 포함됩니다
모든 메뉴는 이미지 메뉴를 사용해도 위치나 정렬이 흐트러지지 않도록 CSS로 포지셔닝 되어있습니다
PXE Board Pro 2의 말끔한 서체 기능과 함께 사용하면 사이트 전체 메뉴 및 항목을 모두 이미지화 할 수도 있습니다
포토샵 레이아웃 소스와 함께 메뉴등과 같은 소스 파일들이 포함되어 있습니다

1. 압축을 풀어 나온 PXE_sky 폴더를 귀하의 layouts 폴더에 넣은 후 서버에 업로드 해주세요. 레이아웃의 기본 사용법을 알고 싶다면 XE 동영상 메뉴얼을 참조하시기 바랍니다.

XE가 설치 된 폴더 > layouts > PXE_sky

2. 관리자로 접속하여 사이트 설정 > 레이아웃에서 생성 버튼을 눌러 PXE 스카이 레이아웃을 선택 한 후 레이아웃으로 등록합니다.

3. 게시판등의 모듈에서 PXE 스카이 레이아웃을 연결합니다

1. 사이트 단 구성 선택
사이트를 몇 단으로 구성 할 것인지 관리자 화면에서 설정 할 수 있습니다. 총 6가지의 설정을 아래의 그림을 참조하여 선택하세요.

2. 사이트 기본 환경 설정 확인
위의 단 구성을 선택했다면 이제 다른 설정항목들은 일단 전부 무시하고 게시판에 연결하여 레이아웃을 띄워보세요. 별다른 항목들을 입력하지 않아도 기본 구성이 되어진 레이아웃이 나타나게 됩니다. 너비는 기본크기인 960px에 맞춰져 있습니다.

샘플 레이이웃의 상단 우측에 사용된 3가지 배너는 xeBanner의 PXE 개량판입니다. 이 위젯은 레이아웃에 포함되어 있지 않고 별도의 위젯으로 등록될 예정입니다. PXE Sky 레이아웃 등록자와 Platinum 멤버쉽 유저는 무료로 다운로드 받으실수 있으며, 이 위젯은 비매품으로서 일반에 판매되지 않습니다.
샘플 레이아웃의 왼편에 있는 탭 방식 위젯 역시 비매품으로서 정식 위젯이 아닌 샘플 레이아웃용 위젯입니다만 PXE Sky와 Platinum 멤버쉽 유저에게는 무료로 다운로드 될 예정입니다.
이 위젯들이 비매품인 이유는, 이용자가 PXE Sky 레이아웃을 이용하여 페이지를 구성할 때 이런 위젯들의 디자인을 어떻게 구성해야 좋을지 영감을 주기 위해 만들어진 인스턴트 위젯이기 때문입니다. 이 위젯들은 기능상의 문제는 없으나 추후 문제가 발생했을때는 기술지원이 없기 때문에 비매품으로 결정되었습니다.

이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
아직까지 알려진 문제점이 없습니다

비영리 라이센스 : 40,000원
영리 라이센스 : 150,000원

라이센스 구입을 원하시는 분께서는 아래의 계좌로 비용을 입금 하신 후, clubnb2@naver.com으로 입금확인 메일을 보내주세요. 메일에는 본인 아이디, 입금자명, 스킨명, 라이센스 형태 4가지를 꼭 기재해 주셔야 합니다. 비용 지불이 확인되면 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [업데이트 및 다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

PayPal을 이용해 결제를 원하시는 해외 이용자분께서는 위의 4가지 항목에 추가로 자신의 PayPal 이메일 주소를 함께 기입하시면 Request Money로 청구메일이 가게 됩니다. 입금이 확인되면 마찬가지로 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [업데이트 및 다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

위 이메일 주소로는 일체 문의내용을 받지 않습니다. 별도의 문의사항이 있으신 경우에는 문의사항 코너를 이용해 주시기 바랍니다.

국민은행 036102-04-168370 정현화

PXE Platinum Public

2009-09-10T21:27:17+09:00

PXE Platinum Public은 백금 질감을 테마로 한 레이아웃 입니다. 디자인이 외국 트랜드를 많이 따랐기 때문에 한글이 많이 사용되는 일반 국내 사이트보다는 개인 포트폴리오나 엔터테인먼트 성향이 강한 분야에 사용하기 유리합니다.(설마 이 레이아웃으로 음식점이나 교회 사이트를 만드려고 하시는 분은 안계시겠죠?)

이 레이아웃은 예전에 PXE 사이트의 공식 레이아웃으로 사용되었습니다.

총 6가지의 단 설정을 통해 포탈, 블로그, 일반 사이트등에서 사용하는 모든 단 구성을 관리자 화면에서 설정할 수 있습니다
사이트를 구성하는 모든 요소들의 너비(사이트 전체, 헤더, 사이드바, 푸터 너비 등)을 손쉽게 변경할 수 있습니다
총 4단계의 Drop-Down 메뉴가 보다 확장성 있는 메뉴 구성을 도와 줍니다
위치표시기 메뉴(세로메뉴)를 사이드바에 출력시키거나 끌 수 있습니다
2가지의 컨텐츠단 구성형식을 선택할 수 있습니다. 배경 마진이 있는 형태와 없는 형태입니다. 추가로 PXE 공식 홈페이지의 대문에 사용 된 시네마틱 형식을 원하시는 분들을 위해 샘플로 "시네마" 형식도 추가해 두었습니다. 하지만 시네마 형식은 단지 샘플일 뿐 여기에 플래쉬등을 넣는 방법등의 레이아웃 외적인 설명이나 기술지원은 없습니다. 또한 샘플 플래쉬등의 소스 역시 포함되어 있지 않습니다

PXE Platinum Public은 단 1개의 테마로만 이루어진 독립 컬러셋입니다.

1. 압축을 풀어 나온 PXE_platinum_public 폴더를 귀하의 layouts 폴더에 넣은 후 서버에 업로드 해주세요. 레이아웃의 기본 사용법을 알고 싶다면 XE 동영상 메뉴얼을 참조하시기 바랍니다.

XE가 설치 된 폴더 > layouts > PXE_platinum_public

2. 관리자로 접속하여 사이트 설정 > 레이아웃에서 생성 버튼을 눌러 PXE 플래티넘 배포판 레이아웃을 선택 한 후 레이아웃으로 등록합니다.

3. 게시판등의 모듈에서 PXE 플래티넘 배포판 레이아웃을 연결합니다

1. 사이트 단 구성 선택
사이트를 몇 단으로 구성 할 것인지 관리자 화면에서 설정 할 수 있습니다. 총 5가지의 설정을 아래의 그림을 참조하여 선택하세요.

2. 사이트 기본 환경 설정 확인
위의 단 구성을 선택했다면 이제 다른 설정항목들은 일단 전부 무시하고 게시판에 연결하여 레이아웃을 띄워보세요. 별다른 항목들을 입력하지 않아도 기본 구성이 되어진 레이아웃이 나타나게 됩니다. 너비는 기본크기인 960px에 맞춰져 있습니다.

이 상태에서 로고, 메뉴, 배너등만 설정 한 후에 사용하시는 것이 일반적인 방법입니다.

이 레이아웃은 PXE 공식 홈페이지에서도 동일한 레이아웃을 사용하고 있으며,본 사이트에서 구현되는 모든 기능은 이 레이아웃에서 모두 표현이 가능합니다. 하지만 본 사이트에서 구현한 기술적인 부분의 질문에 대해서는 일일이 답변해드리지 않음을 유의해 주시기 바랍니다.

이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
버전 1.1 패치로 자잘한 버그들이 수정되고 포토샵 원본 파일이 추가되었습니다 (2010년 6월 17일)

PXE Member Pro 2

2009-08-30T18:15:00+09:00

PXE Member Pro 2는 기존 버전 1의 내부 구조 특히 CSS 부분이 PXE Board Pro 2와 호환을 하도록 변경되었습니다. 외형적인 변경은 거의 없으나 내부 CSS Framework가 변경되었기 때문에 새로운 컬러셋의 추가가 편리하게 되었습니다. 기존 사용자분들은 꼭 업그레이드를 하셔서 앞으로 나올 컬러셋들을 문제없이 사용하실 수 있도록 해주시기 바랍니다. 이 모듈은 현재 PXE 사이트에서 사용되고 있으므로 로그인 후 둘러보시기 바랍니다.

텍스트 이미지의 폰트가 네이버의 나눔고딕으로 변경되었습니다. 텍스트 이미지를 포토샵에서 변경하고자 하시는 분들은 나눔글꼴을 다운로드 받아 설치하신 후 PSD 원본 소스를 통해 쉽게 내용을 변경하실 수 있습니다.
내부 CSS 구조가 정리되어 새로운 컬러셋이 추가되기 쉽도록 하였습니다.
PXE Board Pro 2와 디자인이 호환되어 컬러셋이 추가될 때 두개의 모듈이 동시에 추가될 수 있도록 하였습니다.
PXE Super Screen과 같은 좁은 폭의 레이아웃에서도 사용할 수 있습니다.
검은색 컬러셋이 추가되었습니다.

PXE Member Pro 2는 현재 2개의 컬러셋이 있습니다

흰 색 컬러셋
검은 색 컬러셋

압축을 풀어 나온 PXE_member_pro2_package 폴더에서 다음 2개의 폴더를 아래의 위치에 복사해 주세요.

PXE_member_pro2 폴더를 아래의 위치에 복사합니다
XE가 설치 된 폴더/modules/member/skins/PXE_member_pro2
PXE_community_pro2 폴더를 아래의 위치에 복사합니다
XE가 설치 된 폴더/modules/communication/skins/PXE_community_pro2
XE 관리자 페이지로 접속하여 회원 관리 > 기본설정에서 "PXE Member Pro 2" 를 선택하고 원하는 컬러셋으로 결정합니다. 또, 회원 관리 > 커뮤니케이션에서 "PXE Community Pro 2"를 선택하고 마찬가지로 원하는 컬러셋으로 결정합니다. 일관성을 위해 PXE Member Pro와 동일한 컬러셋으로 맞추는 것을 권장합니다.

이 모듈은 IE6/7/8, 가장 최신의 FireFox, Opera 그리고 Safari에서 테스트 되었습니다
현재 알려진 문제가 없습니다

비영리 라이센스 : 30,000원
영리 라이센스 : 90,000원

라이센스 구입을 원하시는 분께서는 아래의 계좌로 비용을 입금 하신 후, clubnb2@naver.com으로 입금확인 메일을 보내주세요. 메일에는 본인 아이디, 입금자명, 스킨명, 라이센스 형태 4가지를 꼭 기재해 주셔야 합니다. 비용 지불이 확인되면 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

PayPal을 이용해 결제를 원하시는 해외 이용자분께서는 위의 4가지 항목에 추가로 자신의 PayPal 이메일 주소를 함께 기입하시면 Request Money로 청구메일이 가게 됩니다. 입금이 확인되면 마찬가지로 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의 [다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.

위 이메일 주소로는 일체 문의내용을 받지 않습니다. 별도의 문의사항이 있으신 경우에는 문의사항 코너를 이용해 주시기 바랍니다.

국민은행 036102-04-168370 정현화

PXE Board Pro 2

2009-08-26T15:03:14+09:00

PXE Board Pro 2는 XE 1.2.4에서 추가로 제공된 XE Official Skin의 기능과 디자인을 강화한 PXE Board Pro 1의 업그레이드 버전입니다. PXE Board Pro 2는 현재 보고 계시는 페이지에도 적용되어 있으며 Premiumxe.com의 모든 게시판이 PXE Board Pro 2로 구성되어 있습니다. 새롭게 제공되는 Studio Style을 보고 싶다면 여기를 클릭하세요.

다른 브라우저는 물론 IE6에서도 100%의 호환성을 가집니다
모든 디자인 요소 및 기본 HTML/CSS 마크업이 보다 깔끔하고 표준에 맞게 재정비 되었습니다
Clean Type 기능을 이용하여 항목명을 말끔한 이미지 서체로 변경할 수 있습니다
기본 XE Official Skin의 항목명 정렬 및 출력옵션을 기능변경 없이 모두 사용 할 수 있습니다
넣고 싶은 링크에 깔끔한 툴팁을 띄울 수 있습니다
썸네일에 미리보기 이미지를 추가하여 툴팁에서 출력시킬 수 있습니다
제목과 썸네일을 링크화 시켜서 본문보기 페이지가 아닌 다른 URL로 링크시킬 수 있습니다
기본 스타일 3개(리스트, 웹진, 갤러리) 외에 구현이 안되어 있던 블로그 형식이 추가되었고 스튜디오 형식 보기가 새롭게 추가되었습니다. 이 형식은 이제 갤러리 보기에서처럼 양쪽에 마진이 남지않고 정확하게 양쪽 정렬할 수 있게끔 정렬관련 함수 및 jQuery가 추가되었습니다
확장변수는 이제 내용이 들어가 있는 변수만 리스트에 출력시킵니다
썸네일에 라벨을 달아 게시물을 환기시킬 수 있습니다
XpressEditor가 에러없이 제대로 작동합니다. 앞으로 만들어지는 PXE의 레이아웃에서도 이제 default 에디터를 사용하지 않고 XpressEditor를 사용 할 수 있습니다
이미지로 사용된 텍스트들은 Naver의 나눔글꼴을 사용하여, 이용자가 포토샵에서 쉽게 텍스트를 바꿀 수 있도록 하였습니다
스튜디오 형식 보기에서는 썸네일이 첨부되어 있지 않은 게시물은 리스트에서 표시시키지 않습니다. 스펨성 게시글이 달려도 관리자에게만 보이도록 설정되었습니다
스튜디오 형식 보기에서는 중요도가 떨어지는 항목(조회, 추천등)은 사라지고 썸네일에 마우스를 올리면 썸네일 자체에 블록이 나타나며 제목과 등록일등의 간단한 정보만 출력시켜 가독성을 올렸습니다
"이 게시물을..." 옵션을 표시할지 안할지 관리자에서 지정할 수 있으며, 표시하지 않을 경우 자동으로 각 항목들이 버튼으로 출력됩니다
제목 옆에 관리자의 수정/삭제 버튼이 있어 이제 게시물을 수정하기 위해 스크롤을 내려 버튼을 찾아다니지 않아도 됩니다. 목록으로 돌아가기 버튼도 추가 될 예정이었으나 공간의 문제로 이 부분은 다음 패치 때 이루어집니다

PXE Board Pro 2는 현재 4개의 컬러셋이 있습니다.

흰색 컬러셋
검은색 컬러셋
밝은색 바탕용 컬러셋
어두운색 바탕용 컬러셋

압축을 풀어 나온 PXE_board_pro_ver2_package 폴더에서 PXE_board_pro2 폴더를 복사하여 XE가 설치 된 폴더에 알맞게 넣은 후 서버에 업로드 합니다
XE가 설치 된 폴더/modules/board/skins/PXE_board_pro2

XE 관리자 페이지로 접속하여 서비스 관리 > 게시판에서 생성 버튼을 눌러 PXE Board pro 2를 선택하여 생성합니다

1. 라벨과 미리보기 설정하기

PXE Board Pro 2는 버전 1의 기능을 그대로 계승하고 있으며, 할당된 확장 변수 번호도 동일합니다. 기존에 버전 1을 쓰고 계셨던 분들은 별도의 셋팅없이 그대로 라벨과 미리보기가 작동합니다. 아래는 PXE Board Pro 1에 기재된 내용이며 이것은 버전 2에서도 동일합니다.

썸네일에 라벨과 미리보기 기능을 사용하려면 해당 게시판의 확장변수 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계열에서 이미지가 엑박으로 나타나는 현상을 해소시킬 수 있습니다.

이 보드 모듈은 XE 1.2 이상에서 작동합니다 (1.1.5 대응 안함)
이 보드 모듈은 IE6/7/8, 가장 최신의 FireFox, Opera 그리고 Safari에서 테스트 되었습니다
이 보드는 PXE Gallery Widget과 jQuery 플러그인을 공유합니다. 따라서 PXE Gallery Widget과 함께 사용 할 때는 레이아웃 설정의 헤더 부분에 넣는 자바스크립트 코드를 추가하지 말고 사용하시기 바랍니다. 이에 대한 자세한 내용은 PXE Gallery Widget의 설정하기 설명부를 참조해 주시기 바랍니다

비영리 라이센스 : 40,000원
영리 라이센스 : 100,000원

Message XE Naver White Skin

2009-08-23T20:16:31+09:00

이 위젯은 SMS, LMS등의 문자를 전송해주는 모듈인 Message XE의 네이버 스타일 컬러셋 Naver White 입니다. 이 위젯을 사용하면 Message XE의 기본 스킨을 Naver White로 변경 할 수 있습니다. 자세한 내용 및 다운로드는 여기를 클릭해 주세요.

이 위젯은 Message XE 문자발송 기본 모듈이 설치되어 있어야 합니다
이 위젯에 사용 된 UI의 지적저산권은 네이버에 있습니다. 상업적인 용도로 사용되서는 안됩니다
이 스킨은 IE6/7/8, FireFox2/3, Opera, Safari Windows에서 테스트 되었습니다.
이 스킨은 무료 스킨으로서 기술지원이 없으며, 버그나 오류사항에 대한 신고 이외에는 문의사항을 접수받지 않습니다.

보고 된 문제 없음

License Free

PXE Basic Plugin

2009-08-18T09:39:21+09:00

PXE Basic Plugin은 XE에서 새로 배포한 레이아웃 스킨 XE Official Ver.2에 사용된 로그인 Form과 통합 검색창을 기존의 모든 레이아웃에 쉽게 적용시키기 위해 분리한 플러그인입니다. 획기적인 것은 아니지만 Premiumxe.com과 같이 레이아웃을 많이 만드는 작업을 가진 분들이 그간의 불편함을 어느정도 해소 할 수 있는 방법입니다.

기존에 만들어 두었던 레이아웃에 아주 손쉽게 Modal Window 로그인 Form과 통합 검색창을 넣을 수 있습니다.
레이아웃 스킨을 하나 만들때마다 매번 새로 디자인 해야했던 불편함을 플러그인으로 분리시킴으로해서 언제든 쉽게 첨삭이 가능하고 디자인을 새로 만들때도 디자인에 관련된 부분의 코드만 쉽게 찾아 바꿀 수 있어 편리합니다.
수동이지만 위젯과 같이 언제든 기존에 만들어 두었던 Modal Window와 통합 검색창을 추가/삭제하면서 여러 레이아웃에 사용 할 수 있습니다.

압축을 풀어 나온 packages 폴더를 복사하여 적용하고자 하는 레이아웃 폴더안에 넣습니다. 기존에 packages 폴더가 존재하면 덮어쓰기 하면 필요한 파일만 복사가되니 안심하고 덮어쓰세요.
예) /layouts/PXE_blackplain/packages

1. JS와 CSS 로드를 위한 코드 넣기
적용하고자 하는 레이아웃의 layout.html을 열어 상단에 파란색 부분의 코드를 넣어줍니다. 다른 부분들은 샘플이니 신경 안써도 됩니다.


    
    
    


    
    


    


    
    
    
    
    
레이아웃 절대경로에는 반드시 절대경로를 넣어주세요. 이유는 모르겠지만 XE가 JS 파일을 로드 할 때, 레이아웃 폴더의 js 폴더 이외의 다른 곳에 위치한 JS 파일을 로드 할 때는 상대경로가 잘 안먹히는 문제가 보입니다. 따라서 꼭 절대경로를 적어주세요. CSS 파일의 경우는 위 샘플코드와 똑같이 상대경로 그대로 넣어줘도 됩니다.

2. ACCOUNTS 코드 추가 혹은 기존 코드 삭제하기
만일 지금 여러분이 사용하고 있는 레이아웃이 XE에서 제공하는 XE Official Ver.2라면 layout.html을 열어 아래의 코드 부분을 모두 삭제합니다. 지금 추가하려는 코드는 아래 그림과 같이 계정 및 언어설정을 표시하는 부분입니다.

<ul class="account">
               <li class="log">
                
                    <a href="./{getUrl("act','dispMemberLogout')}"><img src="./img/buttonLogout.gif" width="33" height="5" alt="LOGOUT" /></a>
                
                    <a href="./#loginWindow" onclick="jQuery('#loginWindow').css('display','block');" accesskey="L"><img src="./img/buttonLogin.gif" width="25" height="5" alt="LOGIN" /></a>
                
                </li>
                
               <li class="register"><a href="./{getUrl("act','dispMemberSignUpForm')}"><span>Register</span></a></li>
                
               <li class="profile">
                   <button type="button" onclick="jQuery('#memberProfile').toggleClass('active');"><span>Profile</span></button>
                   
                   <div id="memberProfile" class="memberProfile">
                   
                       <button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button>
                       <h2 class="authorName">{$logged_info->nick_name}</h2>
                       <ul>
                            
                            <li><a href="./{getUrl("act',$key,'member_srl','')}">{Context::getLang($val)}</a></li>
                            
                       </ul>
                       <button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button>
                   </div>
                   
               </li>
                
               <li class="language">
               
                   <em class="{$lang_type}"><span>{$lang_supported[$lang_type]}</span></em>
                   <button type="button" class="sLanguage" onclick="jQuery('.language').toggleClass('open'); return false;"><span>Select Language</span></button>
                   <ul class="languageList">
                        
                       <li class="{$key}"><button type="button" onclick="doChangeLangType('{$key}');return false;"><span>{$val}</span></button></li>
                        
                   </ul>
               </li>
           </ul>

이렇게 삭제한 위치에 아래의 코드를 대신 넣어줍니다. PremiumXE에서 새로 코딩한 코드입니다. 만일 위의 코드가 없는 다른 레이아웃이었다면 아래의 코드를 공간이 확보된 곳에 넣어줍니다(조금 긴 위젯코드를 넣는다고 생각하세요).

<ul class="account">
            <li class="log">
                
                    <a href="./{getUrl("act','dispMemberLogout')}"><img src="./packages/basic_plugin/images/buttonLogout.gif" width="33" height="5" alt="LOGOUT" /></a>
                
                    <a href="./#loginWindow" onclick="jQuery('#loginWindow').css('display','block');" accesskey="L"><img src="./packages/basic_plugin/images/buttonLogin.gif" width="25" height="5" alt="LOGIN" /></a>
                
                </li>
                
               <li class="register"><a href="./{getUrl("act','dispMemberSignUpForm')}"><span>Register</span></a></li>
                
               <li class="profile">
                   <button type="button" onclick="jQuery('#memberProfile').toggleClass('active');"><span>Profile</span></button>
                   
                   <div id="memberProfile" class="memberProfile">
                   
                       <button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button>
                       <h2 class="authorName">{$logged_info->nick_name}</h2>
                       <ul>
                            
                            <li><a href="./{getUrl("act',$key,'member_srl','')}">{Context::getLang($val)}</a></li>
                            
                       </ul>
                       <button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button>
                   </div>
                   
               </li>
                
               <li class="language">
               
                   <em class="{$lang_type}"><span>{$lang_supported[$lang_type]}</span></em>
                   <button type="button" class="sLanguage" onclick="jQuery('.language').toggleClass('open'); return false;"><span>Select Language</span></button>
                   <ul class="languageList">
                        
                       <li class="{$key}"><button type="button" onclick="doChangeLangType('{$key}');return false;"><span>{$val}</span></button></li>
                        
                   </ul>
               </li>
           </ul>
            

이제 layout.html의 가장 하단에 아래의 코드를 넣어줍니다. 이 코드는 어차피 숨어있는 코드이기 때문에 위치와 상관없이 알아보기 쉽도록 코드의 맨 마지막 부분에 넣어줍니다. 여러분의 layout.html의 하단부에 이미 이런 코드가 있다면 그것을 모두 삭제한 후에 아래 코드를 넣어주세요.


    {@ $member_config = MemberModel::getMemberConfig(); }
    
    
    
    <div id="loginWindow" class="loginWindow">
    
        <span class="modalWindow"></span>
        <div id="loginLayer" class="loginLayer loginTypeA">
        
            <button type="button" class="close" onclick="document.getElementById('loginWindow').style.display='none'" accesskey="X"><span>Close Login Layer</span></button>

            <form action="" method="post" id="commonLogin" onsubmit="return procFilter(this, login)">
                <input name="user_id" type="text" class="id" id="uid" value="" class="id" onFocus="this.style.backgroundImage='none';" />
                <input name="password" type="password" class="password" id="upw" onFocus="this.style.backgroundImage='none';" /> <input name="" type="submit" value=" " class="submit" />

                <div class="saveIDinfo">
                    <input name="keep_signed" type="checkbox" id="keepA" value="Y" class="inputCheck" onclick="if(this.checked) return confirm('{$lang->about_keep_signed}');"/>
                    <label for="keepA">{$lang->keep_signed}</label>
                </div>
            </form>

            

            <hr noshade="noshade" width="100%" color="#e8e8e8" size="1" />
            <div class="clear"></div>

            <div class="oid_desc"><img src="./packages/basic_plugin/images/oid_desc.gif" alt="" /></div>

            <div class="form_field">
                <form action="./" method="post" id="openidLogin" onsubmit="return procFilter(this, openid_login)">
                    <input name="openid" type="text" class="oid" id="oid" onFocus="this.style.backgroundImage='none';" />
                    <input name="" type="submit" value=" " class="submit_oid" />
                </form>
            </div>
            

            <ul class="help">
                <li class="join"><a href="./{getUrl("act','dispMemberSignUpForm')}">{$lang->cmd_signup}</a></li>
                <li class="find"><a href="./{getUrl("act','dispMemberFindAccount')}">{$lang->cmd_find_member_account}</a></li>
                <li class="find"><a href="./{getUrl("act','dispMemberResendAuthMail')}">{$lang->cmd_resend_auth_mail}</a></li>
            </ul>
            <button type="button" class="close" onclick="document.getElementById('loginWindow').style.display='none'" accesskey="X"><span>Close Login Layer</span></button>
        </div>
    </div>
    


지금까지의 과정이 모두 잘 되었다면 이제 여러분의 페이지에는 새로 적용 된 계정 및 언어선택 부분이 출력됩니다. 앞으로 여러분이 이 부분의 디자인을 고치고 싶다면 packages/basic_plugin 폴더 속의 파일들만 수정하면 됩니다. 또한 수정된 파일들을 다른 레이아웃에도 적용하고 싶다면 packages/basic_plugin 폴더를 다른 레이아웃 폴더속에 복사하여 위의 코드 추가/삭제 과정을 거쳐 쉽게 사용할수 있습니다.

3. 통합 검색창 코드 추가하기
아래 그림과 같이 통합 검색창 역시 플러그인으로 분리시켜 놓았기 때문에 쉽게 디자인을 변경 할 수 있고 이것을 여러 레이아웃에 손쉽게 붙여 넣을 수 있습니다. 기존의 통합 검색창 코드 부분을 삭제하고 아래의 코드를 대신 넣어보세요. 깔끔한 통합 검색창이 쉽게 추가 됩니다.


        <div id="searchLanguage">
            <form action="{getUrl()}" method="post" id="isSearch">
            <input type="hidden" name="mid" value="{$mid}" />
            <input type="hidden" name="act" value="IS" />
            <input type="hidden" name="search_target" value="title_content" />
           <input name="is_keyword" type="text" class="inputText" title="keyword" />
            <input type="image" src="./packages/basic_plugin/images/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" />
            </form>
        </div>

이 통합 검색창은 부유 엘리먼트 즉 position:absolute를 사용합니다. 따라서 이 코드를 감싸고 있는 DIV의 position값은 꼭 relative로 설정을 해주세요.

이 플러그인은 XE의 모든 버전에서 작동합니다
이 플러그인은 IE6/7/8, 가장 최신의 FireFox, Opera 그리고 Safari에서 테스트 되었습니다
이 플러그인에 사용된 코드들은 use_this_code.html에도 기재되어 있습니다

Platinum Membership 전용 추가 악세사리