비로그인 상태에서 UI 커스텀

줄간격 조절과 좌측 메뉴 기능을 정말 유용하게 사용중이지만, 적용에 매번 시간이 걸리고 로그인이 되어있지 않을 때 적용이 되지 않아 꽤나 불편했었습니다.

거기다, 자주 코드가 바뀌는 탓에 오타가 들어가 커스텀 스타일 적용이 안되고 있었습니다. 그렇다고 다모앙을 안 할수는 없지 않습니까 ㅎㅎ 방법을 알아봤습니다.

소스 보기를 눌러 조금 보니 다음과 같은 코드를 통해 커스텀 스타일을 적용하는 듯 하더군요.

function set_ui_custom(){    $("#user_ui_custom_styles").remove();    var ui_custom_storage_str = localStorage.getItem("ui_custom");    if (ui_custom_storage_str != null && ui_custom_storage_str != "") {        var ui_obj = JSON.parse(ui_custom_storage_str);        var ui_keys = Object.keys(ui_obj);        var ui_custom_style = "";        var ui_root_style = "";        var ui_media992_style = "";        if (ui_obj.ui_custom != null && ui_obj.ui_custom) {            //화면 너비 설정            if (ui_obj.show_width != null) {                ui_custom_style += ".container {max-width: " + ui_obj.show_width + "px !important;}\n";            }            //메뉴 스크롤 적용            if (ui_obj.menu_scroll != null && ui_obj.menu_scroll) {                ui_custom_style += "#header-copy.header-copy {display: none;}\n";                ui_custom_style += "#header-navbar.site-navbar {position: relative !important;display: block !important; height: 64px !important;}\n";            }            //닉네임 감추기            if (ui_obj.hide_nick != null && ui_obj.hide_nick) {                var profile_html = $(".sv_member.ellipsis-1").html();                $(".sv_member.ellipsis-1").html(profile_html.substr(0,profile_html.indexOf("/span>")+6)+" 회원님");            }            //미리보기창 끄기            if (ui_obj.img_preview != null && ui_obj.img_preview) {                ui_custom_style += "div.popover.bs-popover-auto.fade.show_ {display: none !important;}\n";            }            //root style 글씨체 및 크기            if (ui_obj.font_family !=null) {                ui_root_style += "--bs-body-font-family:" + ui_obj.font_family + " !important;\n";            }            if (ui_obj.font_size !=null) {                ui_root_style += "--bs-body-font-size:" + ui_obj.font_size + "em !important;\n";            }            if (ui_obj.line_height !=null) {                ui_root_style += "--bs-body-line-height:" + ui_obj.line_height + " !important;\n";            }            //media 992px 이상            //왼쪽 메뉴 적용            if (ui_obj.left_menu != null && ui_obj.left_menu) {                ui_media992_style += ".order-2 {order: 0 !important;}\n";ㅊ            }            //메뉴바 크기 설정            if (ui_obj.menu_width != null) {                var content_width = 100 - ui_obj.menu_width;                ui_media992_style += ".col-lg-9 {width: " + content_width + "% !important;}\n";                ui_media992_style += ".col-lg-3 {width: " + ui_obj.menu_width + "% !important;}\n";            }            //검색메뉴 항상 보임            if (ui_obj.list_search != null && ui_obj.list_search) {                ui_media992_style += "#boardSearch {display: block !important;}\n";            }            if (ui_root_style != "") {                ui_custom_style += ":root {\n" + ui_root_style + "}\n";            }            if (ui_media992_style != "") {                ui_custom_style += "@media (min-width: 992px) {\n" + ui_media992_style + "}\n";            }            //console.log(ui_custom_style);            if (ui_custom_style != "") {                document.body.innerHTML += "<style id=\"user_ui_custom_styles\">\n" + ui_custom_style + "</style>";            }        }    }}

즉, 매번 로딩이 끝난 후 이것이 실행되어 문서 멘 마지막에 <style id="user_ui_custom_styles"> 항목을 추가하는 것입니다.

Stylus(Firefox, Chromium)와 같은 유저스타일 관리자를 설치하고 해당 CSS를 추가하면 로그인 상태와 로딩 시 지연 없이 사용할 수 있습니다.

설치 후 "Write style for"를 누르고 예시와 같이 붙여넣으시면 됩니다. 이는 너비 1400px, 굴림 글꼴, 줄간격 1.1과 15% 좌측 메뉴를 설정한 것입니다.

container {max-width: 1400px !important;}:root {--bs-body-font-family:굴림 !important;    --bs-body-line-height:1.1 !important;}@media (min-width: 992px) {    .order-2 {order: 0 !important;}    .col-lg-9 {width: 85% !important;}    .col-lg-3 {width: 15% !important;}}

그럼 다들 즐 다모앙 하세요 ^^