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

상하단 색상 바꾸기 : 기본처리 + hook처리 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문

그누 기본설정에서 상하단 색상 및 스크롤바를 쉽게 스타일링하는 방법입니다. pc모드만 설명합니다.


<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>

그런데 이건 코어문서 증 head 에 낑궈야 하니까 아래처럼 hook 으로 처리하는 것이 좋습니다.

head 의 가장 마지막에 css 를 동적으로 보태줍니다.

아래코드를 php 파일로 저장하고 extend 디렉토리로 업로드합니다.


<?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>
"; });

하지만 이리되면 body 마감 바로 앞에서 스크립트가 보여지므로 style 만 head 마지막에 낑구고

본인은 찌그러지는 것이 소스에서는 더 깨끗합니다. 일종의 눈속임이지만요.


<?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>
"; });