비

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

· 2025-03-30 (일) 17:49:14 · 3199 · 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,664
25-04-09 조회 4,015
25-04-08 조회 3,218
25-04-02 조회 3,236
25-03-30 조회 3,200
25-03-27 조회 3,161
25-03-26 조회 3,075
25-03-26 조회 3,219
25-03-25 조회 3,276
25-03-23 조회 3,244
25-03-21 조회 3,348
25-03-20 조회 3,177
25-03-19 조회 3,220
25-03-18 조회 3,460
25-03-17 조회 2,986
25-03-13 조회 3,106
25-03-12 조회 3,503
25-03-09 조회 3,074
25-03-06 조회 3,240
25-03-05 조회 3,401
25-03-04 조회 3,361
25-03-04 조회 2,834
25-02-27 조회 3,312
25-02-27 조회 3,001
25-02-27 조회 2,862
25-02-27 조회 3,061
25-02-27 조회 3,173
25-02-24 조회 3,186
25-02-22 조회 3,080
25-02-21 조회 3,064