부트스트랩 5.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
스타일 입력
※ 참고사항
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
댓글 전체



감사하게 사용하겠습니다.