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

 

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

 



사이트 관리

사이트관리내역

  1. 캡션 : blockquote 인용구 컬러 속성 강제 적용

    Date2023.02.03 Category라이믹스기록 By김실장 Views53
    Read More
  2. 스티커 메모 위젯 (Sticky Note) 모바일 터치 오류

    Date2022.08.25 Category라이믹스기록 By김실장 Views80
    Read More
  3. 스케치북 게시판 get_sign 속성 수정

    Date2022.07.25 Category라이믹스기록 By김실장 Views83
    Read More
  4. 스케치북5 정보보기 - 맴버 스킨의 자동로그인 관리 / 작성댓글보기 탬플릿 오류

    Date2022.07.15 Category라이믹스기록 By김실장 Views81
    Read More
  5. 핫튜브 / 자료실 게시판 오류 -유튜브 링크 바로 임베드 애드온 설치로해결

    Date2022.07.14 Category라이믹스기록 By김실장 Views89
    Read More
  6. 라이믹스형 스케치북 게시판 카카오톡 & 트윗터 공유 추가

    Date2022.07.13 Category라이믹스기록 By김실장 Views133
    Read More
  7. 카카오톡 외 왭 공유 게시글 이미지 첨부 오류

    Date2022.07.13 Category라이믹스기록 By김실장 Views74
    Read More
  8. 라이믹스 업그레이드 오류내용들-(정검해봐야할 기록 정리)

    Date2022.07.11 Category라이믹스기록 By김실장 Views123
    Read More
  9. 라이믹스 업그레이드 후 소셜xe 로그인 오류

    Date2022.07.11 Category라이믹스기록 By김실장 Views191
    Read More
  10. XE 에서 rhymix 로 업그레이들 하였다.

    Date2022.07.10 Category라이믹스기록 By김실장 Views178
    Read More
  11. 스케치북5 레이아웃 사용못하는 사이드 위젯들을 커스텀하자

    Date2022.06.28 Category라이믹스기록 By김실장 Views138
    Read More
Board Pagination Prev 1 Next
/ 1

Recent Articles

Recent Comment

sketchbook5, 스케치북5

sketchbook5, 스케치북5