오유 네비게이션 셀프교체기 2탄입니다.
1탄 본문에서는 텍스트 전용메뉴를 만들어서 배포하고,
1탄 댓글에서는 아이콘+텍스트 메뉴를 만들어서 배포했었습니다.
이번에는 세로형 메뉴로 만들어봤습니다.
간략한 기능 개요 :
- 게시물 목록 / 조회 화면에서 좌측 여백에 세로형 메뉴 표시
- 오유인페이지 / 회원정보 / 글쓰기 등등 가로폭이 넓은 곳은 가로형 메뉴 표시 (아이콘+텍스트형태)
- 기존 메뉴 네비게이션 중 '베오베~게시판찾기'로 보여지는 상단 가로바 스티키헤더 설정 (스크롤 내려도 따라옴)
- 오유인페이지 좌측의 리모콘 메뉴도 스티키 헤더 설정 (완전 편리함)
그러면 간단한 스샷 공개하겠습니다.
1. 첫화면 / 게시물 목록
원래는 상단의 기본 아이콘 메뉴를 지워버리고
'베오베~게시판찾기' 상단바 하나만 남기고 세로형 메뉴만 넣으려 하였으나,
이 경우 방송 / 스포츠 / 게임 게시판을 찾는 분들이 너무 불편하실 것 같아서
오유 기본 메뉴판을 유지하면서 좌측 남는 공간에 세로형 메뉴를 추가하였습니다.
세로형 메뉴로 인해 하단 공백이 생길 경우에 한해 오유 단축키가 보여지도록 했습니다.
2. 게시물 조회
가장 눈에 띄는 것은 상단의 스티키 헤더입니다.
'베오베~게시판찾기'가 보여지는 상단 메뉴바가 화면을 내려도 그대로 쫓아내려옵니다.
그리고 좌측의 세로형 메뉴에는 아이콘+텍스트 형태로 오유 게시판 목록이 노출됩니다.
고치는 김에 댓글 부분도 수정했습니다.
베스트/베오베 복사 알림이 너무 얌전한 것 같아서 떠들석하게 텍스트 수정했습니다ㅋ
그리고 추천/비공감/신고 버튼이 너무 작아서 조금 키웠습니다.
3. 오유인 페이지 및 기타
오유인페이지, 글쓰기 등을 비롯 오유 사이트 내에서 가로폭이 넓은 경우에는 세로형 메뉴를 제외했습니다.
대신 1탄 댓글에서 공개했던 아이콘+텍스트로 이뤄진 가로형 메뉴로 교체하였습니다. (이것도 상당히 편리함)
게다가 좌측의 리모콘창에도 sticky 설정을 추가하여 스크롤 내려도 따라옵니다.
오유인게시판에서 자기가 작성한 글을 클릭할 경우, 해당 글로 연결되는데 여기서도 리모콘이 따라다닙니다.
(오유 url 체계가 규칙적이지 않다보니, 이걸 구현하기 위해서 url 검출 정규식을 구현한다고 1시간동안 삽질을 ㅠㅠ)
글쓰기 모드에서도 조금 수정했습니다.
기존 아이콘 형태는 가로형 메뉴로 대체하고,
게시판 타이틀이 너무 소심하게 보여서 가독성 높게 수정했습니다.
원리
크롬 확장프로그램 중에서 웹사이트의 디자인 속성을 덮어씌우는 방식입니다.
오로지 css만 사용하기 때문에 개인정보 유출이라던가 그런거 없습니다.
사실 대댓글 버튼이 기본으로 활성화되게끔 j에이브이ascript 코드도 넣고 싶었으나,
이 테마에 사용된 확장프로그램은 오로지 css만 수정 가능하고,
자바스크립트 수정을 하려면 별도의 확장프로그램 설치라는 번거로움 및 괜한 오해 받을까봐 패스.
설치방법
1탄에서 설명했던 것과 동일합니다.
크롬에서 확장프로그램 설치하고 테마 추가해주면 끝!
크롬 확장프로그램 : Stylish
https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe
위 링크 클릭하고 들어가서 '크롬에 추가' 버튼 클릭
웹사이트의 css 설정을 수정해서 화면에 다르게 보여지도록 수정해주는 확장 프로그램입니다.
평점 4.34에 사용자만 180만명이 넘는 믿고 쓰는 프로그램임
적용방법 : 테마 설치
위 링크 클릭하고 들어가서 측의 파란색 'Install Style' 버튼을 클릭
추후 업데이트가 있을 경우에는 해당 테마의 설치링크에 접속했을 때 install style이 아니라 업데이트 버튼이 나타납니다.
업데이트 버튼을 클릭하면 자동으로 업데이트 됩니다.
주의사항
stylish 프로그램 특성상 테마가 중복으로 적용됩니다.
따라서 기존에 텍스트 메뉴 or 가로형 메뉴를 설치하셨던 경우에는
크롬 주소창 우측의 stylish 버튼을 클릭한 후 installed 탭에서 기존 테마에 대해 deactive 버튼을 눌러 비활성화시키거나,
아니면 휴지통 버튼을 눌러서 사용하지 않는 테마를 삭제하시는 것을 추천합니다.
여러개의 테마가 활성화되어있으면 css값이 충돌하여 제대로 안보여집니다.
참, 혹시 개인적으로 css 코드를 수정하여 사용할 경우에는 설치링크에서 업데이트 버튼을 누르지 마세요.
이 경우 따로 수정하신 내용은 모두 날아가버립니다.
부록
지난번 배포한 가로형메뉴 / 텍스트메뉴 설치 링크입니다.
가로형 텍스트 전용 메뉴: https://userstyles.org/styles/150534/www-todayhumor-co-kr
ㄴ 1탄 댓글에서 배포한 테마 (오로지 텍스트만 있는 메뉴)
가로형 아이콘+텍스트 메뉴 : https://userstyles.org/styles/150534/www-todayhumor-co-kr
ㄴ 1탄 본문에서 배포한 테마 (아이콘+텍스트형태 메뉴. 위에 있는 오유인페이지/글쓰기페이지에 등장한 그 메뉴임 ㅇㅇ)
마무리
오유를 조금 더 편하게 써보자!
라는 생각으로 만들었습니다.
이번 작업을 하다보니
오유가 우리나라 1세대 커뮤니티라고 확실히 느낀게
정말 옛날옛적 html 태그에 아이디나 클래스 부여 안하고 직접 스타일링 한 부분들이 중간중간 많이 섞여있군요.
어쩐 부분은 최신 기술이 적용되고, 어떤 부분은 20년전에나 쓰였던 html 1세대 태그도 보여지고,
산전수전 겪으면서 자라왔다는 것을 피부로 확 느낄 수 있었습니다ㅋ
덕분에 생각보다 작업시간이 훨~~~씬 길어지기는 했지만,
일단 세로형까지 만들고나니 개인적으로 오유를 쓰기에 상당히 쾌적하네요ㅎ
그래서 아마도(?) 당분간은 다른 형태로의 시도는 없을 것 같습니다.
마이너 업데이트가 있으면 테마 업데이트 해놓고 이곳 댓글에 수정사항 안내해드리겠습니다.
혹시 버그나 수정이 필요한 부분이 있으면, 이 게시물에 댓글로 남겨주세요
종종 들어와서 확인해보겠습니다ㅎ
게시물 수정시 화면깨짐 버그 수정 완료 / 테마 업데이트 완료
크 대단하십니다
감사합니다 잘쓸께요 ㅠㅠ
감사합니다 잘 쓸게요 ㅎㅎ
오호라 세로형 좋네요! 감사해요!
ㄷㄷ 넘나 좋다 ㄷㄷ
감사합니다. 잘 쓰겠습니다.
저는 이게 더 편하네요~
감사합니다 ^^
재능러님 재능나눔 감사합니다!!!
잘 쓸게요!
최고에요 ㅎㅎ
감사합니다
혹시 각 기능별로 분리가 될까요?
마음에 드는것 끼리 조합해서 쓰면 좋을거같습니다
https://addons.mozilla.org/en-US/firefox/addon/styl-us/
이 확장기능 까시면 파이어폭스도 마찬가지로 적용됩니다.
.
애니메이션은 생활입니다!
우와 대단하세요!!!