설치경로 ./modules/board/skins/
라이선스 GPL v3
홈페이지 http://somniloquy.net/board
간단한 소개 Two column layout
언제나 페이지 맨 아래 붙어 있던 몇몇 버튼들과 카테고리, 그리고 게시물과 글쓴이에 대한 정보들을 오른쪽 칼럼으로 옮겨, 접근이 용이하고 공간이 생겨 깔끔한 페이지가 나올 수 있습니다.

Gallery Style
갤러리 스타일에서는 jQuery Masonry 스크립트를 활용, 각각 element의 상하 폭을 줄여서 공간을 활용함과 동시에 재미있는 스타일의 게시판을 만들 수 있습니다.

Sliding panel
게시판 제일 아래 슬라이드로 나오는 패널을 설치하여 검색이나 여러 위젯 등, 언제나 보일 필요 없는 기능들을 숨겨두었다가 한눈에 찾을 수 있습니다.


Level D Theme for XE Board Module



Version 0.1



Level D 게시판 모듈 스킨은 다음과 같은 환경에서 테스트 되었습니다. 


XE Version 1.3.1.1

Language: English


Fixfox 3.5.7 for Mac

Google Chrome 4.0.249.49 Beta for Mac

Safari 4.0.4 for Mac

Internet Explorer 8

IE Tester (Internet Explorer 6)



저의 첫 게시판 스킨입니다.

XE 스킨 메뉴얼: 게시판 스킨 만들기 (http://xe.xpressengine.net/wiki/18252245 )에 링크 되어 있는 xe_naradesign 게시판 스킨을 기반으로 만들었습니다. 위키 메뉴얼과 함께 스킨 배포해주신 정찬명님 그리고 XE 게시판에 제가 활용할 수 있었던 많은 자료들을 올려주신 모든 분들께 감사의 말씀을 전합니다.


아직 처음이다 보니 미처 보지 못한 부분이 많을 것입니다.


문제 있는 부분이 있으면 주저말고 알려주시고, 개선/보완된 버전의 재배포를 적극 환영합니다.



고맙습니다.




top.jpg


글을 열었을 때 보이는 화면입니다. 오른쪽 칼럼에 글쓴이의 프로필 사진과 이름, 그리고 글에 대해 어떤 액션을 취할 수 있는 버튼들이 위치합니다.


보시는 바와 같이 두 개의 칼럼이 존재합니다.

언제나 페이지 맨 아래 붙어 있던 몇몇 버튼들과 카테고리, 그리고 게시물과 글쓴이에 대한 정보들을 오른쪽 칼럼으로 옮겨, 접근이 용이하고 공간이 생겨 깔끔한 페이지가 나올 수 있습니다.


category.jpg 


게시물을 클릭하기 전 목록 화면에서 보이는 두 개의 칼럼입니다.



title_korea.jpg 

글 제목이 한글일 때 화면입니다. 아쉽게도 인터넷 익스플로어에서는 저런 깔끔한 한글을 제대로 보여주지 못합니다. 이에 대한 설명은 아래 설정: 에서 더 써보겠습니다. 


title.jpg 





list.jpg

클래식 리스트 스타일의 화면입니다.


gallery.jpg 

갤러리 리스트 스타일의 화면입니다.

jQuery Masonry by David Desandro (http://desandro.com/resources/jquery-masonry )

갤러리 스타일에서는 jQuery Masonry 스크립트를 활용, 각각 elements의 상하 폭을 줄여서 공간을 활용함과 동시에 재미있는 스타일의 게시판을 만들 수 있습니다. 스크립트를 공개해주신 David Desandro님께 감사의 말씀을 전합니다.



bottom_close.jpg 

페이지 맨 아래 pagination입니다. > 화살표가 10페이지 넘기기 버튼이고 만약에 지금 보고 있는 페이지가 11페이지 이상이라면 10페이지 돌아가기 버튼이 생깁니다. 물론 첫번째 페이지로 돌아가기 버튼도 함께 나옵니다.


open 버튼을 누르면 슬라이딩 패널이 그 아래로 나타납니다.


bottom.jpg 

아무런 위젯도 추가 하지 않아서 텅 비어 있는 느낌이 납니다. 검색과 왼쪽 아래로 보이는 리스트 바꾸는 버튼만 위치하고 있습니다. 언제나 보일 필요는 없지만 쓸모있는 여러 위젯이나 기능들을 설치해서 숨겨두었다가 한눈에 찾을 수 있습니다. 보통 레이아웃에 설치하는 위젯들과는 조금 다른 성질의 위젯들이 되겠지요.



comment.jpg 

댓글의 깊이, 즉 댓글에 댓글이 쓰여지고 그 아래로 또 댓글이 붙는 것이 19번 이상 되면 더 이상 오른쪽 옆으로 밀리지 않게 했습니다. 너무 길어지면 댓글이 오른쪽으로 빠져서 더 이상 읽을 수 없게 되기 때문에 19번에서 멈춥니다.



설정:

다른 게시판 스킨과는 다른 부분을 중심으로 제가 생각 나는 부분을 써보았습니다. 이외에 궁금하신 점이 있으면 알려주세요.


1. 폰트

인터넷 익스플로어로 접속하면 글의 제목이 한글일 경우 예쁘게 표시되지 않습니다. 대신 영문은 무척 잘 보입니다. 배포용으로 다른 폰트로 바꿀까 했지만 어차피 스킨을 사용하려면 사용자 입맛에 바꾸어야 하기에 그대로 두었습니다. 한번 써보고 수정해보세요. board.css에 .boardReadHeader .titleArea .title에서 폰트 사이즈와 폰트를 바꿔주세요. 기본으로 "times new roman", times, "ms serif", "new york", serif 그리고 사이즈는 23픽셀로 되어 있습니다. XE의 Open UI Project Guide에서 안전서체를 확인하실 수 있습니다. http://www.xpressengine.com/openUIProjectGuide


2. 색

페이지를 두 칼럼으로 나누는 바람에 한쪽 칼럼이 더 길어지면 다른 한쪽이 같이 늘어나지 않는 문제가 있었습니다. Dan Cederholm님께서 제안하신 faux column (http://www.alistapart.com/articles/fauxcolumns/ ) 을 써서 해결했지만 세로 border 색을 바꾸려면 이미지 폴더에 있는 faux.png파일 두 개를 수정하셔야 합니다.

오른쪽 칼럼의 넒이를 바꿀 때도 마찬가지입니다. 


3. 갤러리 스타일

갤러리 스타일에서 썸네일 사이즈와 각각 element들 사이의 간격을 조정할 수 있습니다. 게시판 스킨 관리 페이지에서 손쉽게 수정 가능합니다.


갤러리 스타일에서는 목록설정을 따로 하지 않아도 번호, 제목, 등록일, 조회수, 닉네님, 댓글수, 썸네일, 요약 항목들이 자동으로 들어가있고 관리페이지에서 수정이 불가능합니다. 관리페이지에서 바꾸게 되면 클래식 리스트 스타일에도 영향이 있기 때문에 갤러리 스타일에서는 할 수 없이 목록설정 기능을 제거했습니다. 항목을 바꾸고자 하시면 list_gallery.html에서 수정하셔야 합니다.


갤러리 스타일에서는 시간설정을 해서 글이 오래되면 색이 변하도록 지정할 수 있습니다. 게시판 스킨 관리 페이지에서 시간 설정이 가능하고, 색은 colorset의 css에서 변경할 수 있습니다. #newArticle, #middleArticle, #oldArticle 옆에 배경색을 원하는 색으로 바꿔주세요. 기본 설정으로 36시간 동안 흰색, 60시간까지 #eeeeee, 그 이후는 #dddddd입니다.


위와 마찬가지로 댓글 숫자도 시간에 따라 색이 변하도록 할 수 있습니다. 갤러리 스타일이나 클래식 리스트 스타일에서 보이는 댓글 수의 색입니다. 시간은 위에서 설정한 것과 같은 시간을 씁니다. 색도 역시 colorset의 css에서 변경할 수 있는데 .replyNum, .replyNumMiddle, .replyNumOld 옆에 color을 바꾸면 됩니다. 기본 설정으로 36시간 동안 #cc0000 (짙은 빨간색), 60시간까지 #009900 (초록색), 그 이후로 #aaa입니다. 


4. 클래식 리스트 스타일

클래식 리스트 스타일에서는 기본 설정으로 맨 위쪽 해더가 빠져 있습니다. 게시판 스킨 관리 페이지에서 바꿀 수 있습니다.


글을 열었을 때 제일 아래 쪽에 보일 목록 형태를 변경할 수 있습니다. 기본으로 클래식 리스트 스타일로 되어 있습니다.


갤러리 스타일에서는 자동으로 게시판 제목이 표시 되지만, 클래식 리스트 스타일에서는 기본으로 표시하지 않게 되어있습니다. 원하시는 분들은 게시판 스킨 관리 페이지에서 수정해주세요. 


5. Pagination 과 슬라이딩 패널

어떤 이유인지 슬라이딩 패널 제일 왼쪽 아래에 있는 목록 형식을 바꾸는 버튼이 익스플로어6에서 레이아웃을 쓰지 않았을 때 왼쪽으로 1픽셀씩 밀리는 현상이 있습니다. 세가지 레이아웃으로 테스트 해본 결과 레이아웃을 쓸 때는 그 현상이 없어서 그대로 두었습니다. 혹시 레이아웃을 썼는데도 칸이 맞지 않는다면 board.css에서 #boardMenu .bMenu_wrapper .viewStyle에서 css hack을 써서 바꾸시면 됩니다. css hack은 위에 링크 되어 있는 Open UI Project Guide에 설명되어있습니다.


pagination은 갤러리 스타일과 클래식 리스트 스타일용 이렇게 두 가지가 있습니다. 각각 pagination_gallery.html과 pagination.html입니다. 목록 형태에 따라 다른 위젯을 설정하면 어떨까 해서 나누어 놓았습니다. 슬라이딩 패널에 위젯을 설치하고자 할 때 주의해주세요.


pagination에 있는 슬아이딩 패널은 jQuery를 써서 높이 0에서 설정한 높이까지 올라오게 되어있습니다. 슬라이딩 패널이 더 커져야 한다면 pagination.html이나 pagination_gallery.html 아래 스크립트 안에 잇는 height를 바꿔주시면 됩니다. 앞쪽에 있는 height는 슬라이딩이 진행 될 때 쓰이는 높이고, 뒷쪽에 있는 height가 슬라이딩이 끝났을 때 위치하는 높이 입니다. 지금 설정대로라면 패널을 열 때 높이 0에서 170픽셀까지 올라갔다가 150픽셀로 줄어들면서 애니메니션이 끝나고, 닫을 때는 높이가 180픽셀로 올라갔다가 0으로 내려갑니다.


6. 썸네일과 프로필 사진

글을 열었을 때 오른쪽 칼럼에 나오는 프로필 사진의 크기는 가로 120px 높이 200px입니다. 회원관리 기본 설정에서도 설정을 같게 해야 충분한 해상도로 표시가 됩니다. list.html에 aboutAuthor에서 크리를 조정할 수 있습니다.


갤러리 스타일에서 글에 썸네일을 생성할 수 있는 이미지가 없는 경우 img/common/no_.png가 대신 들어갑니다.


프로필 사진이 없는 경우 img/common/no_profileimage.jpg가 대신 들어갑니다.






이 게시물을...
profile