우측 배찌 색깔 바꾸기

FastBoot v1.3.5에서 수정되었습니다. 다운로드 링크는 아래 글 하단부를 참조하세요.

2014/03/07 - [연재/FastBoot] - 반응형 스킨 FastBoot v1.3 공개 / 배포 (IE8 지원)

  FastBoot 티스토리 블로그 스킨에는 iOS에서 많이 보셨을 Badge(배찌)가 적용되어 있습니다. 그런데 여기는 괜찮은데, 카테고리 옆에 붙어 있는 배찌 색상도 붉은 계통이라 별로 안좋아하시는 분들이 많은 것 같네요. 저도 사실 초기 배찌를 적용하면서 카테고리에 붙이는 배찌같은 경우에는 이거 해 말아? 굉장히 고민을 많이 했습니다만 일단 배포했는데요.. 바꾸는 방법을 소개합니다. CSS에서 두 부분만 수정하시면 다음과 같이 출력되게 할 수 있습니다.

  고치는 김에 우측 여백이 큰 현상이 있어서 같이 수정해보겠습니다.

1. 여백 수정

	
#sidebar .category ul li a{
	display: block;
	padding: 5px 5px 5px 10px;
} 
	

  기존에 우측 여백이 13px로 되어 있었는데 5px으로 수정합니다.

2. 배찌색깔 수정

	
/*카테고리*/
.c_cnt { /* 카테고리 옆 개수 */
  display: inline-block;
  min-width: 10px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: bold !important;
  line-height: 1;
  color: #fff !important;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color:#ccc;
  margin-top: -2px;
  border-radius: 10px;
  float:right;
} 
	

  복잡해보이지만 background-color 부분과 margin-top만 수정하면 됩니다. margin도 조금 어긋나있어서 수정하는 김에 같이 하는 겁니다.

  이걸 수정하셔도 최근 글 목록에 있는 배찌는 그대로 유지됩니다. 카테고리 쪽에 좀 정신사나웠던 것이 사실인데 수정하니 조금 낫네요. 전체적인 느낌은 다음처럼 보입니다.

  더 낫나요? 적어도 카테고리에 시선이 쏠리던 문제는 해결 된 것 같습니다.