Skip to content

우리끼리 가치할래?우리끼리 가치할래?

라이믹스기록
2022.07.25 13:14

스케치북 게시판 get_sign 속성 수정

조회 수 83 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 게시글 수정 내역 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 게시글 수정 내역 댓글로 가기 인쇄 첨부
Extra Form
참고링크 https://xetown.com/questions/1277599

사용중인 라이믹스 fix 된 스케치북 게시판의 회원 프로필 서명을 불러오는 get_sing 에 관련된 속성을 조금 손을 보았다.

해당 구역은 본문 내용의  하단에 위치하여  해당 글을 작성한 회원의 프로필 서명이 표시되는 곳이다.

 

*지금은 이 부분을 수정 하여 이런 식으로  박스 안에 인용된 서식이 구현된다.

 

get_sign.jpg

 

이 요소를 수정하기 전에 문제가 해당 글을 작성 하는 회원의 프로필 이미지 가 회원 가입시 입력된 정보가 없을땐 이 부분이 비활성화 되어서 출력되지 않으며 또한 서식으로 지금은 구현된 문구가 없어서 뭔가 공간의 비 효율성? 이런게 보여졌다.

 

혹시 이 부분에 대한 구현을 어떤식으로 할까 궁리해 보고 일단 구글링을 해보니 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 의 밝은 회색 텍스트 컬러를 적용하여 어두운 배경 사용시의 가독성을 높여 주었다.

 

어두운 배경_get_sign.jpg

어두운 배경을 사용시는 추가된 밝은 텍스트 속성이 사용되며 

밝은 배경 사용시 검은 컬러의 텍스트 속성을 같이 사용할수있다

 

밝은 배경의 get_sign.jpg

 

비교적  간단한 코드 구성을 추가하여 공간의 활용성과 회원 프로필 서명란의 공백에 변화를 주는 내용을 구성한 부분에 대한 기록을 남긴다.

 



Recent Articles

Recent Comment

sketchbook5, 스케치북5

sketchbook5, 스케치북5