비

상하단 색상 바꾸기 : 기본처리 + hook처리

· 2025-03-30 (일) 17:49:14 · 3188 · 4

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개

좋은 팁 감사 합니다.

2025-04-01 (화) 02:29:34

@들레아빠 좋은 댓글 감사합니다

감사합니다

2025-04-08 (화) 13:42:01

@너나잘해 

감사합니다 

댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
25-04-10 조회 3,655
25-04-09 조회 4,001
25-04-08 조회 3,206
25-04-02 조회 3,223
25-03-30 조회 3,189
25-03-27 조회 3,153
25-03-26 조회 3,058
25-03-26 조회 3,208
25-03-25 조회 3,264
25-03-23 조회 3,225
25-03-21 조회 3,334
25-03-20 조회 3,162
25-03-19 조회 3,203
25-03-18 조회 3,447
25-03-17 조회 2,973
25-03-13 조회 3,096
25-03-12 조회 3,489
25-03-09 조회 3,063
25-03-06 조회 3,228
25-03-05 조회 3,385
25-03-04 조회 3,345
25-03-04 조회 2,824
25-02-27 조회 3,290
25-02-27 조회 2,982
25-02-27 조회 2,853
25-02-27 조회 3,046
25-02-27 조회 3,154
25-02-24 조회 3,175
25-02-22 조회 3,072
25-02-21 조회 3,047