반응형 스킨 #2 메뉴바수정하기 - HTML/CSS편집

1. 메뉴바 3단 -> 1단으로 수정

 

해결책: HTML에서 해당 기능 삭제, 그리고 CSS에서 LINE 40, 83의 폭을 잘 조절한다( 수정 전: 960px -> 320px)

/*LINE 40*/
.wrap_skin.navi_on {padding-left:320px} /*반응형 메뉴바가 나옴에 따라 본문의 왼쪽 여백이 달라지는 곳*/

/*LINE 83*/
.navi_on .wrap_sub{width:320px} /*반응형 메뉴바의 넓이를 변경하는 곳 */

* 메뉴바 열때마다 본문 전체 위치가 움직이는것이 거슬려서 그냥 라인40전체를 주석처리 해버렸다.

결과적으로는..반응형 스킨의 메리트가 조금 사라졌지만 ㅎ

참고한 사이트:lus-ty.com/409

 

2. 메뉴바에서 새글 아이콘 표시

해결책: CSS에서 .tt_category li a img을 찾아 DISPLAY:NONE -> DISPLAY:INLINE으로 바꾼다. 그러면 새글을 작성한 해당 카테고리 옆에 아이콘이 뜨고, 카테고리 개수가 괄호 안에 카운팅되는것을 볼 수 있다.

.tt_category li a img { display:inline }

happygram.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94sidebar-%EB%B3%80%EA%B2%BD참고한 사이트:

 

3. 메뉴바에 카테고리 개수가 표시되는것이 번잡스러워서 그건 빼기로.

해결책: CSS에서 .tt_category li a .c_cnt을 찾아 뒤에 {display:none}을 추가해준다.

 .tt_category li a .c_cnt{display:none},

4. 방문자수를 메뉴바에 표시하는 법

line 4~ 12 사이에 s_sidebar_element 요소를 추가한다. 

						<strong class="screen_out">관리 메뉴</strong>
						<ul class="list_control">
							  <!-- 방문자수를 메뉴바에 넣는 방법 -->
							<s_sidebar_element>
  <!-- 방문자수 -->
  <div class="counter">
    <span class="total">Total :  </span>
    <span class="today">Today : </span>
    <span class="yesterday">Yesterday : </span>
  </div>
</s_sidebar_element>
							
							<li><a href="https://wildguess.tistory.com/m/manage/entry/post" class="ico_skin link_write" title="글쓰기">글쓰기</a></li>
							<li><a href="https://wildguess.tistory.com/m/guestbook" class="ico_skin link_memo" title="방명록">방명록</a></li>
							<li><a href="https://wildguess.tistory.com/m/rss" class="ico_skin link_rss" title="RSS">RSS</a></li>
							<li><a href="https://wildguess.tistory.com/m/manage" class="ico_skin link_manage" title="관리">관리</a></li>
						</ul>
					</div>
				</div>

				<div id="mArticle" class="article_skin">

					<s_list>

5. 방문자수 색 변경법

body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Spoqa Han Sans', sans-serif;color:#666}

을 찾아 뒤의 color 코드를 바꾼다. 나의 경우 채도가 낮은 스카이블루로 바꿈. (#666 -> #c5d7e0)