Gray Border 티스토리 스킨의 수정사항과 수정하는 방법

demun
티스토리스킨수정/스킨수정팁
2012. 6. 16. 17:25

html5로 마크업한 티스토리 스킨 그레이보더입니다.
제가 배포한 스킨인데, 사용하신분이 수정사항을 여쭤보셔서 제가 좋다고 판단되어 스킨에 반영하기로 하였습니다.

수정사항은 이미지가 첨부되오니 참고하시고 코드도 같이 쓰니까 먼저 받으신분은 수정하시기 바랍니다.
수정사항과 방법을 아래에 나열합니다.

수정 사항. 1. 카테고리 새글 표시 아이콘

관리자 화면의 카테고리 수정에서 새글표시 아이콘을 설정할 수 있습니다.
이전에는 아래처럼 나왔습니다.

사이드바의 블로그 이미지를 설정하는코드가 카테고리에도 적용이 된 것이였습니다.


/* 수정전 */
.boxList img { width:170px; overflow:hidden; }
/* 수정후 */
.blogImage img { width:170px; overflow:hidden; }

수정후에는 아래처럼 변경 되었습니다.

수정 사항. 2. 카테고리에 블릿 아이콘 이미지

참 디테일하게 관찰하신분입니다....ㅎㅎㅎㅎ.
좋습니다. 전 그런분을 좋아합니다. 그래야 수정할 수 있거든요...
아래 이미지는 이전에 스샷을 찍어놧던 이미지 입니다.

허나 배포 스킨에는 위의 이미지처럼 화살표 이미지가 없습니다.
이건 제가 사이드바에 a 링크에 공통적으로 적용했었는데.... ie 6에서 깨지는 현상이 일어나서 변경한 사항입니다.
일단 카테고리에만 화살표 이미지가 수정되게끔 수정하였습니다.
수정 방법을 보시면 나머지도 이용이 가능하니 참고하시고 아래의 방법대로 변경했을때는 ie6까지 정상적으로 반영이 된걸 확인했으니 사용하셔도 무방합니다.

수정방법은 아래의 코드를 보시면 됩니다.


/* 기존의 카테고리 코드 */
#category li a { font-size: 1.2em; font-weight: bold;}
#category li li a { font-size: 1em; font-weight: normal;}

/* 카테고리 목록에 이미지 삽입 */
#category li li a { background-image:url(images/arrow-down.gif); background-repeat:no-repeat; background-position:0 center; padding-left:20px; }
#category li li a:hover { background-image:url(images/arrow-right.gif); text-decoration:none; }
#category li li li a { background-position:15px center; padding-left:35px; }

그럼 아래처럼 변경이 됩니다. hover 까지 적용이 되었으니 마우스가 있는곳을 참고하세요.

수정사항. 3. 댓글, 트랙백 분리.

기존에는 이렇게 하나의 버튼으로 나와있었고, 댓글이나 트랙백이 없을때는 아래 이미지처럼 숫자만 표시되는 버그가 있었습니다.

수정후는 아래와 같습니다.

수정사항은 언제나 숫자는 빨강색으로 표시되도록 했으며, 글자가 댓글이나 트랙백이 없어도 글자가 표시되도록 했습니다.
변경된 html 코드.


<div class="actionTrail"><!-- 댓글 보이고 감추기 -->
	<a href="#rp" onclick="">
		<s_rp_count>COMMENT<span class="cnt"></span></s_rp_count>
	</a> 
	<a href="#tb" onclick="">
		<s_tb_count>TRACKBACK<span class="cnt"></span></s_tb_count>
	</a>
</div><!-- // actionTrail -->

대문자로 COMMENT 부분과 TRACKBACK 부분이 수정이 됐으며 중간에 있던 점 , 을 삭제했습니다.
css 수정코드는 아래와 같습니다.


/* 수정전 */
.actionTrail .cnt, .actionTrail .num { color:#f30; }

/* 수정후 */
.actionTrail .cnt, .actionTrail .num, .txt_em { color:#f30; }

참고로 이 시점이후로는 위처럼 변경되었음을 알립니다.....
여기까지 글을 쓰고 순간 실수로 글을 날려버렸습니다. 그래서 복사해서 붙여넣기 신공으로 위에글은 간신이 살렸네요....
이어서 다시 써 내려갑니다.

몇가지 수정한 내용이 더 있습니다.
타이틀과 검색창을 좀더 아래로 내렸습니다.

댓글 트랙백보기 부분에 있는 border 를 삭제했습니다.

개 개

demun(대문블로그)

Gray Border 티스토리 스킨의 수정사항과 수정하는 방법

티스토리툴바