상하단 색상 바꾸기 : 기본처리 + 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년 전 | 4436 | ||
| 2604 | 8개월 전 | 677 | ||
| 2603 | 8개월 전 | 737 | ||
| 2602 | 8개월 전 | 651 | ||
| 2601 |
|
8개월 전 | 672 | |
| 2600 |
|
8개월 전 | 582 | |
| 2599 | 9개월 전 | 810 | ||
| 2598 | 9개월 전 | 605 | ||
| 2597 |
다케미카코
|
9개월 전 | 758 | |
| 2596 | 9개월 전 | 856 | ||
| 2595 |
|
9개월 전 | 448 | |
| 2594 | 9개월 전 | 610 | ||
| 2593 |
만두먹고또먹고
|
9개월 전 | 939 | |
| 2592 | 9개월 전 | 615 | ||
| 2591 | 9개월 전 | 622 | ||
| 2590 | 9개월 전 | 691 | ||
| 2589 |
|
9개월 전 | 761 | |
| 2588 | 9개월 전 | 480 | ||
| 2587 | 9개월 전 | 799 | ||
| 2586 | 9개월 전 | 646 | ||
| 2585 | 9개월 전 | 513 | ||
| 2584 | 9개월 전 | 581 | ||
| 2583 | 9개월 전 | 502 | ||
| 2582 | 9개월 전 | 648 | ||
| 2581 | 9개월 전 | 606 | ||
| 2580 |
만두먹고또먹고
|
9개월 전 | 519 | |
| 2579 |
|
9개월 전 | 668 | |
| 2578 | 9개월 전 | 650 | ||
| 2577 | 10개월 전 | 631 | ||
| 2576 | 10개월 전 | 564 | ||
| 2575 |
이슈DEV
|
10개월 전 | 995 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기