iNove 스킨 버그 수정: 댓글 아이콘 버그 수정

댓글 아이콘이 좀 밀린다. ㅠ.ㅠ

은근히 신경이 쓰였던 버그인데, 귀차니즘으로 넘어가려고 했다.
그런데... miru님께서 댓글을 통해 지적을 하셨다.

지적을 받았는데도 수정을 하지 않는 건 도리가 아니다. 그래서 수정했다!
(이거 왠지 군대 필이군...)

이 문제의 원인은  아이콘 스타일의 버그가 아니라 아이콘 주변 흰 영역의 폭이 잘못 지정되어 있기 때문이다.
이 문제를 해결하려면 style.css에서 .cmtauthor 스타일을 조금만 수정하면 된다.
일단 아래와 같은 내용을 찾는다.

.cmtauthor {
    float:left;
    width:81px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

여기서 폭(width)의 속성을 80px로 수정한다. 그럼 아래와 같이 된다.

.cmtauthor {
    float:left;
    width:80px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

수정된 결과는 아래와 같다.

짜잔~ 이제 깔끔하다!

덧. 이 버그는 FireFox 3에서 확인했다.

iNove 스킨 버그 수정: 트랙백 걸기 추가

화면 구성을 조정하는 과정에서 E, T, D로 짧게 적었습니다

헨리 님께서 공개하신 iNove For Tistory 스킨은 워드프레스 스킨을 변환한 것인데, 디자인과 색감이 깔끔해서 많이들 사용하고 계십니다.
그런데, 약간의 버그가 있습니다.

1. 본문 제목 부분에 트랙백 및 삭제 아이콘이 없어 트랙백을 걸거나 삭제하려면 관리메뉴로 가야 함
2. 불필요한 편집 메뉴가 있음

이 버그를 수정하는 방법은 아래와 같습니다.


1. 파일 추가

새로 추가할 트랙백 및 삭제 기능에서 사용할 아이콘을 추가합니다.
아래 파일을 다운받아 압축을 푼 뒤 관리메뉴의 스킨→직접 올리기에서 올립니다.

icons2.zip

2. css 추가

추가할 기능에서 사용할 아이콘을 css에 등록합니다.
아래 내용을 style.css 맨 끝에 추가하면 됩니다.

/* trackback icon 버그패치 */
.post .edtrackback, 
.post .eddelete {
    background:url(images/icons2.gif) no-repeat;
    padding-left:22px;
    height:16px;
    line-height:16px;
    display:block;
    font-size:11px;
}

.post .eddelete {
    background-position:0 -16px;
}
/* trackback icon 버그패치 */

3. 트랙백/삭제 메뉴 추가

skin.html에서 아래와 같은 부분을 찾습니다. 원본 파일의 경우 189행부터 시작됩니다.

<s_article_rep>
    <div class="post">
        <h2><a href="[#\#_article_rep_link_#\#]">[#\#_article_rep_title_#\#]</a></h2>
        <div class="info">
            <span class="date">[#\#_article_rep_date_#\#]</span>
            <div class="act">
                <span class="comments"><a href="[#\#_article_rep_link_#\#]#commentlist"><s_rp_count>[#\#_article_rep_rp_cnt_#\#] Comments</s_rp_count></a></span>
                <s_ad_div>
                    <span class="editpost"><a href="[#\#_s_ad_m_link_#\#]">Edit</a></span>
                </s_ad_div>
            </div>
            <div class="fixed"></div>
        </div>

표시해 둔 9행 다음에 아래의 두 줄을 추가합니다.

<span class="edtrackback"><a href="#" onclick="[#\#_s_ad_t_onclick_#\#]">Trackback</a></span>
<span class="eddelete"><a href="#" onclick="[#\#_s_ad_d_onclick_#\#]">Delete</a></span>

4. 불필요 편집 메뉴 삭제

skin.html에서 다음과 같은 부분을 찾습니다. 원본 파일의 경우 167행부터 시작됩니다.

<s_article_protected>
    <div class="post">
        <h2><a href="[#\#_article_rep_link_#\#]">[#\#_article_rep_title_#\#]</a></h2>
        <div class="info">
            <span class="date">[#\#_article_rep_date_#\#]</span>
            <div class="act">
                <s_ad_div>
                    <span class="editpost"><a href="[#\#_s_ad_m_link_#\#]">Edit</a></span>
                </s_ad_div>
            </div>
            <div class="fixed"></div>
        </div>

여기서 표시된 6~10행을 삭제합니다.

이것으로 스킨의 버그 수정은 끝났습니다.
멋진 스킨 잘 쓰시기 바랍니다.