최근에 배포된 메달시스템 기능 경험치 모듈로 커뮤니티와 같은 곳에서 열심히 활동한 회원의 경우 활동메달을 보유하게 됩니다. 사이트 전역에서 닉네임이 출력될때 옆에 활동메달이 표시됩니다. 

 

메달이 표시되는건 애드온에 의해서 출력이 되는데 각종 스킨에서 member_회원번호 의 class를 닉네임 부분에 포함시켰기 때문입니다.

 

제가 사용하는 출석부 위젯의 출석 명단에는 이부분이 적용되어 있지않고 프로필이미지를 출력하고 있는데 너무 작은 프로필 이미지는 쓸모도 없고 사이트에서 통일된 모습으로 다른 곳과 동일하게 활동메달과 같은 아이콘을 출력해 주는게 보기 좋아서 고쳐 보았습니다.

 

 

 

이런식으로 고쳤습니다.

 

출석 순위는 원래 1위 이런 텍스트로 되어 있었습니다.

 

 

위 위젯은 아래의 링크의 자료 입니다.

 

https://xetown.com/tips/765990

 

위젯의 php 파일에서 우선 수정을 합니다.

pr_take_roll.class.php

 

대략 230번 즈음 라인에서

$tmp = '<span class="rank">' . number_format($key + 1) . '</span>';

//$tmp .= '<span class="profile_img"><img src="' . $val->profile_src . '"></span>';
$tmp .= '<span class="nick_name member_' . $val->member_srl . '">' . $val->nick_name . '</span>';

 

저는 숫자만 표시하고 숫자에 박스를 그려주기 위해 "위" 글자는 제거했습니다.

프로필 이미지 부분은 // 로 주석해 주고 아랫줄을 member_회원번호의 class를 가지도록 고쳐줍니다.

 

 

 

그리고 이제 css를 고쳐줍니다. 저희는 밝은 색상을 사용해서  white.css 에서 고쳤습니다.

 

대략 37번 라인 쯤 프로필 이미지때문에 필요했던 부분을 제거해야 합니다.

/*.take_roll_show_list ul li span img{
    height: 18px;
    width: 18px;
    padding: 1px;
    border-radius: 50%;
    border: 1px solid #909599;
}*/

 

이렇게 주석을 해줬습니다.

 

 

43번 라인 즈음 순위 부분 꾸며주는 부분에을

 

.take_roll_show_list ul li span.rank {
    float: left;
    width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0;
    border: 1px solid #ccc;
    color: #333;
    font-size: 10px;
    text-align: center;
    letter-spacing: -.1em;
}

 

이렇게 해서 순위 숫자에 박스가 그려지도록 했습니다.

 

 

이정도 하면 다 된것인데 혹시 출석일수 와 같은 것이 비슷한 선상에 나오길 원한다면

 

63번 라인 쯤에서 아래를 찾아서

.take_roll_show_list ul li span.point {
    color:#F44336;
    vertical-align: top;
}
.take_roll_show_list ul li span.conti {
    color:#689F38;
    vertical-align: top;
}

 

vertical-align: top; 을 넣어주면 비슷한 라인으로 맞춰집니다.