[G5] 글 제목에 색상 넣기 > 온라인강의

본문 바로가기
 
 
 
비즈니스의 시작 비즈명함 ~ 가격, 품질, 배송 3가지 만족을 드리는 비즈명함 / 즉석명함 / 급행서비스 / 서울 전지역 수도권일부 3시간배송

오늘 12
어제 1,401
최대 2,526
전체 3,673,215

최근 방문자

2264
2251
2158
2052
1401
12
12 13 14 15 16 17
select * from g5_menu where me_use = '1' and me_link like '%lecture%'
온라인강좌 홈 > 온라인강좌 > 온라인강좌

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

페이지 정보

작성일2017-10-10 15:50 조회465회 댓글0건

본문

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

제로나라 님의 스킨을 조금 변형했습니다. 
스킨 형태로 다운받아 사용하고자 하는 분은 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,151건 1 페이지
온라인강의 목록
번호 제목
공지
일반 온라인 강좌를 소개합니다. (up.2017-12-05 16:33) 인기글 Hit.14390
2150
일반 파일명에 허용/금지 글자 (up.2017-12-15 06:00) Hit.23
2149
2148
2147
2146
2145
그누보드 [G5] 모바일 메뉴 (up.2017-12-11 11:17) 첨부파일 Hit.48
2144
2143
2142
2141
MSSQL CentOS7 + PHP7 + SQL Server 연결 (up.2017-12-07 16:22) Hit.140
2140
2139
Linux [FreeTDS] TDS(Tabular Data Stream) (up.2017-12-07 07:03) Hit.141
2138
Linux SED 명령어 사용법 (wr.2017-12-03) Hit.137
2137
2136
일반 IP로 국가 판별하기 (wr.2017-12-01) Hit.177
2135
그누보드 [G5] 댓글(코멘트) 페이징 (up.2017-12-01 06:32) Hit.188
2134
2133
2132
2131
2130
2129
2128
2127
MySQL sql_mode (up.2017-11-26 04:25) Hit.231
게시물 검색
 
 
상호: 해피정닷컴 대표:정창용 사업자등록번호:119-05-36414 (08394) 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
전화: 070-7600-3500 팩스:02-865-3528 개인정보관리:정창용 mail@happyjung.com 에스크로확인
개인정보취급방침
COPYRIGHT 2001~2017 해피정닷컴. All rights reserved. 통신판매신고:2014-서울구로-0074
 
모바일 버전으로 보기