글 제목에 색상 넣기 정보
글 제목에 색상 넣기
관련링크
본문
스킨 형태로 다운받아 사용하고자 하는 분은 https://sir.kr/g5_skin/16279 에서 다운로드 받으세요.
제로나라 님의 스킨을 조금 변형했습니다.
제로나라님의 방식에서 공통파일을 plugin 으로 분리시켰습니다.
1. 그누보드5 / plugin / Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector 폴더 생성
http://www.jqueryscript.net/other/Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector.html 에서 다운로드 받은 자료를 업로드 합니다.
2. 그누보드5 / plugin / Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector / style.css 파일 생성
/*
https://sir.kr/g5_skin/16279
*/
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
text-decoration: none;
background-color: #337ab7;
outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.open > .dropdown-menu {
display: block;
}
.open > a {
outline: 0;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
.dropdown-menu-left {
right: auto;
left: 0;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 990;
}
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px dashed;
border-bottom: 4px solid \9;
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px;
}
3. 그누보드5 / skin / board / basic / list.skin.php 내용중
<a href="<?php echo $list[$i]['href'] ?>">
를 아래와 같이 변경
<a href="<?php echo $list[$i]['href'] ?>"<?php if ($list[$i]['wr_1']) { echo " style='color:".$list[$i]['wr_1']."' "; } ?>>
4. 그누보드5 / skin / board / basic / view.skin.php 내용중
<h1 id="bo_v_title">
를 아래와 같이 변경
<h1 id="bo_v_title"<?php if ($view['wr_1']) { echo " style='color:".$view['wr_1']."' "; } ?>>
5-1. 그누보드5 / skin / board / basic / write.skin.php 상단에 내용 추가
add_stylesheet('<link rel="stylesheet" href="'.G5_PLUGIN_URL.'/Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector/dist/bootstrap-colorselector.min.css" rel="stylesheet" />', 50);
add_stylesheet('<link rel="stylesheet" href="'.G5_PLUGIN_URL.'/Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector/style.css" rel="stylesheet" />', 51);
5-2. 그누보드5 / skin / board / basic / write.skin.php 내용중 적당한 곳에 추가
<tr>
<th scope="row"><label for="wr_1">제목컬러<strong class="sound_only">필수</strong></label></th>
<td>
<select id="colorselector_2">
<option value="#000000" data-color="#000000" <?php echo get_selected($write['wr_1'], '#000000') ?>>black</option>
<option value="#A0522D" data-color="#A0522D" <?php echo get_selected($write['wr_1'], '#A0522D') ?>>sienna</option>
<option value="#CD5C5C" data-color="#CD5C5C" <?php echo get_selected($write['wr_1'], '#CD5C5C') ?>>indianred</option>
<option value="#FF4500" data-color="#FF4500" <?php echo get_selected($write['wr_1'], '#FF4500') ?>>orangered</option>
<option value="#008B8B" data-color="#008B8B" <?php echo get_selected($write['wr_1'], '#008B8B') ?>>darkcyan</option>
<option value="#B8860B" data-color="#B8860B" <?php echo get_selected($write['wr_1'], '#B8860B') ?>>darkgoldenrod</option>
<option value="#32CD32" data-color="#32CD32" <?php echo get_selected($write['wr_1'], '#32CD32') ?>>limegreen</option>
<option value="#FFD700" data-color="#FFD700" <?php echo get_selected($write['wr_1'], '#FFD700') ?>>gold</option>
<option value="#48D1CC" data-color="#48D1CC" <?php echo get_selected($write['wr_1'], '#48D1CC') ?>>mediumturquoise</option>
<option value="#87CEEB" data-color="#87CEEB" <?php echo get_selected($write['wr_1'], '#87CEEB') ?>>skyblue</option>
<option value="#FF69B4" data-color="#FF69B4" <?php echo get_selected($write['wr_1'], '#FF69B4') ?>>hotpink</option>
<option value="#CD5C5C" data-color="#CD5C5C" <?php echo get_selected($write['wr_1'], '#CD5C5C') ?>>indianred</option>
<option value="#87CEFA" data-color="#87CEFA" <?php echo get_selected($write['wr_1'], '#87CEFA') ?>>lightskyblue</option>
<option value="#6495ED" data-color="#6495ED" <?php echo get_selected($write['wr_1'], '#6495ED') ?>>cornflowerblue</option>
<option value="#DC143C" data-color="#DC143C" <?php echo get_selected($write['wr_1'], '#DC143C') ?>>crimson</option>
<option value="#FF8C00" data-color="#FF8C00" <?php echo get_selected($write['wr_1'], '#FF8C00') ?>>darkorange</option>
<option value="#C71585" data-color="#C71585" <?php echo get_selected($write['wr_1'], '#C71585') ?>>mediumvioletred</option>
</select>
<input type="hidden" name="wr_1" value="<?php echo $write['wr_1'] ?>" id="wr_1" required class="frm_input required" size="50" maxlength="255">
</td>
</tr>
5-3. 그누보드5 / skin / board / basic / write.skin.php 끝에 추가
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="<?php echo G5_PLUGIN_URL;?>/Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector/dist/bootstrap-colorselector.min.js"></script>
<script>
$(function() {
$('#colorselector_2').colorselector({
callback : function(value, color, title) {
$("#wr_1").val(color);
}
});
});
</script>
관련자료
https://sir.kr/g5_skin/16279
http://www.jqueryscript.net/other/Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector.html
제로나라 님의 스킨을 조금 변형했습니다.
제로나라님의 방식에서 공통파일을 plugin 으로 분리시켰습니다.
1. 그누보드5 / plugin / Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector 폴더 생성
http://www.jqueryscript.net/other/Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector.html 에서 다운로드 받은 자료를 업로드 합니다.
2. 그누보드5 / plugin / Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector / style.css 파일 생성
/*
https://sir.kr/g5_skin/16279
*/
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
text-decoration: none;
background-color: #337ab7;
outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.open > .dropdown-menu {
display: block;
}
.open > a {
outline: 0;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
.dropdown-menu-left {
right: auto;
left: 0;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 990;
}
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px dashed;
border-bottom: 4px solid \9;
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px;
}
3. 그누보드5 / skin / board / basic / list.skin.php 내용중
<a href="<?php echo $list[$i]['href'] ?>">
를 아래와 같이 변경
<a href="<?php echo $list[$i]['href'] ?>"<?php if ($list[$i]['wr_1']) { echo " style='color:".$list[$i]['wr_1']."' "; } ?>>
4. 그누보드5 / skin / board / basic / view.skin.php 내용중
<h1 id="bo_v_title">
를 아래와 같이 변경
<h1 id="bo_v_title"<?php if ($view['wr_1']) { echo " style='color:".$view['wr_1']."' "; } ?>>
5-1. 그누보드5 / skin / board / basic / write.skin.php 상단에 내용 추가
add_stylesheet('<link rel="stylesheet" href="'.G5_PLUGIN_URL.'/Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector/dist/bootstrap-colorselector.min.css" rel="stylesheet" />', 50);
add_stylesheet('<link rel="stylesheet" href="'.G5_PLUGIN_URL.'/Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector/style.css" rel="stylesheet" />', 51);
5-2. 그누보드5 / skin / board / basic / write.skin.php 내용중 적당한 곳에 추가
<tr>
<th scope="row"><label for="wr_1">제목컬러<strong class="sound_only">필수</strong></label></th>
<td>
<select id="colorselector_2">
<option value="#000000" data-color="#000000" <?php echo get_selected($write['wr_1'], '#000000') ?>>black</option>
<option value="#A0522D" data-color="#A0522D" <?php echo get_selected($write['wr_1'], '#A0522D') ?>>sienna</option>
<option value="#CD5C5C" data-color="#CD5C5C" <?php echo get_selected($write['wr_1'], '#CD5C5C') ?>>indianred</option>
<option value="#FF4500" data-color="#FF4500" <?php echo get_selected($write['wr_1'], '#FF4500') ?>>orangered</option>
<option value="#008B8B" data-color="#008B8B" <?php echo get_selected($write['wr_1'], '#008B8B') ?>>darkcyan</option>
<option value="#B8860B" data-color="#B8860B" <?php echo get_selected($write['wr_1'], '#B8860B') ?>>darkgoldenrod</option>
<option value="#32CD32" data-color="#32CD32" <?php echo get_selected($write['wr_1'], '#32CD32') ?>>limegreen</option>
<option value="#FFD700" data-color="#FFD700" <?php echo get_selected($write['wr_1'], '#FFD700') ?>>gold</option>
<option value="#48D1CC" data-color="#48D1CC" <?php echo get_selected($write['wr_1'], '#48D1CC') ?>>mediumturquoise</option>
<option value="#87CEEB" data-color="#87CEEB" <?php echo get_selected($write['wr_1'], '#87CEEB') ?>>skyblue</option>
<option value="#FF69B4" data-color="#FF69B4" <?php echo get_selected($write['wr_1'], '#FF69B4') ?>>hotpink</option>
<option value="#CD5C5C" data-color="#CD5C5C" <?php echo get_selected($write['wr_1'], '#CD5C5C') ?>>indianred</option>
<option value="#87CEFA" data-color="#87CEFA" <?php echo get_selected($write['wr_1'], '#87CEFA') ?>>lightskyblue</option>
<option value="#6495ED" data-color="#6495ED" <?php echo get_selected($write['wr_1'], '#6495ED') ?>>cornflowerblue</option>
<option value="#DC143C" data-color="#DC143C" <?php echo get_selected($write['wr_1'], '#DC143C') ?>>crimson</option>
<option value="#FF8C00" data-color="#FF8C00" <?php echo get_selected($write['wr_1'], '#FF8C00') ?>>darkorange</option>
<option value="#C71585" data-color="#C71585" <?php echo get_selected($write['wr_1'], '#C71585') ?>>mediumvioletred</option>
</select>
<input type="hidden" name="wr_1" value="<?php echo $write['wr_1'] ?>" id="wr_1" required class="frm_input required" size="50" maxlength="255">
</td>
</tr>
5-3. 그누보드5 / skin / board / basic / write.skin.php 끝에 추가
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="<?php echo G5_PLUGIN_URL;?>/Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector/dist/bootstrap-colorselector.min.js"></script>
<script>
$(function() {
$('#colorselector_2').colorselector({
callback : function(value, color, title) {
$("#wr_1").val(color);
}
});
});
</script>
관련자료
https://sir.kr/g5_skin/16279
http://www.jqueryscript.net/other/Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector.html
추천
5
5
댓글 10개
좋은 팁 감사합니다 ~
감사합니다.
감사합니다.
감사합니다.
감사합니다
나눔은 기쁨입니다.
감사합니다!
좋아요..잘쓰겠습니다.감사합니다.
감사합니다. ^^
write.skin.php 위치 아무곳에 넣으면 안되고 적당한 곳에 넣으니 잘 됩니다. ^^
write.skin.php 위치 아무곳에 넣으면 안되고 적당한 곳에 넣으니 잘 됩니다. ^^
감사합니다.