이 블로그는 더이상 운영되지 않고 Archive 용도로 사용되고 있습니다.
새로운 블로그를 방문해주세요.

[Gabriel 4.0] 카테고리 별 목록 디자인 변경


데모 블로그를 보면 아시겠지만 Gabriel 스킨은 4가지 목록 디자인과 3가지 사이드바 조절이 있습니다.


목록 디자인은

- 웹진 (기본)

- 앨범

- 텍스트

- 썸네일


이 있고, 사이드바는


- 사이드바 우측 (기본)

- 사이드바 좌측

- 사이드바 제거


가 있습니다.


이 기능들은 블로그 전체에 동시 적용 가능하지만 특정 카테고리에서도 사용 가능합니다.



예를들어 "스킨 테스트" 라는 카테고리의 목록을 썸네일로 바꾸고 사이드바를 제거하고 싶다면


if(list=="스킨 테스트") { root.className += ' list-thumb sidebar-off'; }


만 추가하면 됩니다.


이제 저 소스가 어디 있는지, 어떻게 수정하는지 알려드리겠습니다.


skin.html

149 ~ 159번째 줄을 보면 다음 소스가 있습니다.

if(list=="기본/사이드바 좌측") { root.className += ' sidebar-left'; }
if(list=="기본/사이드바 제거") { root.className += ' sidebar-off'; }
if(list=="앨범") { root.className += ' list-album'; }
if(list=="앨범/사이드바 좌측") { root.className += ' list-album sidebar-left'; }
if(list=="앨범/사이드바 제거") { root.className += ' list-album sidebar-off'; }
if(list=="텍스트") { root.className += ' list-text'; }
if(list=="텍스트/사이드바 좌측") { root.className += ' list-text sidebar-left'; }
if(list=="텍스트/사이드바 제거") { root.className += ' list-text sidebar-off'; }
if(list=="썸네일") { root.className += ' list-thumb'; }
if(list=="썸네일/사이드바 좌측") { root.className += ' list-thumb sidebar-left'; }
if(list=="썸네일/사이드바 제거") { root.className += ' list-thumb sidebar-off'; }

기본으로 스킨에 적용된 예시 소스인데요.


예시에 맞게 간단한 방법으로 특정 카테고리에 원하는 디자인을 적용해보세요.


목록 디자인은 데모 블로그에서 확인 가능합니다.


※ 두 가지 기능 동시 적용시 띄어쓰기에 조심하세요 !


사이트에 공통으로 한 가지 디자인 적용 방법

카테고리별 디자인 적용이 아닌 전체 사이트에 한 가지 디자인을 적용시키고 싶은 경우가 있습니다.



skin.html 파일 제일 상단을 보시면 다음 소스가 있습니다.


<html lang="ko" class="no-js">


위 소스에 아래처럼


<html lang="ko" class="no-js list-thumb">


list-thumb 라는 class 만 추가하면 모든 카테고리의 목록이 썸네일형으로 변합니다.


만약 사이드바를 없애고 목록을 앨범형으로 지정하고싶다면,


<html lang="ko" class="no-js list-album sidebar-off">


이렇게 추가하면 됩니다.

최근 댓글