[위플랩] 마인크래프트 업적 스타일 채팅창CSS 배포

마인크래프트의 업적 느낌의 채팅창 CSS 입니다.

 

사용법

1. 위플랩 채팅창의 테마 설정 내의 커스텀 스타일 CSS 사용을 체크 후 아래 CSS 코드를 복사 후 붙여넣기

2. 표시 효과 & 속도를 slideInRight 로 변경

3. 폰트·배경 설정에서 폰트 선택 > 눈누 웹폰트 > 링크 입력 후 폰트 적용 https://noonnu.cc/font_page/801

4. 모든 설정 변경 후 우측의 설정 저장 버튼 클릭

 

※ 커스텀 스타일 CSS의 경우 우측의 미리보기가 아닌 오버레이 창을 열어서 확인해주셔야 합니다.

설정 관련 예시입니다.

CSS

#page_wrap .chat_list .chat_box {
    margin-top: 8px;
    padding: 0 !important;
    border: 4px solid #000000;
    border-radius: 10px;
}

#page_wrap .chat_list .chat_box .inner_box {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 6px solid #555756;
    border-radius: 4px;
    background: #212121;
    padding: 0.3em 0.5em 0.3em 3em;
}

#page_wrap .chat_list .chat_box.chat .inner_box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.75em;
    margin: 0 auto;
    width: 1.5em;
    height: 1.5em;
    transform: translateY(-0.75em);
}

#page_wrap .chat_list .chat_box.chat:nth-of-type(2n) .inner_box:before {
    content: "💎";
}

#page_wrap .chat_list .chat_box.chat:nth-of-type(2n+1) .inner_box:before {
    content: "⛏️";
}

#page_wrap .page_area.chat p.name {
    margin-right: 0.5em !important;
}

#page_wrap .page_area.chat p.name .icon_platform,
#page_wrap .page_area.chat p.name .icon_badge {
    display: none !important;
}