[G5] 글 제목에 색상 넣기 > 기술자료

• 목록

게시글 작성할때 글 제목 색상을 넣는 방법입니다.

제로나라 님의 스킨을 조금 변형했습니다. 
스킨 형태로 다운받아 사용하고자 하는 분은 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