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

· 11개월 전 · 975 · 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개

좋은 팁 감사 합니다.

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

감사합니다

@너나잘해 

감사합니다 

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

그누보드5 팁자료실

+
제목 글쓴이 날짜 조회
10개월 전 조회 703
10개월 전 조회 652
10개월 전 조회 830
11개월 전 조회 859
11개월 전 조회 922
11개월 전 조회 1,084
11개월 전 조회 936
11개월 전 조회 796
11개월 전 조회 1,064
11개월 전 조회 946
11개월 전 조회 1,105
11개월 전 조회 1,354
11개월 전 조회 873
11개월 전 조회 980
11개월 전 조회 976
11개월 전 조회 940
11개월 전 조회 885
11개월 전 조회 1,031
11개월 전 조회 1,150
12개월 전 조회 1,030
12개월 전 조회 1,198
12개월 전 조회 915
12개월 전 조회 1,038
1년 전 조회 1,222
1년 전 조회 793
1년 전 조회 921
1년 전 조회 1,290
1년 전 조회 878
1년 전 조회 1,061
1년 전 조회 1,093