이올린 버튼 CSS 로 수정하기

티스토리에서 Eolin Plug-in 을 활성화 시키면 본문 하단에 북마크, 추천 버튼이 생깁니다.
이 Plug-in 은 본문 내용을 표시해 주는 치환자 ([ ##_article_rep_desc_##]) 내부에 포함되기 때문에 skin.html 에서 수정이 힘들죠.
하지만 버튼을 왼쪽으로 정렬하고 싶다거나 아이콘을 변경하려는 경우에는 간단하게 CSS로 해결 할 수 있습니다.

다음은 Eolin Plug-in의 출력 부분입니다.

<div class="EolinBmVote">
  <span class="EolinBookmarkBtn">
    <a title="이올린에 북마크하기" ~~~~~>
      <img ~~~ /> 이올린에 북마크하기
    </a>
  </span>(<span class="EolinBookmarkCount" id="bookmarkeolin11">13</span>) 
 
  <span class="EolinVoteBtn">
    <a title="이올린에 추천하기" href="#void">
      <img ~~~~ /> 이올린에 추천하기
    </a>
  </span>(<span class="EolinVoteCount" id="voteeolin11">10</span>)
</div>

이것에 맞춰 style.css 파일을 작성하면 되겠죠.
예를 들면..

/* Eolin Plug-in */
.EolinBmVote {
  border-top:1px dashed #ddd; 
  padding:5px 0 0 0 !important; 
  text-align:left !important; 
  font-size:0.9em; 
}

* 참고로 우선권을 주기 위해 !important 부분을 꼭 넣어주세요.

그리고 아이콘을 바꾸는 방법..
사실 이 방법은 편법 입니다. 현재 img 태그로 되어있는 이미지를 감추고 다른 이미지를 a 태그의 background로 출력하는 방법 입니다 ^^;

우선 기존의 아이콘을 감추고..

.EolinBmVote img {
  display:none;
}

그리고 a 태그 스타일에 background 와 padding 값을 지정해 주시면 됩니다.

/* Bookmark Button */
.EolinBookmarkBtn a:link,
.EolinBookmarkBtn a:visited,
.EolinBookmarkBtn a:hover,
.EolinBookmarkBtn a:active
{
 background: url(./images/***.***) 0 0 no-repeat; 
 padding: 0 0 0 25px; 
}
 
/* Vote Button */
.EolinVoteBtn a:link,
.EolinVoteBtn a:visited,
.EolinVoteBtn a:hover,
.EolinVoteBtn a:active
{
 background: url(./images/***.***) 0 0 no-repeat; 
 padding: 0 0 0 25px; 
}

이러한 방법으로 작성하시면 원하는 결과물을 얻으실 수 있을 겁니다.

하지만 이것은 어디까지나 편법에 불과하죠.^^;
티스토리가 점점 사용자의 선택권 없이 천편일률적인 모습으로 변해가는 것 같아 씁쓸한 마음에 남겨 봅니다 -ㅅ-

1upz

이올린 버튼 CSS 로 수정하기