본문 바로가기
2. 자캐커뮤 관련/제로보드 스킨

업로드 게시판, node21_freeup

by ZERO0201 2012. 9. 12.

제로보드4 스킨 공유 해 봅니다. 혹시 문제가 된다면 알려주세요.

(!) 공유글은 커뮤모아와 이곳에만 올렸습니다. 다른 곳에 옮겨가지 말아주세요.

 

혹시 사용하시는 중에 오류가 있거나, 문제가 생길 시에는 제 홈페이지의 CONTACT 란이나,

커뮤모아 쪽 공유글에 댓글을 다시거나, 커뮤모아 내 쪽지 기능을 사용해서 알려주세요.

 

스킨 관련 외 다른 문의사항은 아래 링크를 이용해 주세요.

제로보드4 질문게시판: http://www.xpressengine.com/zb4_qna

 

============================================================================

 

0. 공유하기에 앞서..

 

0-1. 제로보드4 보안 취약

제로보드4는 보안에 취약합니다. 이미 배포도 중단되었고, 제로보드 측에서도 다른 게시판으로 이전할 것을 권장하고 있습니다. 부러 이 스킨을 사용하기 위해 제로보드를 새로 설치하시지 않길 바랍니다..

물론, 이 점을 감안하신다면 본인의 선택에 따라 게시판을 설치해서 사용하시면 되겠습니다. @@;

 

0-2. 도움되신 분들

- 주사위 기능과 아이피 체크를 통해 작가댓글을 표시하는 기능은 Canto님의 팁을 참고하여 적용하였습니다.

  (주사위 이미지도 Canto님의 팁에서 얻었습니다.)

- 막힐 때마다 도움주신 솥님, 징징거림 들어준 솜님께 감사합니다.

- 마지막으로 로드비(비툴) 게시판 제작자 분들과, 제로보드 팁게에 팁을 올려주신 분들, 그리고 이모티콘 제작자 분들께 감사함을 표합니다. 혹, 저작권과 관련된 문제나 게시판에 해결할 수 없는 큰 오류가 있다면 공유글을 내릴 수 있도록 알려주시길 바랍니다.

 

0-3 사족

저번 공유글로부터 거의 반년이 지났네요. 이 게시판은 제로보드4를 이용해 로드비(또는 비툴)게시판을 흉내낸 것입니다. 지금보니 저번에 공유했던 스킨이 너무 부끄럽네요. 이것도 지나고 돌이켜보면 촌스럽고 민망할려나 싶은.. ㅎㅎ

이용하시는 분들이 주신 의견을 참고해서 전에 공유했던 스킨을 보완, 개선했습니다.

이왕이면 전에 공유했던 스킨과 호환되게 하고 싶었지만.. 장님 코끼리 다리 만지듯 더듬더듬 했더니 너무 엉망이어서.. 새로 소스를 구성했기 때문에 호환은 되지 않습니다. orz

그래도 생긴건 비슷합니다. (아마도) 어쨌든간에 조금이라도 도움이 되길 바랍니다!

그리고 이용해 주시는 분들께 감사드립니다!

 

============================================================================

게시판 생성하실 때 첨부된 README.txt 꼭 읽어주세요. 이 게시물에도 내용 올려둡니다. 

============================================================================

 

< 이모티콘 기능만 없는 버전 >  

node21_freeup.zip// 기본

node21_freeup_b.zip// 검은색 버전

 

< 이모티콘 기능 있는 버전 >

node21_freeup_emo.zip// 기본

node21_freeup_emo_b.zip// 검은색 버전

 

============================================================================

 

 // 기본 게시판

 // 이미지 업로드 부분

 // 간단한 댓글 달기

 

// 검정색 버전 게시판 모습 (스타일시트 약간 손 봄) 

// 검은색 버전 쓰실 때 관리자 페이지->setup 에서 배경색상에 white 대신 'black' 입력하세요.

 

 

============================================================================

스킨 파일내 들어있는 README.txt 내용 

============================================================================


======================================
<< node21_freeup_emo 이미지 업로드 게시판 >>

게시판 설정과 특징에 관한 정보입니다.
처음 게시판 설치 시 참고해 주세요.
======================================

0. 댓글이 굵게 출력되는 것을 얇은 글씨로 출력하는 방법

- 관리자 페이지 -> 등록된 그룹 관리 -> 해당 게시판이 생성되어 있는 그룹의 '그룹 설정' -> 회원 표시 방법 -> 'None division viewing'
에 체크하고 사용하시면 더 이상 댓글이 굵게 출력되지 않습니다.

======================================

1. 게시판 설정 (관리자페이지 -> 기본설정 변경 setup)

- [필수] 스킨 형식을 '방명록 형태'로 사용해 주세요.
(게시판 형태로 사용하시면 그림과 글이 출력되지 않습니다.)

- [필수] '글내용볼때 아래에 전체 리스트 기능'에 체크를 해지하고 사용해 주셔야 합니다! 그렇지 않으면 오류가 발생합니다.

- [필수] '자료실 기능 사용'과 '간단한 답글 기능 사용'에 체크해 주셔야 이미지를 업로드 하실 수 있으며, 댓글 기능을 이용하실 수 있습니다.

- [선택] '비밀 글 사용'을 체크하시면 이미지에 비밀 기능을 이용하실 수 있습니다.

- [선택] 배경을 변경하고 싶으실 땐, 배경 색상에 색상 코드를 입력하시거나 배경그림에 이미지 주소를 입력하시면 됩니다.
(색상 코드: #000000, #ad8e90 같은 것..)

======================================

2. 이 게시판의 특징.

- 'NOTICE' 에 체크하고 그림을 올리시면, 그림이 항상 첫 페이지 상단에 출력됩니다.

- 아이피 체크를 해서 글 작성자와 댓글 작성자의 아이피가 동일하면, 댓글 작성자의 아이디 뒤에 ★표시가 붙도록 되어 있습니다.

- 로그인하면 아이디, 비밀번호, 그리고 개인정보에 입력해 둔 홈페이지 정보가 자동으로 적용됩니다.

- 이미지에 접기, 비밀, 공지 기능을 적용할 수 있습니다. (중복 적용 가능)

- 글에 접기 기능, 비밀 기능, 주사위기능, 이모티콘 기능, 메모기능 등이 있습니다. (접기, 비밀 중복 적용 가능)

- (기본설정) 이미지의 가로 사이즈가 500 픽셀 이상이면 이미지가 가로 500 픽셀로 비율에 맞춰 줄어듭니다. 세로 사이즈가 2000 픽셀 이상이면 이미지가 세로 2000 픽셀로 비율에 맞춰 줄어듭니다. 이미지가 가로, 세로를 모두 초과할 경우 가로 길이를 기준으로 줄어듭니다. 줄어든 그림 하단에는 원본사이즈 값이 출력되며, 이미지를 클릭해 새 창으로 열면 원본 사이즈 크기의 이미지가 보입니다.

=> 수정 방법: 스킨 파일 내 setup.php 파일을 열어보세요.
<?
$i_width="500"; // 이미지의 가로값 제한(우선)
$i_height="2000"; // 이미지의 세로값 제한

$limit_width="10000000"; //이미지 가로 값이 초과할 경우 댓글창 하단으로 이동
?>

이 부분을 적당히 수정하면 됩니다.
이미지 사이즈 제한 대신 댓글창을 하단으로 이동시키고 싶으시면, $i_width, $i_height 값에 매우 큰 숫자를 입력하고 $limit_width 에 적당한 값을 입력해 주시면 됩니다. 게시판 가로 길이를 800 픽셀로 정했다면 $limit_width 값은 이미지가 500 픽셀 이상일 때 댓글창이 하단으로 이동하도록 설정하는 것이 좋습니다. 왜냐하면 댓글이 나오는 부분이 약 250 픽셀 정도 차지하고 있기 때문입니다. 500 픽셀 + 약 250픽셀 = 750픽셀 정도. 이 부분은 이해가 잘 안 가신다면 직접 해보시는 편이 좋습니다. 항상 댓글창이 하단에 있는 것이 좋으시다면, $i_width, $i_height 값에 매우 큰 숫자를 입력하고 $limit_width 에 아무값도 입력하지 않으시거나 0을 입력해 주세요.

- 큰 이미지가 올라와도 댓글창이 찌그러지지 않습니다. 250 픽셀 조금 넘는 정도의 공간이 남습니다.

- 글 작성시 http:// 를 적으면 주소가 뜨지 않는 현상이 있습니다. http:// 를 적지 마시거나, http:// 대신 '/주소'라는 명령어를 적어 넣으세요. 아니면 주소를 ""(큰따옴표) 안에 넣어주세요. 문제는 저렇게 하면 온전한 주소가 뜨긴 하지만, 자동링크가 되지 않습니다. 이 부분은 제가 아직 실력이 미흡한 탓입니다. 주소를 링크할 때는 반드시 링크란을 이용해 주세요.

- 이미지를 업로드 할 때 이미지의 파일명은 영문으로 되어 있어야 합니다. 한글로 되어 있으면 엑박이 뜬다고 합니다.

- 스타일시트를 정리했습니다. 스킨 파일 내의 style.css 폴더를 수정함으로써 약간의 디자인과 색상을 수정할 수 있습니다.

======================================

3. 스타일시트 수정해서 디자인 변경하기

- 스타일시트 아시는 분들은 수정해서 사용하세요.

/* 이미지와 댓글이 나오는 테이블 부분의 표시 */
.table_all { border:1px solid black; background-color:transparent; }
=> 전체 테이블. 테두리 1픽셀 검정으로 두름. 바탕색 투명.
.table_number { border:0; }
=> 게시물 상단에 번호 DELETE REPLY 뜨는 부분
.table_content { border:0; }
=> 게시물 내용(그림+댓글부분) 뜨는 부분
.table_pic { border:0;}
=> 그림 뜨는 부분
.table_comment { border:0;}
=> 댓글 뜨는 부분

/* 코멘트 쓰기 창의 바탕과 이모티콘 목록 부분 표시 */
.table_write_comment { border:0; width:350; }
=> 댓글 쓰기 창. 가로 길이 변경 가능(비추).
.table_emotion { border:0; }
=> 이모티콘 목록 veiw_emotion.php

/* 비밀글 표시와 접기 표시 */
.secret { width:200; color:red; font-weight:bold; }
.more { width:200; color:blue; font-weight:bold; cursor:pointer;cursor:hand; }
=> 비밀과 접기 표시의 색상을 변경할 수 있습니다.
비밀 표시는 red로 접기 표시는 blue로 되어 있습니다.
변경 하시고 싶은 색상명이나, 색상코드를 입력하세요.

======================================

4. 이모티콘 추가, 수정하기

이모티콘을 추가 수정하시려면 emotion.php파일과 view_emotion.php 파일을 수정하셔야 합니다.

- emotion.php 에는 이모티콘이 작동되게 해 주는 소스가 들어있습니다.

$emo001 = "<img src=$dir/emo/001.gif>";
$profile5 = str_replace("/안경" , $emo001 , $profile5);

이 소스는 '/안경'이라고 적으면 $emo001을 출력하라는 소스입니다.
이 두 줄이 한 세트입니다. 이모티콘을 추가할 때는 위의 두 줄을 한 세트로 추가하시되, 몇가지 부분을 수정하셔야 합니다.

우선 '/안경' 대신 따옴표 안에 추가하고자 하는 명령어를 적어 넣어 주세요. 그리고 명령어 대신 출력할 이모티콘(이미지)를 정해주는 부분을 수정하셔야 합니다.

$emo001 = "<img src=$dir/emo/001.gif>";
$emo001은 같은 파일 내($dir) emo파일 안의 001.gif파일이라는 뜻입니다.

$emo001 숫자를 겹치지 않게 설정하셔야 합니다. emo 파일내에 해당 이모티콘(이미지)를 넣어두시는 것도 잊지 마시고요.

- view_emotion.php 는 댓글 쓰기 창 하단에 [이모티콘 열람] 부분을 출력해주는 파일입니다.

단순히 테이블을 짜서 이모티콘을 보여주는 파일이며, view_emotion.php 를 수정하지 않고 emotion.php 파일만 수정하셔도 이모티콘 기능은 작동합니다.
view_emotion.php 은 이모티콘을 사용할 때 편하게 참고하기 위해 이모티콘 목록과 명령어를 한 눈에 보여주기 위해서 작성된 것 입니다.

수정 방법은 테이블 태그를 사용하실 수 있는 분이라면 쉽게 하실 수 있을 것 같아 생략하겠습니다.

======================================