포인트 랭킹 위젯에

사이트 활용팁

2024.11.04 18:46

포인트 랭킹 위젯에 "레벨 아이콘, 회원프로필" 등 추가

관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 오래 전 2024.11.04 18:46 인기 디자인|위젯| 목록|
404

6

포인트 랭킹 위젯 업데이트: 레벨 아이콘 및 프로필 기능 강화

1. 레벨 아이콘 추가: 회원들의 현재 포인트에 따른 **레벨 아이콘($pointrank_icon)**이 랭킹 옆에 표시되어, 한눈에 회원의 활동 등급을 파악할 수 있습니다. 특히 1, 2위는 특별한 배경으로 더욱 돋보이게 디자인되었습니다.
2. 회원 프로필 연동: 각 회원의 닉네임 옆에 회원 프로필 정보가 자연스럽게 연결되어, 랭킹을 보면서 해당 회원의 정보를 쉽게 확인할 수 있습니다.
직관적인 랭킹 변화: 기존처럼 **현재 주간 랭킹과 지난주 대비 랭킹 변화($rank_change)**를 함께 제공하여, 회원들의 활발한 활동을 시각적으로 명확하게 보여줍니다.

이번 업데이트를 통해 회원들은 자신의 랭킹과 레벨을 더욱 직관적으로 확인하고, 다른 회원들의 활동을 더 흥미롭게 지켜볼 수 있게 되었습니다. 그누보드 미니님a 께서 제작하신 기본 위젯을 리빌더에서 스타일 변경 후 재배포된 자료 입니다. 해당 자료를 제목에서 언급한대로, 각 랭커 네임 앞에 레벨 아이콘울 출력하는 소스코드 입니다.

위젯 소스코드

    <ul class="bbs_main_wrap_point_con">
    <div class="swiper-container swiper-container-point_rank">
    <ul class="swiper-wrapper swiper-wrapper-point_rank">

    <?php
    $rank = 1;
    while ($rows = sql_fetch_array($current_week_result)) {
    $mb_id = $rows['mb_id'];
    $mb_nick = $rows['mb_nick'];
    $total_points = number_format($rows['total_points']);
    $rank_change = get_rank_change($mb_id, $rank, $last_week_ranking);
    $pointrank_icon = get_pointrank_icon(get_point_sum($rows['mb_id'])); //추가 포인트랭크 아이콘 추가
    echo "<dd class='swiper-slide swiper-slide-point_rank'>";
    if($rank == 1) {
    echo "<span class='point_list_num top1_bg'>{$rank}</span> <span class='point_list_point'> {$pointrank_icon}</span>"; //추가
    } else if($rank == 2) {
    echo "<span class='point_list_num top2_bg'>{$rank}</span> <span class='point_list_point'> {$pointrank_icon}</span>"; //추가
    } else {
    echo "<span class='point_list_num'>{$rank}</span> <span class='point_list_point'>{$pointrank_icon}</span>"; //추가
    }
    echo "<span class='point_list_name'><span class='cut'>{$mb_nick}</span></span>";
    echo "<span class='point_list_point font-H'>{$total_points} P </span> ";
    echo "<span class='point_list_ch'>{$rank_change}</span>";
    echo "</dd>";
    $rank++;
    }
    ?>
    <!-- } -->
    </ul>

2024.11.05 수정사항 : 아래 css 파일 수정 필요

.point_list_num {background-color: #aaa; color:#fff; font-size: 12px; line-height: 20px; border-radius: 4px; margin-right: 3px; float:left; text-align: center; width:25px;}
.point_list_ch {background-color: #aaa; color:#fff; font-size: 10px; line-height: 20px; border-radius: 4px; margin-right: 5px; float:left; text-align: center; width:25px;}

.point_list_profile {line-height: 16px; float:left; margin-right: 3px; width:16px; height:16px;}
.point_list_icon {line-height: 16px; float:left; margin-right: 3px; width:16px; height:16px;}
.point_list_level {line-height: 16px; float:left; margin-right: 3px; width:16px; height:16px;}

.point_list_name {line-height: 20px; float:left; width: 45%;}
.point_list_point {line-height: 20px; float:right; font-size: 12px;}

.top1_bg {background-color: #AA20FF;}
.top2_bg {background-color: #25282B;}

PDF

인쇄

공유하고, 소통하다

빌런은 디스코드, 인스타그램, 페이스북, 카카오톡, 텔레그램 등 다양한 메신저에서 발생하는 범죄, 사기, 보이스피싱, 스캠과 함께 중고 거래, 데이트 폭력, 학교 폭력, 술집 진상, 게임 사기꾼, 나쁜 회사 상사, 일상 속 매너 없는 사람들에 대한 정보를 공유하는 플랫폼입니다. ... 자세히보기

또한, 한국 아이돌, 배우, 해외 유명인, 스포츠 스타, 인플루언서에 대한 팬클럽 게시판도 운영하여, 좋아하는 스타와 소통할 수 있는 공간을 제공합니다. 안전한 커뮤니티에서 우리의 경험을 나누고, 더 나은 사회를 만들어 갑시다. ... 접기

주의사항.

본 사이트의 모든 게시물과 그에 포함된 텍스트, 이미지, 동영상 등 모든 콘텐츠는 본 사이트에서 독자적으로 편집 및 표현 방식을 수정하여 완성된 창작물입니다. 저작권법 및 관련 법령에 따라 보호를 받습니다. 따라서, 본 정보는 사이트 운영자의 명시적인 서면 동의 없이 무단으로 전재, 복사, 배포, 재가공, 또는 어떠한 형태로든 상업적/비상업적으로 활용될 수 없습니다. ... 자세히보기

또한, 게재된 정보는 개인적인 열람 및 참고 이외의 어떠한 용도로도 사용할 수 없습니다. 이를 위반할 경우 관련 법률에 의거하여 민·형사상의 책임을 질 수 있습니다.

본 사이트는 등록자가 게재한 자료의 내용에 대한 정확성, 완전성, 신뢰성을 보증하지 않으며, 해당 정보의 오류나 누락에 대해 어떠한 책임도 지지 않습니다. 또한, 사용자가 본 정보를 신뢰하여 취한 직간접적인 모든 조치나 결과에 대해서도 책임을 부담하지 않습니다. 정보 사용에 따른 모든 위험은 사용자 본인에게 있습니다. ... 접기

이전글댓글 입력폼 높이 변경 하기2024.11.05

다음글리빌더, 헤더 부분의 메뉴 아래 그림자 효과 설정값 변경 방법2024.11.04

댓글목록

관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

　오래 전 2024-11-04 18:47

훌륭한 작업이네요! 이 위젯을 사용하면 웹사이트에서 포인트 랭킹을 더 명확하고 시각적으로 매력적으로 표시할 수 있을 것 같습니다. 레벨 아이콘과 회...

훌륭한 작업이네요! 이 위젯을 사용하면 웹사이트에서 포인트 랭킹을 더 명확하고 시각적으로 매력적으로 표시할 수 있을 것 같습니다. 레벨 아이콘과 회원 프로필을 추가한 점도 좋습니다. 사용자는 자신의 순위를 더 쉽게 파악하고 다른 랭커와 비교할 수 있게 될 것입니다. 이 위젯을 사용하고 싶은 다른 사람들에게도 도움이 되는 유용한 정보를 공유해 주셔서 감사합니다.