상하단 색상 바꾸기 : 기본처리 + hook처리
http://wittazzurri.phps.kr/gnu_board 처럼
그누 기본설정에서 상하단 색상 및 스크롤바를 쉽게 스타일링하는 방법입니다. pc모드만 설명합니다.
[code]
<style>
#hd, #ft { background-color:#003152; }
#tnb { border-bottom:1px solid #204B68; }
#hd_sch #sch_stx { background-color:#00253d; }
#hd_sch #sch_submit { background-color:#001f33; }
#ft_copy { border-top:1px solid #204B68; }
body::-webkit-scrollbar { width:10px; height:10px; }
body::-webkit-scrollbar-thumb { background-color:#003152; }
body::-webkit-scrollbar-track { background-color:#ffffff; }
</style>
[/code]
그런데 이건 코어문서 증 head 에 낑궈야 하니까 아래처럼 hook 으로 처리하는 것이 좋습니다.
head 의 가장 마지막에 css 를 동적으로 보태줍니다.
아래코드를 php 파일로 저장하고 extend 디렉토리로 업로드합니다.
[code]
<?php
if (!defined('_GNUBOARD_')) exit;
add_event('tail_sub', function() { echo "
<script>
document.querySelector('head').innerHTML = document.querySelector('head').innerHTML + `
<style>
#hd, #ft { background-color:#003152; }
#tnb { border-bottom:1px solid #204B68; }
#hd_sch #sch_stx { background-color:#00253d; }
#hd_sch #sch_submit { background-color:#001f33; }
#ft_copy { border-top:1px solid #204B68; }
body::-webkit-scrollbar { width:10px; height:10px; }
body::-webkit-scrollbar-thumb { background-color:#003152; }
body::-webkit-scrollbar-track { background-color:#ffffff; }
</style>
`;
</script>
"; });
[/code]
하지만 이리되면 body 마감 바로 앞에서 스크립트가 보여지므로 style 만 head 마지막에 낑구고
본인은 찌그러지는 것이 소스에서는 더 깨끗합니다. 일종의 눈속임이지만요.
[code]
<?php
if (!defined('_GNUBOARD_')) exit;
add_event('tail_sub', function() { echo "
<script id='addClassScript'>
document.querySelector('head').innerHTML = document.querySelector('head').innerHTML + `
<style>
#hd, #ft { background-color:#003152; }
#tnb { border-bottom:1px solid #204B68; }
#hd_sch #sch_stx { background-color:#00253d; }
#hd_sch #sch_submit { background-color:#001f33; }
#ft_copy { border-top:1px solid #204B68; }
body::-webkit-scrollbar { width:10px; height:10px; }
body::-webkit-scrollbar-thumb { background-color:#003152; }
body::-webkit-scrollbar-track { background-color:#ffffff; }
</style>
`;
document.querySelector('#addClassScript').remove();
</script>
"; });
[/code]
<style> 안의 내용물은 css 파일로 만들고 링킹스타일시트로 처리해도 결과는 동일합니다.
댓글 4개
좋은 팁 감사 합니다.
@들레아빠 좋은 댓글 감사합니다
감사합니다
@너나잘해
감사합니다
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2484 | 1년 전 | 1262 | ||
| 2483 | 1년 전 | 863 | ||
| 2482 | 1년 전 | 712 | ||
| 2481 | 1년 전 | 1082 | ||
| 2480 | 1년 전 | 1184 | ||
| 2479 | 1년 전 | 840 | ||
| 2478 | 1년 전 | 1177 | ||
| 2477 | 1년 전 | 780 | ||
| 2476 | 1년 전 | 1587 | ||
| 2475 | 1년 전 | 923 | ||
| 2474 |
|
1년 전 | 934 | |
| 2473 | 1년 전 | 1519 | ||
| 2472 | 1년 전 | 861 | ||
| 2471 | 1년 전 | 918 | ||
| 2470 | 1년 전 | 788 | ||
| 2469 | 1년 전 | 1373 | ||
| 2468 | 1년 전 | 2958 | ||
| 2467 | 1년 전 | 853 | ||
| 2466 |
|
1년 전 | 1481 | |
| 2465 | 1년 전 | 802 | ||
| 2464 | 1년 전 | 1181 | ||
| 2463 | 1년 전 | 1352 | ||
| 2462 | 1년 전 | 1146 | ||
| 2461 |
|
1년 전 | 1171 | |
| 2460 | 1년 전 | 759 | ||
| 2459 | 1년 전 | 948 | ||
| 2458 | 1년 전 | 1345 | ||
| 2457 | 1년 전 | 1267 | ||
| 2456 |
|
1년 전 | 771 | |
| 2455 |
블랙캣77
|
1년 전 | 1496 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기