왓에버(Whatever) 스킨 적용하기(2) : 다크 모드 및 각종 버그 잡기

HTML 또는 CSS 설명은 하지 않겠습니다. 순차적으로 따라오시면 왓에버 다크 스킨을 완성할 수 있도록 포스팅 하겠습니다. 일반적으로 필요한 지식만 간단히 설명하겠습니다.

 

다시 말씀드리지만 이해하지 마시고 그냥 복사! 붙여넣기만 하시면 됩니다.

1. 왓에버 다크스킨 가져오기

  (1) 설정창 열기

 

설정창 열기

  (2) 스킨변경에서 왓에버 스킨 선택

 

왓에버 스킨 선택

  (3) 꾸미기에 스킨편집 클릭 후 왓에버 스킨의 어두운 선택

 

꾸미기-스킨편집-어두운 선택

 여러분은 버그 덩어리 다크스킨을 얻었습니다!. 우선 축하드립니다. 방명록/글자색/배치 등 모든것이 버그덩어리 입니다. 하나의 예로 A를 B라 입력하고 -을 _로 입력하고... 물론 개발자들이 바쁜거 압니다. 근데 최소한 디버깅(수정 및 검토작업)은 완료하고 상품을 내셔야죠?. 무책임합니다.

2. 검은색배경에 검은색 글 또는 테두리를 기타 색으로 변경하기

 검색은 화면에 검은색 글 또는 테두리를 가지는 버그입니다. 경계선도 모호하고 글자도 보이지 않는 버그입니다. 여러분들은 아래 소스를 복하사여 그대로 CSS화면 최 하단에 붙여넣기 하세요. 기능만 간단히 설명 드리겠습니다.

  (1) 검은색 배경과 검은색 사진등의 구분선을 살짝 하얗게 변경

  (2) 댓글 입력 박스 검은색에서 회색으로 변경

  (3) 댓글 입력 화면 회색으로 변경

  (4) 마우스가 올라갔을 때 갈색으로 변경

  (5) 애드센스로 인해 링크 기능이 먹통되는 문제 해결

  (6) 파일 다운로드 부분 검은색 화면을 회색으로 변경

반응형

.color-dark .postbtn_like, .txt_state{color:white} .color-dark figcaption {color:gray !important} .color-dark .og-title{color: #d4bca7 !important;}
.color-dark .comments .comment-list ul li p {color: #848484;} .color-dark .comments .comment-list ul li ul {border-top: 1px solid #222;}
.color-dark .another_category table th a {color: #bbbbbb !important;} .color-dark .another_category table th a:hover {color: #d4bca7 !important;}
.color-dark .another_category h4 {color: #bbbbbb !important; font-size: 1em !important;} .color-dark .another_category h4 a {color: white !important;} .tt_adsense_bottom{overflow:hidden}
.color-dark figure .name {color: #bbbbbb;}
pre code { margin-bottom: 20px;}

 

CSS최하단에 복사 붙여넣기

 

3. 기타 댓글 및 구분석 색 변경하기

 위의 수정이 끝이 아닙니다. 이번에는 살짝 어렵지만 따라만 하십시요. CSS 화면에서 ctrl + f를 누르시고 제가 설명하는 부분을 찾아 보십시요.

  (1) color-dark #header

   - border-color를 #333을 입력하세요.

 

color-dark #header

  (2) secret label:before

   - color-dark #header20줄 정도 아래에 있습니다. 

   - border-color를 #666을 입력하세요.

secret label:before

(3) input-placeholder

  - color를 #666으로 수정하세요.

 

input-placeholder

 

4. 모바일에서 글자 작게 나오는 버그 해결

 모바일에서 작게 나오는 글자는 어의 없게도 another_category를 another-category 로 오타내여서 생긴 오류입니다. ctrl+f 하셔서 모든 another-category를  another_category로 바꿔 줍시다. 즉 대쉬(-)를 밑줄(_)로 바꿔 줘야 합니다. 대략 5~6개 되던거 같아요.

another_category

5. 아이폰 사파리에서 글자 작게 나오는 오류 해결하기

 코드를 그림과 같이 @media screen and (max-width:767px) 아래에 집어 넣으세요. ctrl+f 하시고 @media screen and (max-width:767px)아시죠?

 

.entry-content p { font-size: 1.15em; } .entry-content figure figcaption { font-size: 0.95em; }

media screen

6. 이미지 뒤틀림 문제

 .cover-thumbnail-list-1 ul li .thum을 찾으셔서 아래 그림처럼 before를 after로 2개 바꾸세요.

 

before를 after로 변경

  webkit-line-clamp를 찾으셔서 아래 그림처럼 1을 3으로 바꾸세요.

 

webkit-line-clamp

 

여러분! 이제 50%의 버그는 잡으셨습니다. 왓에버스킨이 애드센스 뿐만아니라.. 여러 방면에서 좋다고 합니다ㅠㅜ. 시작하셨으면 다음강의에서 계속 버그를 잡아 봅시다.