텍스트큐브닷컴 스킨에서 "댓글달기" 수정하기

 

※ 이 스킨 가이드는 "텍스트큐브닷컴" 에 해당하는 내용입니다. 티스토리나 텍스트큐브 등 기타 설치형 태터툴즈 기반의 블로그에는 해당하지 않습니다.

 

난생 처음 텍스트큐브닷컴의 스킨을 수정하면서 다른 분들의 도움을 많이 받았고, 그분들께서 훌륭히 작성해주신 가이드 또한 많이 있습니다.

 

전 그 많은 가이드 중 없는 (혹은 제가 못찾은) 부분 위주로 설명을 할까 합니다.

 

그 첫번째 꼭지 "댓글달기" 부분 입니다.

 

먼저, 댓글달기 가 뭐냐구요?

텍스트큐브닷컴에서 제공하는 기본 스킨을 적용할 경우, 대부분 아래와 같은 형태로 보여지는 부분입니다.

 

 

그러나 위의 부분을 스킨 기본파일인 skin.html 에서 아무리 눈을 크게 뒤집어 찾아봐도 달랑 아래 코드 3줄 밖에는 없습니다.

[code html]

[/code]

 

즉, <s_rp_input_form/> 부분이 위의 그림처럼 변신! 을 한다는 거죠. 실제로 텍스트큐브닷컴이 해당 태그(s_rp_input_form) 을 만나면 자동으로 생성해주는 코드 부분입니다. 티스토리나 텍스트큐브에선 <s_rp_input_form/> 태그 안의 부분을 입맛에 맞게 디자인할 수 있으나 텍스트큐브닷컴에선 아무리 안에 html code 를 이쁘게 넣어봐야 텍스트큐브닷컴은 그냥 깔끔히 무시해버립니다.

 

실제로 페이지의 '소스보기' 를 해서 위의 3줄이 어떻게 변신했는지 볼까요? (위의 그림과 비교하면서 보시기 바랍니다.)

 

<div class="commentWrite">
  <div class="tt-input-div">
    <form id="rp_form_270" method="post" action="/270/comment/add/" onsubmit="return false" style="margin: 0">   
      <dl class="tt-input-name">
        <dt><label for="name_270"> 이름  </label></dt>
        <dd><input type="text" class="tt-inputText" id="name_270" name="name_270" value="" /></dd>
      </dl>
      <dl class="tt-input-password">
        <dt><label for="password_270"> 패스워드  </label></dt>
        <dd><input type="password" class="tt-inputText" id="password_270" name="password_270" /></dd>
      </dl>
      <dl class="tt-input-website">
        <dt><label for="homepage_270"> 홈페이지 </label></dt>
        <dd><input type="text" class="tt-inputText" id="homepage_270" name="homepage_270" value="http://"/></dd>
      </dl>
      <dl class="tt-input-content">
        <dt><label for="comment_270"> 내용  </label></dt>
        <dd><textarea id="comment_270" name="comment_270" rows="10" cols="50"></textarea></dd>
      </dl>
      <dl class="tt-input-option">
        <dt>옵션 </dt>
        <dd>
          <input type="checkbox" class="tt-checkbox" id="secret_270" name="secret_270" value="1" />
          <label for="secret_270"> 비밀글</label>
        </dd>
      </dl>
      <dl class="tt-input-btn">
        <dt>댓글 달기</dt>
        <dd>
          <button type="submit" class="tt-input-btn-comment" onclick="addComment(this, 270, false); return false" >
            <span>댓글 달기</span>
          </button>
        </dd>
      </dl>
    </form>
  </div>
</div>

 즉, skin.html 의 <s_rp_input_form/> 은 실제 페이지가 보일 때는 위의 <div class="tt-input-div"> ~ </div> 로 변경이 됩니다. 여기서 눈여겨 볼 것은 각 tag 에 부여된 class 입니다. class 가 있으니 어딘가 그 class 를 정의한 css 부분도 있겠죠? 그러나, 우리가 갖고 있는 기본css 인 style.css 에는 아무리 뒤져봐야 나오지 않습니다. 정답은 마찬가지로 페이지의 '소스보기' 를 하면 찾을 수 있습니다.

 

텍스트큐브닷컴에는 기본적으로 추가되는 css 파일이 2개 있습니다. 바로 아래와 같습니다. (그 밖에 여러 js 파일도 있으니 관심있으신 분은 한번씩 훑어보시기 바랍니다.)

 

<link rel="stylesheet" type="text/css" href="http://rs.textcube.com/service/blog/style/blogDefault.css" />
<link type="text/css" rel="stylesheet" href="http://rs.textcube.com/service/blog/script/tree/skins/treeBase/style.css" />

여기서 treeBase/style.css 는 카테고리의 tree 디자인 관련된 css 파일이고, 그외에 숨어있는 아이들은 대부분 blogDefault.css 에 정의되어 있습니다. 따라서 여기에 정의된 style 을 참고하여, 변경하고 싶은 부분을 기본 style.css 에 overwrite 해주면 원하는 형태로 댓글달기 부분을 변경할 수 있습니다.

 

만약 "댓글달기" 버튼을 변경하고자 한다면, tt-input-btn-comment 를 찾아서 overwrite 하면 됩니다.

 

제 블로그 스킨에 적용된 style.css 에는 아래와 같이 작성하였습니다.

 

.commentWrite .tt-input-div .tt-input-btn-comment
{
  width: 100px; height: 30px; margin-left: 300px; color: #666;  
  padding: 5px 3px;  border: 1px solid #666;
  background:url(images/btn_comment.gif) no-repeat center center;
  background-color: #fff;
}
.commentWrite .tt-input-div .tt-input-btn-comment span { display:none; }

btn_comment.gif 라는 이미지를 만들어 tt-input-btn-comment 에 background 속성으로 지정하였습니다. 대신 <span> 댓글달기 </span> 을 안보이게 하기 위해 display:none 스타일을 주었구요. 그리고 추가적으로 입력폼 부분에 노란색(#fffdc4) 바탕색을 칠했습니다.

 

.commentWrite .tt-inputText    
  { width:240px; color:#999; background-color:#fffdc4;}
.commentWrite textarea         
  { width:700px; height:120px; overflow:visible; background-color:#fffdc4;}

여기서 감이 오시죠? textarea 에 background-color 대신 background:url(..) 속성을 주게 되면 덧글 입력하는 창 바탕에 그림을 배경으로 깔 수도 있습니다. 그렇게 하는 노하우는 여러 분들이 공개해주셨더군요.

 

이렇게 해서 재디자인된 제 스킨의 모습입니다. (이름의 jelloys 는 무시해주시기 바랍니다. 린아엄마가 덧글 입력했던 게 남아있었네요.)

 

 

참고로, kate 님께서도 버튼을 바꾸셨습니다.

 

 

역시 디자인 감각은 저보다 훨씬 훌륭하십니다. ^^