프로필 게시판, node21_profile

제로보드4 스킨 공유합니다.

(!) 공유글은 커뮤모아와 제 개인 티스토리에만 올렸습니다. 다른 곳에 옮겨가지 말아주세요.

 

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

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

 

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

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

 

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

 

0. 공유하기에 앞서..

 

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

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

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

 

0-2. 도움되신 분들

- 게시판의 목록 출력 부분과 입력폼을 나누는 방식에 대한 것은 freshcell님의 '투명, 게시판형 도서 갤러리'라는 스킨에서 참고하였습니다.

- 징징거림 들어준 솜님께 감사합니다. 나쁜..

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

 

0-3 사족

이 게시판은 제로보드4를 이용해 커뮤 캐릭터들의 프로필을 정리할 수 있게 만든 게시판입니다.

외관상 많은 부분이 변경된 것은 아니고, 저번에 공유했던 게시판의 오류를 바로 잡는데 초점을 맞춰 재공유하는 것입니다. 또한 저번 게시판과 호환이 되므로, 게시판을 새로 생성할 필요없이 게시판의 스킨만 교체하여 사용해 주시면 되겠습니다. (하지만 입력폼 부분에 수정을 가하셨다면 호환되지 않습니다.)

크고 작은 오류가 있었음에도 사용해주신 분들이 꽤 많이 있어서 감사드립니다.

댓글 달아주신 분들께도 감사드립니다. 전 공유글에 달린 댓글도 저장해서 보관하고 있습니다.

정말 감사드려요. ㅎㅎ

 

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

게시판 생성하실 때 첨부된 README.txt 꼭 읽어주세요.  

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

 

- 프로필 게시판 스킨 다운로드:node21_profile.zip

- 프로필 게시판 스킨 패치파일 다운로드:node21_profile_패치파일.zip

 

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

 

<!> 참고사항 <!>

- 전에 공유했던 프로필 게시판과 호환됩니다. 설정페이지에 가셔서 스킨만 교체해서 사용하실 수 있습니다.

혹시 게시판의 입력폼 부분을 수정하셨다면 호환되지 않습니다. 다른 부분도 수정한 부분이 있다면 덮어쓰지 않는 것을 권장합니다. 패치파일 역시 수정된 파일에 덮어쓸 경우 호환되지 않을 가능성이 있습니다.

 

*** 전 프로필 게시판의 문제점

- 테이블이 제대로 마무리되어 있지 않아, 퍼센트로 사용하면 하단 메이커 부분이 튀어나옵니다.

- 한마디와 소속 부분의 소스가 잘못되어 있어 수정시 소속과 한마디가 같게 나옵니다.

- 이름이 아니라 이미지를 클릭하면 하단에 리스트가 출력되지 않는 현상.

- <img src="이미지주소">를 사용할 경우 /(슬래시)가 첨가되어 수정시 번거롭습니다.

  (이 문제는 "" 큰 따옴표를 입력하지 않고 <img src=이미지주소> 이렇게 입력하시면 됩니다.)

 

*** 현 프로필 게시판의 수정/추가된 사항

- 테이블 오류 수정 + 소스오류 수정 + 이미지를 클릭해도 리스트가 출력되도록 수정

- 전신과 두상 이미지를 '업로드 or 외부주소 링크' 두 가지 중 하나를 선택해서 표시할 수 있도록 수정

- 두상이미지(기본100*150) 사이즈를 쉽게 변경해서 사용할 수 있도록 수정

(스킨 폴더 내의 style.css 파일을 열고 두상사이즈 부분을 수정)

- 전신 이미지가 커져도 프로필 텍스트 부분이 찌그러지지 않음 + 텍스트 부분 값을 지정할 수 있도록 수정

(역시 스킨 폴더 내의 style.css 파일을 열고 텍스트 가로 값을 수정)

- 관리자에게만 보이고 수정이 가능한 입력칸. 포인트란 등으로 사용.

- 글수정시 첨부 또는 링크된 이미지가 글수정창에 출력됨

- 스타일시트 정리 (디자인, 색상 대부분을 스타일시트를 수정함으로써 어느정도 변경 가능)

- 패치파일의 종류가 다양해졌습니다. 아래 설명과 README.txt 파일을 참고

 

- 체크박스를 이용해 수정중/수정완료 표시를 하려던 것은 제 실력의 문제로 빼게 되었습니다. 죄송합니다. orz

- 전에 공유했던 프로필 게시판은 공유를 중단합니다. 그동안 감사했습니다!

 

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

<!> 참고 이미지 <!>

 

- 다운로드 했을 때 기본 모습 (목록, 내용, 글쓰기창 / 패치파일 0번내용(뷰)+2번목록가로)

// 목록 [2]목록_이미지+프로필 가로형

 

// 내용(뷰) [0]뷰_전신왼편_기본

 

// 글 수정창 모습 [0]뷰_전신왼편_기본

- 나머지 패치파일 모습

 

// [1]목록_게시판(리스트)형

 

 

// [3]목록_이미지+프로필 세로형

 

 

// [4]글쓰기창_구버전

 

 

 

// [5]뷰_전신상단 - 전신이 최상단에 나오는 형태

 

 

 

// [6]뷰_전신상단2_두상아래 프로필

 

 

 

// [7]뷰_전신상단3_두상없음 - 목록을 [1]목록_게시판(리스트)형 으로 사용하고 두상과 전신에 이미지를 첨부하지 않는다면 글쟁이용 프로필게시판으로 사용했을때 가장 적합한 게시판입니다.

 

 

 

// [8]뷰_전신중단(두상 아래 출력)

 

 

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

<!> README.txt 에 적혀있는 내용 <!>
======================================
<< node21_profile 프로필 게시판 >>

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

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

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

- [필수] 이미지를 업로드 하시려면 '자료실 기능 사용'에 체크하시고, 외부에서 이미지 주소를 따와 링크 하시려면, 두상은 '관련 사이트 링크 #1', 전신은 '관련 사이트 링크 #2'의 '링크 기능 사용'에 체크해 주셔야 합니다. 이미지가 필요 없는 경우에는 체크하지 않아도 무방합니다.

- [선택] '카테고리 기능 사용'에 체크하시면 카테고리 기능을 이용하실 수 있습니다. (성별 분류나 수정중 수정완료 구분, 또는 소속 구분 시 이용)

- [선택] '간단한 답글 기능 사용'에 체크하시면 댓글 기능을 이용하실 수 있습니다.

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

- [선택] '글 내용볼때 아래에 전체 리스트 기능'에 체크하시면 제목을 클릭해 게시물 내용을 볼 때 아래에 다른 게시물 목록들이 뜹니다. 체크하지 않으시면 앞과 뒤의 게시물 목록만 출력됩니다.

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

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

1. 이 게시판의 특징

- 게시글을 작성란(write.php)의 입력폼이 나뉘어져 있습니다.

- 관리자 또는 ADMIN 이라고 적힌, 관리자에게만 보이고 관리자만 수정, 입력이 가능한 입력칸이 있습니다. (포인트란 정도로 사용)

- 전신과 두상 이미지를 업로드하거나, 외부에서 이미지주소를 따와 링크할 수 있습니다.

- 두상이미지 크기를 임의의 숫자로 변경할 수 있습니다. 기본값은 100*150px이며, 수정은 스킨 파일 내에 style.css를 열어 아래에 적힌 부분을 원하는 값으로 수정하시면 됩니다.

/* 두상 가로(width), 세로(height) 사이즈, 1px테두리 */
.face { width:100; height:150; border:1px solid gray; }
/* 두상 가로(width)사이즈와 같은 값을 입력해 주세요.  */
.face_width { width:100; }

두상 이미지는 어떤 크기의 이미지를 업로드 해도 항상 입력된 값으로 고정되어 출력되며, 1px 테두리가 둘러집니다. 테두리를 없애고 싶으면 border:1px solid gray; 이부분을 삭제하시고, 테두리 색상을 변경하고 싶은 경우라면 gray 에 대신 다른 색상명이나 색상코드를 입력하세요.

/* veiw.php 프로필 텍스트 부분 가로 길이 */
.text_width { width:300; }

- (전신이 왼쪽, 텍스트가 오른쪽에 있는 경우에만 해당) 전신 이미지가 커져도 프로필의 텍스트 부분이 찌그러지지 않습니다. 텍스트 부분값은 항상 일정하게 고정되며, 기본값은 300px 입니다. 300px 이하로 값이 내려가면 텍스트의 가독성이 현저하게 떨어집니다. 최소 300px 권장값은 350~400px정도 입니다. 너무 텍스트 부분이 길어져도 전신 자리가 부족해지므로 전체가로 값과 전신이 차지하는 부분을 생각해서 텍스트 부분값을 설정해 주세요. 텍스트 가로 값을 수정하시려면, 스킨 파일 내에 style.css를 열어 아래에 적힌 부분을 원하는 값으로 수정하세요.

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

- 이미지 태그를 이용해 기타 이미지를 첨부하실 때는 <img src="이미지주소">로 적으실 경우  /(슬래시)가 첨가되어 수정시 한 번 더 손을 대야 하는 번거로움이 있습니다. 이미지 태그를 이용하실 때는 ""(큰 따옴표)를 입력하지 말고 <img src=이미지주소> 이렇게 입력해서 사용해 주셔야 합니다.

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

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

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

아래는 스킨파일 속에 포함된 style.css 폴더 내의 내용 전문입니다.
내용에 약간의 추가 설명이 되었으니, 혹시 style.css 를 수정하실 계획이 있는 분들은 참조해 주세요.
참조한 글은 '##', '##' 사이에 적어 두겠습니다.

## 전체 글씨 포인트와 색상을 정함, 글씨 크기는 9포인트로 색상은 gray. 여기에 글씨체 추가 가능. font-family:batang; 이런식으로. ##
body, td, select, input, div, form, textarea, center, option, pre, blockquote{ font-size:9pt; color:gray; }

## 링크가 되어 있는 글자를 클릭했을 때 표시될 색상과 모양을 정함 ##
A:link    {color:#aaaaaa;text-decoration:none;}
A:visited {color:#aaaaaa;text-decoration:none;}
A:active  {color:#555555;text-decoration:none;}
A:hover   {color:#555555;text-decoration:none;}

## 보통 이 자리에 스크롤바 태그가 있지만, 생략했습니다. 필요하신 분은 스크롤바 태그를 따로 추가해 주세요. ##

## 두상 사이즈를 정하는 부분입니다. 적당히 값을 조정해서 사용하세요. ##
/* 두상 가로(width), 세로(height) 사이즈, 1px테두리 */
.face { width:100; height:150; border:1px solid gray; }
/* 두상 가로(width)사이즈와 같은 값을 입력해 주세요.  */
.face_width { width:100; }

## (전신이 왼쪽, 텍스트가 오른쪽에 있는 경우에만 해당) 프로필의 내용이 들어오는 부분의 가로 길이를 지정하는 부분입니다. ##
/* veiw.php 프로필 텍스트 부분 가로 길이 */
.text_width { width:300; }

/* 영문으로 되어 있는 부분, 글씨 크기를 8포인트로 표시 */
.8 { font-size:8pt; }

## 캐릭터 한마리 부분의 글씨를 전체 기본 글씨 크기인 9포인트보다 큰 15포인트로, 글씨체는 바탕(batang)으로, 그리고 굵게 표시했습니다. (기본) ##
/* 캐릭터 한마디 나오는 부분 표시 */
.say { font-size:15pt; font-family:batang; font-weight:bold; }

## 캐릭터명 표시 부분을 전체 기본 글씨 크기인 9포인트보다 큰 12포인트로, 그리고 굵게 표시했습니다. (기본) 캐릭터명은 보통 list_main.php, view.php ##
/* 캐릭터명 표시, list_main.php, view.php의 캐릭터명 */
.char_name { font-size:12pt; font-weight:bold; }

# 비밀글은 캐릭터명 앞에 ! 느낌표로 표시합니다. 굵게 표시하고 색상은 red로 표시했습니다. (기본) 색상을 바꾸고 싶으시다면 red 대신 다른 색상명을 입력하시거나 색상코드를 입력해 주세요. #
/* 비밀글 표시, list_main.php, 캐릭터명 앞에 !(느낌표)로 표시됨 */
.secret { font-weight:bold; color:red; }

## 프로필내용(view.php)에 성격, 외모, 기타 등의 글씨 아래에 구분선을 넣고 싶을 경우 이 부분을 변경해서 사용 할 수 있습니다. border-top:1px solid gray; border-bottom:1px solid gray; 이런것들을 추가할 수 있습니다. ##
/* 프로필 타이틀 라인 */
.text_line_table { border-top:1px solid gray; border-bottom:1px solid gray; background-color:transparent; }

## 목록에 두상이미지가 뜨도록 할 경우 게시물의 테두리나 배경색을 넣을 수 있습니다. border:0; 대신 border:1px solid gray; 를 넣거나, background-color:gray; 등을 추가할 수 있습니다. ##
/* 리스트 메인 부분 list_main.php */
.main_table { border:0; }

## 입력창 부분. 글쓰기 폼. 버튼표시 ##
/* 글쓰기 입력창(input) */
.input { border:1px solid gray; background-color:transparent; }
/* 캐릭터 한마디 입력창 */
.say_input { border:1px solid gray;  font-size:15pt; font-family:batang; font-weight:bold; background-color:transparent; text-align:center; }
/* 버튼(submit) 표시 */
.submit { border:1px solid gray; font-size:8pt; color:#999999; background-color:transparent; }

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

3. 다른 디자인으로 변경하기 (패치파일 설명)

패치파일을 기존 스킨 파일에 덮어씌움으로써 게시판의 디자인을 변경할 수 있습니다. 다운로드 하셨을 때 초기 형태는 [0]번 '뷰_전신왼편_기본' 과 [2]번 '목록_이미지+프로필 가로형'으로 되어 있습니다.

바꿀 수 있는 디자인은 '목록'이 출력되는 부분과 '내용(뷰)' 부분과 '글쓰기창'의 형태, 이렇게 세 부분입니다.

[0]뷰_전신왼편_기본: 전신이 왼편에 프로필 내용이 오른편에 출력

[1]목록_게시판(리스트)형: 목록이 일반적인 게시판 형태로 표시됩니다. (줄공책마냥) 캐릭터명만 나열됩니다.
목록을 게시판(리스트)형으로 사용하시려면 스킨 파일내의 setup.php 파일을 열고 가장 상단에
<? $maxline="3" // 가로 칸 수 (5칸이면 가로사이즈 *5가 됩니다.) ?>
를 3에서 -> 1(한줄에 한칸) 으로 변경한 후에 사용해 주셔야 합니다.
[2]목록_이미지+프로필 가로형: 목록에 두상이미지가 출력되고 간단한 프로필 내용이 두상이미지의 오른편에 출력
[3]목록_이미지+프로필 세로형: 목록에 두상이미지가 출력되고 간단한 프로필 내용이 두상이미지의 아래쪽에 출력

목록에 출력되는 간단한 프로필 내용은 lis_main.php 을 수정하시면 됩니다.

<?=$name?>: 오너명
<?=$profile?>: 오너의 생년월일

<?=$profile1?>: 캐릭터의 성별
<?=$profile2?>: 캐릭터의 나이
<?=$profile3?>: 캐릭터의 키

<?=$profile4?>: 캐릭터의 소속(직업)

<?=$profile5?>: 캐릭터 한마디
<?=$profile6?>: 캐릭터 외모
<?=$profile7?>: 캐릭터 성격
<?=$profile8?>: 캐릭터 기타사항

<?=$profile9?>: 관리자만 입력할 수 있는 항목 (포인트란 등으로 사용)

목록의 가로에 출력되는 게시물 수는 스킨 파일내의 setup.php 파일의 가장 상단에 있는
<? $maxline="3" // 가로 칸 수 (5칸이면 가로사이즈 *5가 됩니다.) ?>
를 수정하시면 됩니다. 기본은 한 줄에 3칸 출력입니다.
게시판의 전체 가로 길이를 고려하여 적당한 칸 수를 입력해 넣으시면 됩니다.

[4]글쓰기창_구버전: 글쓰기창을 옛날 버전으로 사용할 수 있습니다. 보통 다른 디자인들은 내용(뷰)이 뜨는 부분과 비슷한 글쓰기 폼을 가지고 있습니다. 내용(뷰)과 비슷한 글쓰기 폼이 마음에 들지 않으실 경우 구버전을 따로 덮어씌기 한 후에 사용하세요.

[5]뷰_전신상단: 전신이 프로필 내용 위쪽에 출력
[6]뷰_전신상단2_두상아래 프로필: 공유글의 첨부이미지 참조
[7]뷰_전신상단3: 뷰에 두상이미지가 출력되지 않음 (목록 부분에는 뜸)

[8]뷰_ 전신중단: 맨 위에 두상과 간략한 프로필이 뜨고 그 아래 전신, 그리고 전신 아래에 성격, 외모, 기타 등이 출력