※ 이 스킨 가이드는 "텍스트큐브닷컴" 에 해당하는 내용입니다. 티스토리나 텍스트큐브 등 기타 설치형 태터툴즈 기반의 블로그에는 해당하지 않습니다.
난생 처음 텍스트큐브닷컴의 스킨을 수정하면서 다른 분들의 도움을 많이 받았고, 그분들께서 훌륭히 작성해주신 가이드 또한 많이 있습니다.
전 그 많은 가이드 중 없는 (혹은 제가 못찾은) 부분 위주로 설명을 할까 합니다.
그 첫번째 꼭지 "댓글달기" 부분 입니다.
먼저, 댓글달기 가 뭐냐구요?
텍스트큐브닷컴에서 제공하는 기본 스킨을 적용할 경우, 대부분 아래와 같은 형태로 보여지는 부분입니다.
그러나 위의 부분을 스킨 기본파일인 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 파일도 있으니 관심있으신 분은 한번씩 훑어보시기 바랍니다.)
여기서 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 님께서도 버튼을 바꾸셨습니다.
역시 디자인 감각은 저보다 훨씬 훌륭하십니다. ^^
