JB White.Simple Layout V1.1 설정 메뉴얼

백그라운드 이미지 설정

백그라운드 이미지 등록

레이아웃 배경으로 이미지를 사용할 수 있습니다.

사용하고자 하는 이미지를 등록 하시면 출력 됩니다.

백그라운드 이미지 반복 설정

레이아웃 배경으로 이미지를 사용시 반복 여부를 설정 할 수 있습니다.

반복되는 이미지를 사용할 지 하나의 큰 이미지를 사용할 지 선택하여 사용하시면 됩니다. 반복 설정을 "반복없음"으로 선택 시 이미지는 중앙 정렬로 맞춰 집니다.

백그라운드 컬러 설정

레이아웃 배경으로 이미지를 사용하지 않으신다면 컬러를 사용 할 수 있으며 컬러코드값을 입력 하시면 됩니다. 기본 배경 컬러값으로는 "#111" 값이 적용 되어 있습니다.

레이아웃 컬러셋 세부 설정

레이아웃의 컬러셋을 html 색상 코드로 자유롭게 설정 할 수 있습니다.

메인메뉴바 색상에서 부터 통합검색, 서브메뉴 등 지정한 컬러셋으로 설정 됩니다.

좋아하는 색상 코드를 입력 해 보세요. (예: #f99511, #0000ff 형태로 입력합니다.)

메인 메뉴바에 컬러셋 색상외 추가로 배경 이미지를 설정 할 수 있습니다.

가로로 반복 될 수 있는 이미지를 사용하시고 높이는 40px로 맞추어 주시면 됩니다.

샘플 이미지가 JB_white_simple/img/Sample_MenuBG 안에 들어있습니다.

(파일설명: orange_fcae07.gif 파일은 오렌지 컬러 스타일이며 레이아웃 컬러코드값은 #fcae07 이라는 뜻으로 이름을 입력 해 놓았습니다.)

레이아웃의 컬러셋과 별도로 콘텐츠영역 즉, 페이지나 게시판출력으로 사용되는 부분의 배경 컬러셋을 설정 할 수 있습니다.

블랙, 화이트 두 가지의 컬러셋을 지원합니다.

레이아웃 상단 영역에 배경 이미지를 사용할 수 있습니다.

웹사이트 테마에 맞는 이미지를 등록 하시면 됩니다.

세로 사이즈는 190px 로 맞춰 주시면 됩니다.

레이아웃 상단 영역에 배경이미지를 사용 시 반복 여부를 설정 할 수 있습니다.

이미지의 특성에 따라 선택 하여 사용하세요.

"반복없음"으로 사용시 이미지는 중앙정렬로 맞춰 집니다.

레이아웃 상단 영역에 배경이미지 대신 컬러를 사용할 수 있습니다.

컬러코드값을 입력 하시면 됩니다.

레이아웃 바디영역에 배경이미지를 사용 할 수 있습니다.

레이아웃 바디영역에 배경이미지 대신 컬러를 사용 할 수 있습니다.

컬러코드값을 입력 하시면 됩니다.

레이아웃 푸터영역에 배경이미지를 사용 할 수 있습니다.

레이아웃 푸터영역에 배경이미지대신 컬러를 사용 할 수 있습니다.

컬러코드값을 입력 하시면 됩니다.

 레이아웃 전체 부분의 테두리 라인의 컬러를 조절 할 수 있습니다.

컬러코드값을 입력 하시면 됩니다.

로고 이미지 등록

상단에 출력 될 로고 이미지나 타이틀 이미지를 등록하시면 됩니다.

세로 사이즈는 60픽셀로 하시고 투명 PNG 파일을 사용하시길 바랍니다.

언어 선택에 따른 로고 이미지 등록은 다음의 방법으로 하시길 바랍니다.

JB_white_simple/img 폴더에 각 언어설정에 따른 로고이미지 파일을 넣어 주시면 됩니다.

한글 설정일 경우 ko_logo.png

영어 설정일 경우 en_logo.png

일어 설정일 경우 jp_logo.png

이러한 형식으로 로고이미지 파일을 만들어 주시면 됩니다.

상단 로고이미지 출력 및 정렬 설정

상단 로고 이미지의 출력 여부와 정렬( 좌측,중앙,우측)을중 선택하여 사용 하실 수 있습니다.

상단 로고이미지 URL 설정

상단 로고 이미지 클릭시 이동할 URL 주소를 입력 하시면 됩니다.

입력값이 없으면 자동으로 XE가 설치된 도메인으로 설정 됩니다.

오른쪽 하단에 출력 될 로고 이미지를 등록 하시면 됩니다.

세로 사이즈는 40픽셀로 하시고 투명 PNG 파일을 사용하시길 바랍니다.

하단 로고이미지 클릭시 이동할 URL 주소를 입력 하시면 됩니다.

빈칸으로 두시면 자동으로 XE가 설치된 도메인으로 설정 됩니다.

레이아웃 스타일 설정

상단 왼쪽에 출력 될 웹사이트 홍보 문구를 입력 하시면 출력 됩니다.

언어 선택에 따른 다국어 문구 출력 방법

JB_white_simple/plugins/lang 폴더에 기본으로 한글과, 영문 언어팩이 들어있습니다.

각 파일을 열어 타이틀 문구가 출력 되는 부분을 수정하시면 됩니다.

타이틀 문구 용 언어 코드는 $lang->title_text 이며 이부분에 원하시는 문구로 수정 후 저장하시면 됩니다.

레이아웃 넓이를 고정형태로 할 것이진지 꽉 차게(100%) 할 것인지를 선택 할 수 있습니다.

("넓이 100% 형태"를 선택 시 백그라운드 이미지,컬러는 보여지지 않습니다.)

마우스 클릭만으로 웹사이트 구성에 필요한 모든 단을 구성 하실 수 있습니다.

1단형에서부터 3단형까지 총 6개의 단을 자유롭게 사용해 보세요.

(사이드영역은 사이드1, 사이드2라 하며 콘텐츠가 출력되는 부분을 본문이라 칭합니다.)

레이아웃 사이즈를 자유롭게 조절 하실 수 있습니다.

기본 사이즈는 980픽셀이며 원하시는 사이즈의 숫자를 입력 하는 것만으로

사이즈를 조절 할 수 있습니다.

레이아웃 사이즈 뿐만 아니라 사이드 영역의 사이즈 또한 조절 할 수 있습니다.

좌측 사이드영역1의 기본 사이즈는 200픽셀이며 원하시는 사이즈의 숫자를 입력 하시면 됩니다.

우측 사이드영역2의 사이즈를 조절 할 수 있습니다.

우측 사이드영역2의 기본 사이즈는 200픽셀이며 원하시는 사이즈의 숫자를 입력 하시면 됩니다.

1차 메인 메뉴 간격(패딩값)을 설정 할 수 있습니다. 메뉴 개수에 맞춰 자유롭게 조절 하세요.

메뉴수가 많다면 간격을 줄이시고 메뉴수가 적다면 간격을 넓혀 보기 좋게 해주시면 됩니다.

메인 메뉴 마우스 오버시 드롭다운 되는 2차 메뉴의 넓이를 설정 할 수 있습니다.

메뉴 길이에 따라 조절해서 사용 하세요.

사이드 영역에 출력 되는 서브메뉴의 사용여부 및 출력을 선택 할 수 있습니다.

서브메뉴는 1차 메뉴를 제외한 2차 메뉴부터 출력 되며 메뉴를 한눈에 볼 수 있는 오픈형과 마우스 오버시 하위 메뉴가 열리는 슬라이드형을 선택 하실 수 있습니다.

상단 위젯 설정

JB 슬라이드콘텐츠위젯 코드를 입력하면 슬라이드 위젯이 출력 됩니다.

JB 슬라이드콘텐츠 위젯코드 생성 방법

1. 위젯관리로 들어가 JB SliderContent의 코드생성을 누릅니다.

2. 사용하고자 하는 위젯스킨을 선택 후 컬러셋을 선택합니다.

3. 이미지를 추출할 대상모듈을 선택합니다.

4. 이미지 사이즈 설정은 레이아웃 사이즈와 동일한 사이즈로 설정 하셔야 합니다.

5. 기타 설정등을 완료 후 하단에 위치한 "코드생성" 버튼을 눌러 코드를 생성합니다.

6. 생성된 코드를 복사하여 이곳에 붙혀넣기를 하시면 슬라이드위젯이 출력됩니다.

본문 상단에 슬라이드위젯 외 기타 다른 위젯을 추가로 사용 할 수 있습니다.

위젯 출력 여부를 선택하여 사용 할 수 있으며 아래의 위젯 타이틀, 위젯 코드의 값을 출력 합니다.

위젯 사용 설정이 "사용"으로 되어 있어도 아래의 타이틀과 위젯코드값이 입력 되지 않으면 출력 되지 않습니다.

본문 상단에 사용할 위젯의 타이틀을 입력 하시면 출력 됩니다.

본문 상단에 사용할 위젯코드를 입력 하시면 출력 됩니다.

좌측 사이드영역1 위젯 설정

좌측 사이드영역의 위젯 사용 여부를 설정 할 수 있으며 테두리 사용여부 또한 설정 할 수 있습니다.

테두리를 사용으로 선택하면 테두리를 출력되며 8px 패딩값과 백그라운드컬러가 적용됩니다.

# 위젯 사용을 "사용안함"으로 하시면 위젯코드가 입력되어 있더라도 출력 하지 않습니다.

#또 "사용"으로 되어있어도 위젯타이틀, 위젯코드의 입력값이 없으면 출력 하지 않습니다.

위젯의 타이틀로 사용할 이름을 입력 하시면 됩니다.

입력값이 없으면 출력 되지 않습니다. 타이틀을 필요로 하지 않는 위젯 사용시 비워 두시길 바랍니다.

위젯코드를 생성하여 이 곳에 붙혀넣기를 하시면 출력 됩니다.

사이드영역에 이미지로 만든 아이콘등을 출력 하는 방법입니다.

1. 이미지를 만듭니다. 사이즈는 사이드영역 사이즈와 동일해야겠죠? 위젯 테두리를 사용한다면 사이드영역 사이즈에서 8px를 뺀 사이즈로 하시면 됩니다.

2. 이미지를 FTP로 업로드를 합니다. (예: xe/JB_white_simple/img 폴더에 aaa.jpg 파일을 업로드 시)

3. 위젯코드 입력란에 FTP로 올려놓은 이미지를 출력 할 수 있도록 HTML 코드인 IMG 코드를 사용하면 됩니다.

<img src="xe/layouts/JB_white_simple/img/aaa.jpg" alt="" /> 이런 식으로 XE의폴더에서부터 경로를 적어야 합니다.

4. 이미지 클릭시 이동해야 할 주소가 있다면 앞에 <a href="> 코드를사용하시면 되겠습니다.

우측 사이드영역2 위젯 설정

우측 사이드영역2의 위젯 사용 여부를 설정 하시면 됩니다. (좌측 사이드영역1 위셋 사용 방법과 동일)

위젯 타이틀을 입력하시면 됩니다. (사이드영역1 위셋 사용 방법과 동일)

위젯코드를 입력 하시면 됩니다. (사이드영역1 위셋 사용 방법과 동일)

하단영역 위젯 설정

하단 영역의 위젯 사용 여부를 설정 하시면 됩니다. (사이드영역1 위셋 사용 방법과 동일)

하단 영역의 위젯은 가로형으로 출력 됩니다.

위젯 출력 시 가로로 몇개의 위젯을 사용할지 설정 할 수 있으며 출력 개수에 따라 위젯 넓이가 자동으로 설정 됩니다.

하단 영역에 출력 될 위젯 타이틀을 입력하시면 됩니다. (사이드영역1 위셋 사용 방법과 동일)

하단 영역에 출력 될 위젯코드를 입력 하시면 됩니다. (사이드영역1 위셋 사용 방법과 동일)

소셜네트워크 설정

소셜네트워크 사용 여부를 선택 합니다.

트위터, 페이스북, 미투데이 등... 퀵링크를 지원하여 자신의 소셜사이트를 홍보할 수 있습니다.

자신의 소셜 사이트의 URL을 입력하시면 아이콘이 출력 됩니다.

부가 기능 설정

현재 메뉴의 위치를 알려주는 위치 출력기 사용 여부를 설정 할 수 있으며 상단,하단,상하단,하단위젯위등 여러가지 형태의 출력을 선택적으로 사용 할 수 있습니다.

서비스맵은 본문 하단에 서비스맵 버튼이 출력 되며 버튼 클릭시 전체메뉴를 한눈에 볼 수 있도록 슬라이드형태로 보여줍니다.

다국어 지원 여부를 선택 합니다.

다국어 설정 방법 안내

WhiteSimple 레이아웃은 XE Core에 내장되어있는 언어 설정 외 추가 언어를 사용 할 수 있도록 되어있습니다.

언어 설정 파일은 JB_white_simple/plugins/lang 폴더 안에 있으며 각 언어 파일들의 설정을 사용 함으로서 다양한 언어팩을 사용 하실 수 있습니다.

IE계열에서도 라운드 테두리를 설정 할 수 있습니다. 본문, 위젯 등 부분적으로 라운드 테두리가 적용 됩니다. 

#유의 할 점

IE 계열에서는 라운드 테두리 설정이 되어있을 경우 본문 콘텐츠 영역에 위젯 사용시 본문 영역의 크기가 위젯 크기에 따라 변하지 않을 수 있습니다.

이럴 경우 라운드 테두리를 끄고 설정을 하신 후 다시 라운드 설정을 해 주시면 됩니다.

하단에 출력 되는 저작권 정보를 입력하시면 됩니다. 줄 바꿈은 <br /> 태그를 활용 하시면 됩니다.

언어 선택에 따른 저작권 정보 출력 방법

JB_white_simple/plugins/lang 폴더에 있는 언어 설정 파일에서 $lang->copyright 부분을 수정 하시면 됩니다.

하단 저작권 정보 밑에 출력되는 피드백용 이메일 주소를 입력 하면 됩니다. 입력값이 없으면 출력 하지 않습니다.

XE의 회원가입양식이 화이트 바탕을 기준을 두고 있기 때문에 블랙 컬러셋을 사용할 경우 회원가입양식이 잘 보이지 않을 수 있습니다.

따라서 회원가입전용 레이아웃을 설정 하여 회원가입시 지정해 둔 레이아웃을 사용함으로서 이러한 문제를 해결 할 수 있습니다.

회원 가입용 레이아웃 설정 방법

1. 레이아웃을 하나 더 생성하시고 이름을 "회원가입용" 으로 하고 컬러셋을 화이트로 합니다.

2. 새로운 페이지를 만듭니다. 페이지 이름은 "signup"으로 하고 레이아웃은 회원가입용으로 만든 레이아웃을 선택합니다.

3. 이곳에 페이지 이름을 입력합니다. (예: signup )

최 상단에 사용할 메뉴를 연결 시켜 주면 출력 됩니다. (로그인 버튼 옆에 출력 됩니다.)

상단 메인 메뉴로 사용되는 메뉴를 연결 시켜 주시면 됩니다.

하단에 사용할 메뉴를 연결 시켜 주시면 됩니다.