studiopress_adsense ver_2 스킨 카테고리 접기
- 티스토리스킨수정/사이드바
- 2010. 9. 27. 00:48
이글은 이전에 배포한 스킨에 대한 수정방법입니다.
어느정도는 다른 스킨의 카테고리 수정방법과도 일치합니다.
adsense v2 스킨을 사용하다가 카테고리가 많아서 접어야 할때가 있습니다.
2번줄을 삭제해주면 됩니다. 그럼 아래 그림처럼 됩니다.
즉 각각의 id에 스타일을 지정하시면 됩니다.
이렇게 아까 삭제한것과 똑같이 넣어주면됩니다.
어느정도는 다른 스킨의 카테고리 수정방법과도 일치합니다.
adsense v2 스킨을 사용하다가 카테고리가 많아서 접어야 할때가 있습니다.
간단하게 카테고리를 접는 법을 알려드리겠습니다.
처음에는 아래의 그림처럼 카테고리가 펼쳐져 있습니다.
카테고리를 접고싶을 때는 아래처럼 하면 됩니다.
7번째 줄에 list_ 를 뺀 모양입니다. 위처럼 수정하면 html 은 수정 끝입니다.
6번과 7줄만 추가해주고 그 아래부분은 주석처리하거나 삭제하면 됩니다.
첫번째 html 수정.
아래 하이라이팅 된 곳을 아래처럼 수정합니다.
<!--카테고리-->
<div id="category">
<ul class="widget">
<h4>Category</h4>
<li>[#\#_category_##]</li>
</ul>
</div>
</s_sidebar_element>
7번째 줄에 list_ 를 뺀 모양입니다. 위처럼 수정하면 html 은 수정 끝입니다.
두번째 css 수정.
css 도 간단하게 수정할수 있습니다.
코드를 아래처럼 수정해주세요.
/* 카테고리 */
#category {}
#category ul,#category ul li,#category ul li a, #category ul li ul li a,#category ul li ul li ul li a{
background:none;
margin:0;
padding:0;
}
/* 나중에 사용할때는 염두해두고 일단 주석처리만 합니다. */
/*
#category ul li ul li a{
padding:5px 0;
margin:0;
}
#category ul li ul li ul li a{
padding:2px 0 2px 17px;
background:url(./images/icon.gif) no-repeat 0 0;
}
#category ul li ul li ul li ul li a {
padding-left:27px;
background:url(./images/icon.gif) no-repeat 10px 0;
}
*/
그럼 아래그림처럼 조정이 됩니다.
두번째 링크앞에 있는 블릿 이미지 교체하기
현재 스킨에는 + 모양의 이미지가 블릿이미지로 되어있습니다. 이걸 다른 이미지로 교체해보겠습니다.
사이드바 전체 a 링크에는 다음과 같은 코드로 스타일이 지정이 되어 있습니다.
#sidebar ul li a{
background:url(./images/icon.gif) no-repeat left 4px #fff;
color:#333;
text-decoration:none;
margin:0;
padding:5px 0 0px 17px;
}
자 이제 여백이 그대로 있으니 다른 이미지를 대체하면 됩니다.
사이드바에 html 에는 각각 id 가 있습니다.
<!-- 공지사항은 -->
<div id="notice"></div>
<!-- 최근에 올라온 글은 -->
<div id="recentPost"></div>
<!-- 최근 보관함은 아래와 같은식이죠 -->
<div id="archive"></div>
예를들어 최근글의 링크에 다른이미지(1.gif) 를 넣고싶다면 아래 한줄을 추가해주면 됩니다.
#recentPost ul li a{
background:url(./images/1.gif) no-repeat left 4px;
}
제가 예를들어 3개의 블릿을 추가해봤습니다.
그럼 위의 이미지에서 아래의 이미지로 바뀝니다.
어떤가요? 간단하죠. 여백이 안맞으면 no-repeat 다음에 왼쪽 오른쪽을 결정짔는 left 를 수정하면 됩니다.
우선 가장 왼쪽은 0 그다음은 1px 하면 가장 왼쪽에서 우측으로 1px 간곳에 블릿이 위치한다는 이야기 입니다.
다음에 맨 우측에 4px 라고 적힌것은 위에서 아래로 4px 내려온 위치에 자리를 잡으라는 이야기 입니다.
아시겠죠.
그럼 얼마든지 다른 이미지로 대체하실수 있으실겁니다.
저의 경우 4px 를 7px로 하니 정상적으로 나오네요. 이미지를 보고 다시 이어갑니다.
위의 이미지를 보시면 정상적으로 나온것이 보일겁니다.
근데 블릿 이미지와 글자와의 간격에 제가 빨강색으로 v 표시를 해놧지요. 이것이 너무 떨어져 있다고 생각되면 #sidebar ul li a{ 에서 padding:5px 0 0px 17px; 에서 17을 수정해주시면 됩니다.
적을수록 왼쪽으로, 숫자가 커질수록 우측으로 멀어집니다.
!! 도움이 되셨다면 추천을...마우스를 올려보세요. 우측아이콘은 즐겨찾기 !!