우측 배찌 색깔 바꾸기

Posted by Readiz
2014.03.12 02:31 반응형 티스토리/FastBoot

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




  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도 조금 어긋나있어서 수정하는 김에 같이 하는 겁니다.



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



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

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 흠..사람마다 취향이 다르겠지만.. 밝은회색톤으로 바꾸니까 정말 나은것 같기도 합니다^^ 이바구님이 지적해주신걸 바로 수정하시는 센스~~ ㅎㅎ
    • 저도 좀 걸렸던 부분이라서..
      지적사항이 좀 많이 나왔음 좋겠어요~~
  2. 헐 이럴수가??? 수정하신 배찌는.... 저도 같은 색상으로 조만간에 바꿀 예정이었는데 저와 똑같은 생각을 하시고 적용 하셨네요 ㅎㅎ 그래서 저는 복사 붙혀넣기 만으로 쉽게 수정을 할 수 있게 됐네요 ... 감사합니다.
    • ㅎㅎ 수정됐으면 하는 것 있으면 저에게도 알려주세요~~
    • 한가지 있다면... 지금 현재 버전인 1.3에서 변경됐으면 한다기 보다는,,, 다음 버전에서는 추가되었으면 하는 기능인데요...

      댓글 달때, 4단 형식으로 댓글을 달 수 있도록 바뀌면 좋을 것 같다는 생각이 드네요 ㅎㅎ 제가 이전에 사용하던 iNove 스킨에서 사용하던 방법인데요.

      대댓글에, 또 대댓글을 달수 있는 구조...죠 ㅎㅎ 이외에는 수정 해 보면서 생각나면 또 말씀 드리겠습니다. ^^
    • 대댓글.. 한번 방법을 알아봐야겠군요. ㅋㅋ

티스토리 툴바