사용중인 라이믹스 fix 된 스케치북 게시판의 회원 프로필 서명을 불러오는 get_sing 에 관련된 속성을 조금 손을 보았다.
해당 구역은 본문 내용의 하단에 위치하여 해당 글을 작성한 회원의 프로필 서명이 표시되는 곳이다.
*지금은 이 부분을 수정 하여 이런 식으로 박스 안에 인용된 서식이 구현된다.
이 요소를 수정하기 전에 문제가 해당 글을 작성 하는 회원의 프로필 이미지 가 회원 가입시 입력된 정보가 없을땐 이 부분이 비활성화 되어서 출력되지 않으며 또한 서식으로 지금은 구현된 문구가 없어서 뭔가 공간의 비 효율성? 이런게 보여졌다.
혹시 이 부분에 대한 구현을 어떤식으로 할까 궁리해 보고 일단 구글링을 해보니 xe 타운에서 리플 내용중 팁이있어서 적용시켜 봤다.
1. 해당 스킨의 _read.html 수정
루트 /modules/board/skins/costom_rhymix-sketchbook-master/_read.html
_read.html 223 line ~
*원본 코드 :
|
1
2
3
4
5
6
7
|
<!--// Sign -->
<div cond="$mi->display_sign!='N' && ($oDocument->getProfileImage() || $oDocument->getSignature())" class="rd_sign clear">
<h4><em class="fa fa-info-circle bd_info_icon"></em> Who's <em>{$oDocument->getNickName()}</em></h4>
<img cond="$oDocument->getProfileImage()" class="img fl" src="{$oDocument->getProfileImage()}" alt="profile" />
<span cond="!$oDocument->getProfileImage()" class="img fl profile no_img">?</span>
<div cond="$oDocument->getSignature()" class="get_sign">{$oDocument->getSignature()}</div>
</div>
|
cs |
*수정 코드 :
|
1
2
3
4
5
6
7
8
9
10
|
<!--// Sign //회원 프로필 서명란 커스텀 -->
<div cond="$mi->display_sign!='N'" class="rd_sign clear">
<h4><em class="fa fa-info-circle bd_info_icon"></em> Who's <em>{$oDocument->getNickName()}</em></h4>
<img cond="$oDocument->getProfileImage()" class="img fl" src="{$oDocument->getProfileImage()}" alt="profile" />
<!--//추가코드 -->
<span cond="!$oDocument->getProfileImage()" class="img fl profile no_img">?</span>
<div cond="empty($oDocument->getSignature())" class="get_sign"><p>God has given us two hand s, one to receive With And the other to give With<br>신은 한손으로 받고 한손으론 주라고 두손을 주었다.
<br>Give and Take - <b>마주잡은 우리끼리 , 커뮤니티 가치할래?</b></p></div>
<div cond="$oDocument->getSignature()" class="get_sign">{$oDocument->getSignature()}</div>
</div>
|
cs |
해당 스킨의 _read.html의 해당 부분 요서에 위와같이 코드를 변경하여 준다 즉 프로필 서명이 등록되질 않은 회원일 경우 비활성화가 아닌 미리 준비된 ? 특성의 표시되고 프로필이 등록된 회원일 경우는 프로필 이미지를 불러오게 된 코드 구문으로 변경된 것이다.
그리고 빈 공간의 활용을 위해서 사이트의 성격을 나타내는 문구를 그 안에 작성해 구현한 것이다.
이후 한가지 추가할 작업은 해당 css 폴더 안에 black.css 안의 코드를 약간 추가할 것이다.코드의 용도는 저 부분이 원래 해당 스킨의 board.css 의 get_sign 의 속성에 영향으로 color :#888 텍스트 속성으로 우리 사이트 처럼 어두운 배경을 사용하는 화면에서는 가독성이 안좋아 보인다 이 부분의 텍스트 컬러를 밝게 변경하기 위해서 즉 어두운 배경을 사용할 경우는 해당 텍스트 속성이 밝은 컬러로 따로 퍼블리싱 되게끔 black.css 에 이 요소를 추가해 줄것이다.
*black.css 추가 코드 내용
|
183
184
185
186
187
188
189
190
191
192
193
194
195
|
/* Link Board */
.bd .starRating,.bd .starRating span{background-image:url(../img/black/iconStarRating.png)}
/* Viewer */
#viewer .bd{background:#191919;border:1px solid #333}
/*sing 컬러 속성 추가 */
.rd_sign,.get_sign p{color:#ddd}
/* Mobile Editor */
.bd #mUpload{border-color:#444;background:#191919}
.bd #mUpload .bg_f_f9{border-color:#444;box-shadow:none}
.btn-toolbar .btn,#editor{color:#333}
|
cs |
위 처럼
/*sing 컬러 속성 추가 */
.rd_sign,.get_sign p{color:#ddd}
를 추가해 주어 어두운 배경 에서 사용시는 #ddd 의 밝은 회색 텍스트 컬러를 적용하여 어두운 배경 사용시의 가독성을 높여 주었다.
어두운 배경을 사용시는 추가된 밝은 텍스트 속성이 사용되며
밝은 배경 사용시 검은 컬러의 텍스트 속성을 같이 사용할수있다
비교적 간단한 코드 구성을 추가하여 공간의 활용성과 회원 프로필 서명란의 공백에 변화를 주는 내용을 구성한 부분에 대한 기록을 남긴다.
