로그인

검색

Extra Form
추천지수 6

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

 

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

 

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

 

 

출석부위젯.png

 

이런식으로 고쳤습니다.

 

출석 순위는 원래 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; 을 넣어주면 비슷한 라인으로 맞춰집니다.

 

 

이 컨텐츠가 마음에 드셨다면 커피 한잔 (후원)

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
0 추천
Atachment
첨부 '0'

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views99 Votes0
    Read More
  6. Read More
  7. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 18

    Date2021.04.10 Category기능 Views125 Votes0
    Read More
  8. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views102 Votes1
    Read More
  9. 본문 게시글 주소 클립보드 복사 기능 만들기 19

    Date2021.04.06 Category기능 Views304 Votes0
    Read More
  10. Read More
  11. 라이믹스 2.0 회원 서명 높이를 조절 하고 싶다면

    Date2021.03.13 Category기능 Views139 Votes1
    Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Flex 레이아웃 로그인 오류 메시지 안뜨는 문제 해결

    Date2021.01.31 Category오류 Views117 Votes0
    Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
  23. Read More
  24. Read More
  25. Read More
  26. Read More
  27. Read More
  28. Read More
  29. Read More
  30. Read More
  31. Read More
  32. Read More
Prev 1 2 3 4 Next
/ 4
닫기
작성자에게 커피 한잔(후원)을 사주세요.
컨텐츠 작성자 : 꿀팁관리소장

후원하셨던 이름을 알려주세요.

후원 완료
후원하셨다면 [후원 완료] 버튼을 눌려주세요.