You cannot see this page without javascript.

Xedition edited by Kim Tajo 수정 버전 반응형 위젯 스킨 구현하기

by 르미 posted Sep 25, 2018
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

1. 

XE 반응형 스킨

을 사용하려고 XpressEngine에 게재된 여러 무료 위젯을 시험했으나

회사 홈페이지에 적합한 것은 유료이거나

제약 사항이 많은 것들이있다.

 

 

2.

결론은 XE 오리지날 demo 버전이 여러모로 적합하고 좋았는데,

main 화면모드의 콘텐츠 위젯 가운데 정렬이 어려웠다.

다행히 레이아웃 설정 메뉴의 contents-width 설정을

고정폭으로 설정해서 해결하였지만, 

여전히 다른 부분의 컨트롤이 어려워

[참고-클릭] XEDITION 메인 화면 레이아웃 가운데 정렬(중앙 정렬) 해결 방법을 찾다 (LINUX CENTOS 7, APACHE, MYSQL)

 

 

3. 

데모버전의 각 파트별 사용자 설정이 가능하게 만든

김타조님의 수정버전을 사용하게 되었다.

하지만 이 버전 역시 main 화면모드의 콘텐츠 위젯 가운데 정렬이 어려웠는데,

다른 분들의 여러가지 해결방법이 도움이 되어

layout.html의 contents width 부분의 설정을 간단하게 바꾸어 해결하였다.

[참고-클릭] XEDITION edited by Kim Tajo 메인 화면 레이아웃 가운데 정렬(중앙 정렬) 해결 방법도 찾다 (LINUX CENTOS 7, APACHE, MYSQL)

 

 

4.

그래도 반응형에 대한 아쉬움이 남았는데,

여러 글들을 참고하고 시험하다 

버그같기도 한데 편법 비슷한 방법을 찾게 되었다.

 

5.

구현방법은 아주 간단하여

아래 위젯스킨을 설치하여 병행 사용하면

xe core에 기본 설치되는 content 위젯 기본 스킨(default)의 갤러리 창에서도 

아코디언 마우스 오버 반응이 구현된다.

 

XEDITION MAIN LAYOUT 반응형 00-s4u탭슬라이드 컨텐츠 위젯스킨 설치.JPG XEDITION MAIN LAYOUT 반응형 00-s4u탭슬라이드 컨텐츠 위젯스킨 설치1.JPG

 

 

 

 

 

 

 

 

 

관리자 설정창의 고급메뉴-쉬운설치에서 아래 위젯스킨을 설치

[참고-클릭] s4u탭슬라이드 컨텐츠 위젯스킨 ver. 1.0

을 설치하여 같이 사용하면

기본설정 위젯 스킨에서 마우스오버 아코디언 효과가 구현되는 것이 아닌가.

 

메인 화면 layout에서 다음과 같이 설정하였다.

 

XEDITION MAIN LAYOUT 반응형 01-페이지 수정.JPG

XEDITION MAIN LAYOUT 반응형 02-s4u skin설치.JPG

 

 

 

 

 

 

 

 

 

 

6.

s4u 탭슬라이드 컨텐츠 위젯스킨을 한번만 사용하면

복수의 content 위젯 기본 스킨(default) 갤러리 썸네일 그림에 모두 아코디언 효과가 적용되었다.

 

 

XEDITION MAIN LAYOUT 반응형 03-s4u skin설치 결과2.JPG

 

7.

이와 같은 반응형 갤러리 썸네일을 구현하고자 하는 분들에게

도움이 되기를 바랍니다. 혹시 그렇다면 추천이나 댓글 부탁드려요. ^^