티스토리 Square 스킨(반응형) 팁

사이드바 조절하기 (CSS)

#sidebar .widget { margin-top: 30px; padding: 0; line-height: 200%; letter-spacing: -0.5px; }

margin-top: 30px - 위쪽 줄간격(카테고리, 노티스, 링크 등의 위쪽 간격)

padding: 0 - 

line-height: 200% - 사이드바 각 줄의 간격(하위메뉴 포함)

letter-spacing: -0.5px - 사이드바 모든 글씨의 자간 간격(하위메뉴 포함)

#sidebar .widget h3 { margin: 0; padding: 0; font-size: 13px; font-weight: 500; color: #07a; } - 원본

margin: 0

padding: 0

font-size: 13px - 카테고리 글자 크기

font-weight: 500 - 카테고리 글자 두께

color: #07a - 카테고리 글자색

#sidebar .widget h3:before { content: "+ "; }

카테고리 앞에 붙는 + 문자

#sidebar .widget ul { margin: 0; padding: 0; } - 원본

margin: 0 - 

padding: 0 - 하위메뉴 여백?

#sidebar .widget li { list-style: none; word-break: break-word; }

#sidebar .category .c_cnt { font-size: 11px; line-height: 0; }

font-size: 11px - 글 갯수 폰트 크기

#sidebar .category ul li { list-style: none; }

#sidebar .category ul li ul li ul { margin: 0 0 0 15px; padding: 0; }

margin: 0 0 0 15px - 하위메뉴 여백 관련

padding: 0

#sidebar .category ul li ul li ul li:before { content: "\F0DA"; font-family: "FontAwesome"; font-size: 10px; padding-right: 5px; }

font-size: 10px - 하위메뉴 왼쪽 삼각형 크기

padding-right: 5px - 삼각형과 하위메뉴 사이 간격

---

사이드바 메뉴 버튼 조절하기 

CSS에서 다음 코드를 찾는다.

#sidebar-toggle { display: none; 

position: fixed; 

left: 10px; 

bottom: 10px; 

width: 50px; height: 50px; font-size: 20px; line-height: 50px; 

text-align: center; 

color: #555; background-color: #f1f1f1; 

border-radius: 10px; opacity: 0.9; 

box-shadow: 0 0 10px #aaa; z-index: 101; }

위 코드에서 XXX부분에 left나 right를 넣고

YYY부분에 top이나 bottom이라고 써넣으면

버튼의 위치를 변경할 수 있고, 그 옆의

px값을 바꾸면 정확한 위치를 조절할 수 있다.

또한 뒤쪽 코드에서 색상, 크기값을 변경하면

버튼의 디자인을 세밀하게 바꿀 수 있다.

html에서 아래 빨간색이 아이콘 모양 수정

<div id="sidebar-toggle" onclick="javascript:sidebar_toggle();"><i class="fa fa-bars"></i></div>

아래 링크가 아이콘 관련 

http://aboooks.tistory.com/388

---

Top 버튼 조절하기 

http://cocosoft.kr/353

html에 추가 

(젤 아래 </body> 바로 위

<!--goto_top-->

<a href="#" class="jcm-top"><i class="fa fa-angle-up"></i></a>

<script> $( document ).ready( function() { 

$( window ).scroll( function() { 

if ( $( this ).scrollTop() > 200 ) { 

$( '.jcm-top' ).fadeIn(); 

} else { 

$( '.jcm-top' ).fadeOut(); 

} 

} ); 

$( '.jcm-top' ).click( function() { 

$( 'html, body' ).animate( { scrollTop : 0 }, 400 ); 

return false; 

} ); 

} ); 

</script>

fa fa-angle-up -> 버튼 아이콘 모양

CSS에 추가할 거

(제일 아래)

/*

 * goto_top

 */

a.jcm-top { 

position: fixed; 

right: 10px; 

bottom: 10px; 

width: 50px; height: 50px; font-size: 40px; line-height: 40px;

text-align: center;

color: #555; background-color: #f1f1f1;

border-radius: 10px;  

box-shadow: 0 0 10px #aaa;

/*background-color: rgba(50,50,50,0.5);*/ 

background-color:#f1f1f1; opacity:0.9; filter:alpha(opacity=50); 

/*ie8 호환을 위한코드 위와 동일한 것임 호환필요없으면 한줄로 rgba적으면됨*/ 

z-index: 101; 

display: none; }

---

기타 

http://ratatui.tistory.com/35