더이상 설치하지마세요!!
기본 레이아웃이 좌측으로 변경되었습니다!!
요거 설치하시면 이제 레이아웃 깨지실 겁니다.
맥 스크린샷

윈도우 스크린샷

위 스크린샷처럼 보이게 하는 css입니다.
크롬 웹스토어에서 Stylish 추가 후 설정해주시면 됩니다.
v0.2 변경점
- 가로 넓을때 중앙으로 오도록 변경
- 검색창 상단으로 변경 및 고정
- 로그인창 좌측 메뉴로 변경
- 좌측 메뉴 모양 다듬음
- 기본 폰트 변경 (맥:애플 산돌 고딕 네오 / 윈도우:돋움)
- 여러 간격조정
- 글자크기 조정
- 댓글 아이피, 날짜, 기능버튼 기본 노출
아래 css를 넣으시면 됩니다.
------------------------
/* layout */
body {position:relative;width:100%;height:100%;font-family:'Apple SD Gothic Neo','Dotum',sans-serif;}
.back-to-top {position: absolute;top: 0;}
.container {width:1260px;min-width:1260px;}
p {margin:0;}
.nav {position:absolute;top:0;height:100%;min-width:1260px;background-color:transparent;z-index:auto;}
.nav .nav-logo {position:fixed;width:140px;float:none;padding:8px 10px 8px 10px;z-index:99990;border-left:none;}
.nav .dropdown-menu {position:relative;box-shadow:none;}
.nav .dropdown-toggle {display:none;}
.nav .container {height:100%;}
.nav .nav-menu {float:none;width:140px;margin-top:163px;}
.nav .menu-toggle li {display:none;}
.nav .sub-menu {display:block;width:140px;margin:10px 0 0 10px;border:1px solid #E2E2E2;}
.nav .sub-menu ul {border-left:none;min-height:0;float:none;width:100%;background-color:#FFF;border-bottom:1px dotted #ccc;}
.nav .sub-menu ul .view-all {display:none;}
.nav .sub-menu ul .none, .sub-menu ul .block {height:0;}
.nav .sub-menu li a {padding:5px 0 4px 10px;}
.nav .sub-menu ul:hover {background:none;}
.nav .sub-menu ul li a {width:100%;}
.nav .sub-menu .extras {background-color:#FFF;border-top:none;padding:0;}
.nav .sub-menu .extras .button-promo-board {float:none;padding-top:10px;}
.nav .sub-menu .extras a {display:block;width:100%;padding:5px 0 4px 10px;}
.nav .sub-menu .extras a:hover {background-color:#37475A;color:#FFF;}
.nav .sub-menu .extras .button-promo-board {padding-top:5px;}
.nav .nav-group {float:none;width:140px;}
.nav .group-menu {display:block;width:100%;margin:10px 0 0 10px;border:1px solid #E2E2E2;background-color:#FFF;}
.nav .group-menu-inner {margin-top:5px;}
.nav .group-menu ul {float:none;border-bottom:1px dotted #ccc;}
.nav .group-menu ul li {width:100%;padding:0;}
.nav .group-menu ul li a {width:100%;padding:5px 0 4px 10px;}
.nav .group-menu ul li a:hover {background-color:#37475A;color:#FFF;}
.nav .group-menu ul:nth-child(2) {border-left:none;}
.nav .group-menu .group-sub-menu .group-menu-action {position:relative;width:100%;}
.nav .group-menu .group-sub-menu .group-menu-action a {float:none;width:100%;margin-left:0;padding:5px 0 4px 10px;}
.nav .group-menu .group-sub-menu .group-menu-action .button-list{border-right:none;}
/* layout - sidebar */
.sidebar {float:none;}
.sidebar .side-account {position:absolute;left:0;top:44px;width:140px;z-index:99900;margin:10px 0 0 10px;border:1px solid #E2E2E2;}
.sidebar .side-account .account-msg, .side-account .account-noti {height:auto;padding:0;}
.sidebar .side-account .sign-in .button-region a {width:48%;font-size:11px;}
.sidebar .side-account .sign-in .button-region a:nth-child(2) {font-size:0;}
.sidebar .side-account .sign-in .button-region a:nth-child(2)::after {content:'ID/PW 찾기';font-size:11px;}
.sidebar .side-account .sign-in input[type="text"], .side-account .sign-in input[type="password"] {height:auto;padding:1px 5px;}
.sidebar .side-account .sign-in label {margin:9px 0 6px;font-size:11px;}
.sidebar .side-account .sign-in .sign-in-submit {padding:0 10px;top:21px;}
.sidebar .div-rs-side-foot {position:absolute;left:1230px;top:54px;}
.sidebar .div-rs-side-foot.affix {position:absolute;left:1230px;top:54px;}
/* layout - search */
.nav .contents-title {position:fixed;left:0;top:0;height:44px;width:100%;float:none;z-index:99980;background-color:#232F3E;}
.nav .contents-title .board-search {position:relative;width:1090px;min-width:1090px;margin:0 auto;border-right:none;}
.nav .contents-title .board-search .side-search {position:absolute;left:855px;top:7px;}
/* layout - container */
.nav-container {min-width:1260px;}
.nav-container .container {padding:44px 0 0 160px;}
.nav-container .container .content {display:table;float:none;padding:10px 20px 60px 20px;width:1022px;border-left:1px solid #E2E2E2;border-bottom:1px solid #E2E2E2;}
/* view */
.fr-view, .post-article {font-family:'Apple SD Gothic Neo','Dotum',sans-serif;}
.title-subject .subject-category, .post-title .title-subject {font-size: 14px; }
.comment .comment-row {background-color:#FFF;}
.comment .comment-row .button-region {display:block;}
.comment .comment-row:hover .button-region {animation:none;}
.comment .comment-row .comment-ip {display:block !important;right:140px;}
.comment .comment-row .comment-ip, .comment .comment-row .comment-time {font-size:0;}
.comment .comment-row .comment-ip span, .comment .comment-row .comment-time span {font-size:12px;display:block !important;border:none;background-color:transparent;}
/* list */
.board-list .list-title {padding:6px 0;}
.board-list .list-title .list-subject {font-size: 12px;height: 18px;}
.subject-status, .subject-category, .subject-soldout, .subject-shortname {width:80px;display:inline-block;text-align:right;}
/* main */
.list-foot {width:100%;}
크롬 https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
파이어폭스 https://addons.mozilla.org/en-US/firefox/addon/stylish/
(설치방법 - 크롬기준 / 파폭도 거의 유사합니다.)
1. 설치하시고 새로 생기는 S 모양을 눌러서 create new style을 선택
2. Code 1 밑에 위에 부분을 복붙 / applies to에 URLs on the domain, 그리고 clien.net이 되어있는지 확인
3. 왼쪽에 Enter a name에 대략 제목 입력
4. save 버튼 눌러서 저장
5. 적용된 것 확인
이렇게 하시면 됩니다.
적용해제는 똑같이 S 눌러서 아까 입력한 제목 마우스오버 하시면 수정(Edit) / 비활성화(Deactivate) / 삭제(Delete) 가능합니다.
추가로, 아이콘 깨지시는 분들은
https://www.clien.net/service/board/lecture/6822381CLIEN
이거 참고하셔서 글꼴 바꾸시면 됩니다. 원하는 글꼴명은 바꿔서 쓰시면 되요.
이제 좀 할맛 나네요~ 그나 저나 엄청 신기하구만요!
현재는 브라우저 왼쪽으로 메뉴가 붙어있는데, 본문영역 바로 옆으로 설정이 되면 더 좋을 것 같습니다..^^
첫 줄에 body {position:relative;width:100%;height:100%;font-family:sans-serif} 요기서
width:100% 부분을 width:1450px 로 바꾸니까 붙네요.
참고로 전 문과라 이런 거 하나도 모릅니다. 그냥 비교해서 여기 아닐까 싶어 바꾸니 일단 붙긴 합니다.
사파리에서 어떤 확장프로그램으로 적용하셨나요?
사파리 기본 CSS 적용하는걸로 하니 클리앙이 제대로 안뜨네요 ㅠㅠ
로그인창도 좌측메뉴나 게시판이름 옆으로 이동부탁드립니다 ㄷㄷ 감사해요
혹시 로그인 메뉴도 네비게이션 메뉴로 넣어버릴수 없을까요?
'제목' '제목+내용' '이름'..... 이런식으로요.
사파리에서 어떻게 적용하셨나요?
사파리 자체 CSS 설정하는걸로 하니 클리앙이 제대로 안떠서요 ㅠㅠ
감사합니다!!
마음의 평온을 얻었습니다 ㅜㅜ
개편6시간만에 이런게올라오는 사이트는 여기뿐일듯..
감사합니다.
저는 모공글중 유투브 포함된것이 스타일리쉬 적용하면 걍 까만화면으로 나오네요.
근데, 개편 디자인 하신분은 좀 아쉬울 지도... ㅎㅎㅎ
환절기에도 건강하시길 바랄게요.
웨일에도 적용이 되네요.
다만 로그인창이 삐져나와보이는데 ㅋㅋ 최신 크롬이 아니라 그냥 쓰려구요 감사합니다.
.back-to-top {position: absolute;top: 0;}
사파리 완전 껐다키니까 (Cmd + Q) 적용되네요
아 살거같다 감사합니다 ㅠㅠㅠ!!!