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

본문 바로가기
사이트 내 전체검색

기술자료

그누보드 [G5] 글 제목에 색상 넣기

페이지 정보

댓글 0건 조회 1,546회 작성일 2017-10-10 15:50

본문

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

제로나라 님의 스킨을 조금 변형했습니다. 
스킨 형태로 다운받아 사용하고자 하는 분은 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
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.


Total 2,284건 1 페이지
기술자료 목록
번호 제목
공지 일반   16359  2001-08-31 11:52 ~ 2017-12-05 16:33  
2283 HTML   27  2018-10-14 01:19 ~ 2018-10-14 02:09  
2282 킴스큐   63  2018-10-04 23:04  
2281 MySQL   73  2018-10-03 02:29  
2280 MySQL   89  2018-10-02 22:55 ~ 2018-10-02 22:58  
2279 PHP   113  2018-09-30 15:07 ~ 2018-09-30 15:53  
2278 그누보드   125  2018-09-27 23:56  
2277 그누보드   103  2018-09-27 22:01 ~ 2018-09-27 22:40  
2276 그누보드   141  2018-09-22 01:04 ~ 2018-09-22 01:17  
2275 그누보드   135  2018-09-21 19:28  
2274 그누보드   169  2018-09-15 08:08 ~ 2018-10-15 14:56  
2273 PHP   230  2018-09-14 05:59  
2272 전자결제   171  2018-09-14 04:57 ~ 2018-09-14 04:58  
2271 전자결제   175  2018-09-12 14:17 ~ 2018-09-13 14:38  
2270 일반   318  2018-08-31 18:10 ~ 2018-09-14 20:50  
2269 HTML   250  2018-08-30 15:47  
2268 그누보드   254  2018-08-30 10:41 ~ 2018-08-30 10:48  
2267 PHP   234  2018-08-29 03:21 ~ 2018-08-29 17:13  
2266 JavaScript   298  2018-08-28 18:49  
2265 HTML   286  2018-08-27 14:33  
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
2,656
어제
2,925
최대
3,174
전체
4,318,895

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.