부트스트랩 5.3 사용한 메이슨리 스킨 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

부트스트랩 5.3 사용한 메이슨리 스킨 정보

게시판 부트스트랩 5.3 사용한 메이슨리 스킨

첨부파일

b5_masonry_ver_0.00001.zip (26.3K) 69회 다운로드 2023-09-11 10:27:29 포인트 차감20
테스트한 버전5.5.8.3.3
호환 가능 버전5.3 이상

본문

1. 리스트 버전  스킨 (https://sir.kr/g5_skin/56973 )
2. 유튜브 및 갤러리 게시판 겸용 스킨 ( https://sir.kr/g5_skin/57019 )
에 이어 
메이슨리 게시판 스킨을 올려 드립니다. 유튜브 및 갤러리 게시판 응용버전입니다. 

부트스트랩 이용 홈페이지 작업하다가 부트스트랩 공부용으로 사용하실 수 있는 분들을 위하여 공유합니다.
기본형태입니다. 
졸작입니다. ^^

추가한 내용은 썸네일 내용에 배경화면 스타일을 넣을 수 있도록 추가 하였습니다. 


샘플보기 : http://liveshowhost.net/bbs/board.php?bo_table=masonry_basic_003

 

1954485033_1694395511.8354.jpg

 

 

스타일 입력

 

1954485033_1694395567.351.jpg

 

 

※ 참고사항

Bootstrap and Masonry 참고 사이트
https://getbootstrap.kr/docs/5.3/examples/masonry/


스타일을 바꾸시고 싶은 분 또는 삭제를 원하시는 분은 
https://getbootstrap.kr/docs/5.3/components/card/#%EC%B9%B4%EB%93%9C-%EC%8A%A4%ED%83%80%EC%9D%BC
참고하시어 수정하시면 됩니다. 

write.skin.php 
163번째 줄

<div class="mb-3 row">
    <label for="wr_2" class="col-sm-2 form-label">배경 스타일</label>
    <div class="col-sm-10">
        <input type="radio" class="btn-check" name="wr_2" autocomplete="off" id="wr_2_1"<?php if($wr_2 == ""){ ?> checked<?php } ?>>
        <label class="btn btn-outline-secondary" for="wr_2_1">기본</label>
        <input type="radio" class="btn-check" value="text-bg-primary" name="wr_2" autocomplete="off" id="wr_2_2"<?php if($wr_2 == "text-bg-primary"){ ?> checked<?php } ?>>
        <label class="btn btn-primary" for="wr_2_2">Primary</label>
        <input type="radio" class="btn-check" value="text-bg-secondary" name="wr_2" autocomplete="off" id="wr_2_3"<?php if($wr_2 == "text-bg-secondary"){ ?> checked<?php } ?>>
        <label class="btn btn-secondary" for="wr_2_3">Secondary</label>
        <input type="radio" class="btn-check" value="text-bg-success" name="wr_2" autocomplete="off" id="wr_2_4"<?php if($wr_2 == "text-bg-success"){ ?> checked<?php } ?>>
        <label class="btn btn-success" for="wr_2_4">Success</label>
        <input type="radio" class="btn-check" value="text-bg-danger" name="wr_2" autocomplete="off" id="wr_2_5"<?php if($wr_2 == "text-bg-danger"){ ?> checked<?php } ?>>
        <label class="btn btn-danger" for="wr_2_5">Danger</label>
        <input type="radio" class="btn-check" value="text-bg-warning" name="wr_2" autocomplete="off" id="wr_2_6"<?php if($wr_2 == "text-bg-warning"){ ?> checked<?php } ?>>
        <label class="btn btn-warning" for="wr_2_6">Warning</label>
        <input type="radio" class="btn-check" value="text-bg-info" name="wr_2" autocomplete="off" id="wr_2_7"<?php if($wr_2 == "text-bg-info"){ ?> checked<?php } ?>>
        <label class="btn btn-info" for="wr_2_7">Info</label>
        <input type="radio" class="btn-check" value="text-bg-light" name="wr_2" autocomplete="off" id="wr_2_8"<?php if($wr_2 == "text-bg-light"){ ?> checked<?php } ?>>
        <label class="btn btn-light" for="wr_2_8">Light</label>
        <input type="radio" class="btn-check" value="text-bg-dark" name="wr_2" autocomplete="off" id="wr_2_9"<?php if($wr_2 == "text-bg-dark"){ ?> checked<?php } ?>>
        <label class="btn btn-dark" for="wr_2_9">Dark</label>
    </div>
</div>          
        

list.skin.php 14번째 줄,  143번째 줄을 각각 바꾸시면 됩니다. 
14번째을 넣은 이유는 style별로 기본 링크 글자 색이 검정색일 경우, 바탕색 때문에 글자 색이 안나오는 것을 방지 합니다. 

//스타일클래스 정의
$b_bg_white_style_class = array("text-bg-primary","text-bg-secondary","text-bg-success","text-bg-danger","text-bg-dark");  //글자색 흰색으로 나옴
$b_bg_black_style_class = array("text-bg-warning","text-bg-info","text-bg-light");  //글자색 검정색으로 나옴


143줄 은 각 클래스별로 구분

if($list[$i]['wr_2']){
    $board_style = ' '.$list[$i]['wr_2'];
    if(in_array( $list[$i]['wr_2']  , $b_bg_white_style_class)){ 
        $board_font_style ="class=\"mj-style-color-w\"";
    }elseif(in_array( $list[$i]['wr_2']  , $b_bg_black_style_class)){  
        $board_font_style ="class=\"mj-style-color-b\"";
    }else{
        $board_font_style ="class=\"mj-style-color-b\"";
    }            
}else{
    $board_style ="";
    $board_font_style ="class=\"mj-style-color-b\"";
} //스타일 end

 

 

 

추천
7

댓글 전체

전체 2,436 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT