Mh Elegant Accordion 위젯 을 만들기전 테스트용으로 레이아웃에 적용한 방법인데 이 부분만으로도 꽤 쓸모가 있는 것 같아서 Tip으로 남깁니다.
1. 먼저 적용하고 싶은 레이아웃의 layout.html을 편집기로 열어서 {$content}위에 추가합니다.
<include cond="!$li->mwea_use == ''" target="mwea.html" />
{$content}
2. 내려받은 mwea.zip의 압축을 풀어서 mwea.html 와 css/mwea.css, img/bgDescription.png 파일들을 ftp로 적용할 레이아웃에 업로드 합니다.
3. conf/info.xml을 편집기로 열어서 아래와 같이 추가해 줍니다.
<group>
<title xml:lang="ko">아코디언 메뉴</title>
<var name="mwea_use" type="select">
<title xml:lang="ko">상단 아코디언 메뉴 출력</title>
<options value="">
<title xml:lang="ko">출력하지 않음</title>
</options>
<options value="Y">
<title xml:lang="ko">출력</title>
</options>
</var>
<var name="main_height" type="text">
<title xml:lang="ko">슬라이드 높이</title>
<description xml:lang="ko">기본 480px (숫자만)</description>
</var>
<var name="box_width" type="text">
<title xml:lang="ko">슬라이드박스 넓이</title>
<description xml:lang="ko">기본 480px (숫자만)</description>
</var>
<var name="a_width" type="text">
<title xml:lang="ko">책갈피 넓이</title>
<description xml:lang="ko">기본 115px (숫자만)</description>
</var>
<var name="title_height" type="text">
<title xml:lang="ko">제목위치 높이</title>
<description xml:lang="ko">기본 0px (숫자만)</description>
</var>
<var name="text_height" type="text">
<title xml:lang="ko">설명문구 폭 높이</title>
<description xml:lang="ko">기본 130px (숫자만)</description>
</var>
<var name="text_line" type="text">
<title xml:lang="ko">설명문구 줄수</title>
<description xml:lang="ko">기본 3</description>
</var>
<var name="box_line" type="text">
<title xml:lang="ko">박스테두리 칼라</title>
<description xml:lang="ko">기본 #fff</description>
</var>
<var name="shadow_use" type="select">
<title xml:lang="ko">박스 그림자</title>
<options value="">
<title xml:lang="ko">Normal</title>
</options>
<options value="Y">
<title xml:lang="ko">그림자 출력</title>
</options>
</var>
<var name="slide_img0" type="image">
<title xml:lang="ko">배경 이미지</title>
</var>
<var name="slide_bc0" type="text">
<title xml:lang="ko">배경칼라</title>
<description xml:lang="ko">이미지 미등록시 기본색상 #9C4998</description>
</var>
<var name="b_text" type="text">
<title xml:lang="ko">바탕 문구</title>
<description xml:lang="ko">바탕 문구를 입력합니다.</description>
</var>
<var name="b_color" type="text">
<title xml:lang="ko"> ┖ 바탕 문구 컬러</title>
<description xml:lang="ko">바탕 문구 컬러를 선택.(기본 #444)</description>
</var>
<var name="b_size" type="text">
<title xml:lang="ko"> ┖ 바탕 문구 크기</title>
<description xml:lang="ko">바탕 문구 글자의 크기를 설정합니다. (기본값: 2em, css 형식의 사이즈 모두 OK)</description>
</var>
<var name="slide_title4" type="text">
<title xml:lang="ko">슬라이드 제목 4</title>
<description xml:lang="ko">제목4를 등록해야 슬라이드 출력됨</description>
</var>
<var name="slide_img4" type="image">
<title xml:lang="ko">슬라이드 이미지 4</title>
<description xml:lang="ko">우측에서 부터 4번째 이미지</description>
</var>
<var name="slide_bc4" type="text">
<title xml:lang="ko">슬라이드 배경칼라 4</title>
<description xml:lang="ko">이미지 미등록시 기본색상 #5b927d</description>
</var>
<var name="slide_text4" type="textarea">
<title xml:lang="ko">슬라이드 설명 4</title>
</var>
<var name="slide_url4" type="text">
<title xml:lang="ko">슬라이드 more 4</title>
</var>
<var name="slide_title3" type="text">
<title xml:lang="ko">슬라이드 제목 3</title>
<description xml:lang="ko">제목3을 등록해야 슬라이드 출력됨</description>
</var>
<var name="slide_img3" type="image">
<title xml:lang="ko">슬라이드 이미지 3</title>
<description xml:lang="ko">우측에서 부터 3번째 이미지</description>
</var>
<var name="slide_bc3" type="text">
<title xml:lang="ko">슬라이드 배경칼라 3</title>
<description xml:lang="ko">이미지 미등록시 기본색상 #a8ae7e</description>
</var>
<var name="slide_text3" type="textarea">
<title xml:lang="ko">슬라이드 설명 3</title>
</var>
<var name="slide_url3" type="text">
<title xml:lang="ko">슬라이드 more 3</title>
</var>
<var name="slide_title2" type="text">
<title xml:lang="ko">슬라이드 제목 2</title>
<description xml:lang="ko">제목2를 등록해야 슬라이드 출력됨</description>
</var>
<var name="slide_img2" type="image">
<title xml:lang="ko">슬라이드 이미지 2</title>
<description xml:lang="ko">우측에서 부터 2번째 이미지</description>
</var>
<var name="slide_bc2" type="text">
<title xml:lang="ko">슬라이드 배경칼라 2</title>
<description xml:lang="ko">이미지 미등록시 기본색상 #f3b96c</description>
</var>
<var name="slide_text2" type="textarea">
<title xml:lang="ko">슬라이드 설명 2</title>
</var>
<var name="slide_url2" type="text">
<title xml:lang="ko">슬라이드 more 2</title>
</var>
<var name="slide_title1" type="text">
<title xml:lang="ko">슬라이드 제목 1</title>
<description xml:lang="ko">제목1을 등록해야 슬라이드 출력됨</description>
</var>
<var name="slide_img1" type="image">
<title xml:lang="ko">슬라이드 이미지 1</title>
<description xml:lang="ko">우측에서 부터 1번째 이미지</description>
</var>
<var name="slide_bc1" type="text">
<title xml:lang="ko">슬라이드 배경칼라 1</title>
<description xml:lang="ko">이미지 미등록시 기본색상 #835531</description>
</var>
<var name="slide_text1" type="textarea">
<title xml:lang="ko">슬라이드 설명 1</title>
</var>
<var name="slide_url1" type="text">
<title xml:lang="ko">슬라이드 more 1</title>
</var>
</group>
<title xml:lang="ko">아코디언 메뉴</title>
<var name="mwea_use" type="select">
<title xml:lang="ko">상단 아코디언 메뉴 출력</title>
<options value="">
<title xml:lang="ko">출력하지 않음</title>
</options>
<options value="Y">
<title xml:lang="ko">출력</title>
</options>
</var>
<var name="main_height" type="text">
<title xml:lang="ko">슬라이드 높이</title>
<description xml:lang="ko">기본 480px (숫자만)</description>
</var>
<var name="box_width" type="text">
<title xml:lang="ko">슬라이드박스 넓이</title>
<description xml:lang="ko">기본 480px (숫자만)</description>
</var>
<var name="a_width" type="text">
<title xml:lang="ko">책갈피 넓이</title>
<description xml:lang="ko">기본 115px (숫자만)</description>
</var>
<var name="title_height" type="text">
<title xml:lang="ko">제목위치 높이</title>
<description xml:lang="ko">기본 0px (숫자만)</description>
</var>
<var name="text_height" type="text">
<title xml:lang="ko">설명문구 폭 높이</title>
<description xml:lang="ko">기본 130px (숫자만)</description>
</var>
<var name="text_line" type="text">
<title xml:lang="ko">설명문구 줄수</title>
<description xml:lang="ko">기본 3</description>
</var>
<var name="box_line" type="text">
<title xml:lang="ko">박스테두리 칼라</title>
<description xml:lang="ko">기본 #fff</description>
</var>
<var name="shadow_use" type="select">
<title xml:lang="ko">박스 그림자</title>
<options value="">
<title xml:lang="ko">Normal</title>
</options>
<options value="Y">
<title xml:lang="ko">그림자 출력</title>
</options>
</var>
<var name="slide_img0" type="image">
<title xml:lang="ko">배경 이미지</title>
</var>
<var name="slide_bc0" type="text">
<title xml:lang="ko">배경칼라</title>
<description xml:lang="ko">이미지 미등록시 기본색상 #9C4998</description>
</var>
<var name="b_text" type="text">
<title xml:lang="ko">바탕 문구</title>
<description xml:lang="ko">바탕 문구를 입력합니다.</description>
</var>
<var name="b_color" type="text">
<title xml:lang="ko"> ┖ 바탕 문구 컬러</title>
<description xml:lang="ko">바탕 문구 컬러를 선택.(기본 #444)</description>
</var>
<var name="b_size" type="text">
<title xml:lang="ko"> ┖ 바탕 문구 크기</title>
<description xml:lang="ko">바탕 문구 글자의 크기를 설정합니다. (기본값: 2em, css 형식의 사이즈 모두 OK)</description>
</var>
<var name="slide_title4" type="text">
<title xml:lang="ko">슬라이드 제목 4</title>
<description xml:lang="ko">제목4를 등록해야 슬라이드 출력됨</description>
</var>
<var name="slide_img4" type="image">
<title xml:lang="ko">슬라이드 이미지 4</title>
<description xml:lang="ko">우측에서 부터 4번째 이미지</description>
</var>
<var name="slide_bc4" type="text">
<title xml:lang="ko">슬라이드 배경칼라 4</title>
<description xml:lang="ko">이미지 미등록시 기본색상 #5b927d</description>
</var>
<var name="slide_text4" type="textarea">
<title xml:lang="ko">슬라이드 설명 4</title>
</var>
<var name="slide_url4" type="text">
<title xml:lang="ko">슬라이드 more 4</title>
</var>
<var name="slide_title3" type="text">
<title xml:lang="ko">슬라이드 제목 3</title>
<description xml:lang="ko">제목3을 등록해야 슬라이드 출력됨</description>
</var>
<var name="slide_img3" type="image">
<title xml:lang="ko">슬라이드 이미지 3</title>
<description xml:lang="ko">우측에서 부터 3번째 이미지</description>
</var>
<var name="slide_bc3" type="text">
<title xml:lang="ko">슬라이드 배경칼라 3</title>
<description xml:lang="ko">이미지 미등록시 기본색상 #a8ae7e</description>
</var>
<var name="slide_text3" type="textarea">
<title xml:lang="ko">슬라이드 설명 3</title>
</var>
<var name="slide_url3" type="text">
<title xml:lang="ko">슬라이드 more 3</title>
</var>
<var name="slide_title2" type="text">
<title xml:lang="ko">슬라이드 제목 2</title>
<description xml:lang="ko">제목2를 등록해야 슬라이드 출력됨</description>
</var>
<var name="slide_img2" type="image">
<title xml:lang="ko">슬라이드 이미지 2</title>
<description xml:lang="ko">우측에서 부터 2번째 이미지</description>
</var>
<var name="slide_bc2" type="text">
<title xml:lang="ko">슬라이드 배경칼라 2</title>
<description xml:lang="ko">이미지 미등록시 기본색상 #f3b96c</description>
</var>
<var name="slide_text2" type="textarea">
<title xml:lang="ko">슬라이드 설명 2</title>
</var>
<var name="slide_url2" type="text">
<title xml:lang="ko">슬라이드 more 2</title>
</var>
<var name="slide_title1" type="text">
<title xml:lang="ko">슬라이드 제목 1</title>
<description xml:lang="ko">제목1을 등록해야 슬라이드 출력됨</description>
</var>
<var name="slide_img1" type="image">
<title xml:lang="ko">슬라이드 이미지 1</title>
<description xml:lang="ko">우측에서 부터 1번째 이미지</description>
</var>
<var name="slide_bc1" type="text">
<title xml:lang="ko">슬라이드 배경칼라 1</title>
<description xml:lang="ko">이미지 미등록시 기본색상 #835531</description>
</var>
<var name="slide_text1" type="textarea">
<title xml:lang="ko">슬라이드 설명 1</title>
</var>
<var name="slide_url1" type="text">
<title xml:lang="ko">슬라이드 more 1</title>
</var>
</group>
3. 적용할 이미지들의 세로높이를 슬라이드 높이(480ox)와 같이 만들거나 아님 10~20px정도 작게 만들어서 올리면 됩니다. 작게 만드는 이유는 이미지 아래에 배경색이 살짝 보이게 하기 위해서... 그렇게 하니 예뼈서^.^