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

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

기술자료

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

페이지 정보

댓글 0건 조회 1,376회 작성일 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 369건 1 페이지
기술자료 목록
번호 제목
369 그누보드   30  2018-09-15 08:08  
368 그누보드   154  2018-08-30 10:41 ~ 2018-08-30 10:48  
367 그누보드   164  2018-07-25 03:41 ~ 2018-08-26 05:56  
366 그누보드   193  2018-07-20 20:47 ~ 2018-07-20 21:01  
365 그누보드   185  2018-07-17 02:10  
364 그누보드   303  2018-06-19 14:54  
363 그누보드   364  2018-06-06 23:53 ~ 2018-06-07 09:41  
362 그누보드   351  2018-05-28 13:20 ~ 2018-05-28 21:58  
361 그누보드   296  2018-05-28 12:22  
360 그누보드   432  2018-05-25 14:04 ~ 2018-05-25 14:05  
359 그누보드   418  2018-05-08 12:21 ~ 2018-05-08 12:40  
358 그누보드   401  2018-04-25 12:47 ~ 2018-04-25 12:54  
357 그누보드   455  2018-04-24 03:11 ~ 2018-04-24 04:42  
356 그누보드   685  2018-03-31 00:40 ~ 2018-04-03 15:22  
355 그누보드   809  2018-03-24 06:53 ~ 2018-03-26 09:55  
354 그누보드   878  2018-03-14 02:20 ~ 2018-07-18 16:32  
353 그누보드   979  2018-03-02 01:45 ~ 2018-03-02 09:32  
352 그누보드   1176  2018-02-13 19:04 ~ 2018-02-13 22:44  
351 그누보드   1480  2018-02-03 00:39 ~ 2018-02-05 19:35  
350 그누보드   1241  2018-01-31 15:37 ~ 2018-03-07 06:06  
게시물 검색

회원로그인

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

접속자집계

오늘
99
어제
2,633
최대
3,174
전체
4,260,559

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