현재 이 블로그의 스킨은 CCZ-CROSS 를 수정하여 사용중이다. 지난해 1월부터 사용했으니 벌써 1년이 넘게 사용하는 셈이다.
이 스킨의 수정에 관한 글은 이제 가능한 쓰지 않으려고 했는데.. 사용하는 분들도 꽤 있는것 같고 스킨 수정에 관심이 많은 것 같아서 그동안 수정했던 부분들 중 생각나는 대로 적어보고자 한다.
CCZ-CROSS 스킨은 자세히 살펴보면 기존의 다른 스킨들에 비해 구조나 기능들이 꽤 잘 만들어졌다고 생각한다. 개인적인 취향에 따라 불필요한 부분은 삭제하거나 수정한 부분도 많긴 하지만.. 기본 상태로 사용하기에도 요즘 스킨들에 비해 뒤떨어지지 않는다.
내가 이 스킨에서 가장 좋아하는 곳은 댓글 부분이다. 댓글과 대댓글을 표시하는 부분의 라인 구성이 마음에 든다. 다른 스킨들에서는 볼 수 없는 이 스킨만의 독특한 부분이다.
그런데 댓글과 비슷한 방식인 방명록은 완전 다른 디자인이다. 80년대와 2000년대의 차이가 느껴질만큼 둘은 너무 다르다. 이 스킨의 사용자들 대부분 방명록을 그대로 사용하는 걸 보면 나만 이상하게 보는걸지도 모르겠다.
그래서 이 스킨을 처음 사용하자 마자 방명록부터 댓글과 같은 모습으로 수정했다.
방명록을 댓글과 같은 모습으로 바꾸는 방법은 사실 너무 간단하다. 누구나 조금만 살펴보면 할 수 있는 것이다.
스킨의 HTML 에서 댓글 리스트의 시작인 588번째 줄 li 부터 639번째 줄까지 모두 복사한다. 아래의 내용..
<s_rp_rep>
<li id="">
<div class=" cng-container">
......
......
......
</s_rp_rep>
그리고 스킨 HTML 의 방명록 부분인 258번째 줄부터 294번째줄 <s_guest_rep> 내용을 복사한 댓글 부분의 내용으로 교체한다.
* <s_guest_rep> 는 손대지 말것.. 안의 내용만 교체!!
<s_guest_rep>
<li id="">
<div class=" cng-container">
......
......
......
</s_guest_rep>
복사한 내용중 댓글 치환자가 포함되어 있기 때문에 이 치환자만 방명록의 치환자로 찾아 수정해주면 된다.
댓글의 치환자는 rp 로 표시되어 있다. 이런식으로
방명록 부분에 해당하는 치환자로 이런 식으로 수정해야 한다.
rp 를 guest 로 찾아서 수정하면 된다.
댓글 부분의 치환자까지 고치면 안되니 귀찮다고 일괄 수정하면 안된다.
이제 거의 다 왔다.
중간 쯤
<s_rp2_container>
<ul class="reply-list list-unstyled">
<s_rp2_rep>
......
</s_rp2_rep>
</ul>
</s_rp2_container>
아래의 내용으로 수정한다.
<s_guest_reply_container>
<ul class="reply-list list-unstyled">
<s_guest_reply_rep>
......
</s_guest_reply_rep>
</ul>
<s_guest_reply_container>
HTML 은 모두 되었다. 하지만 이게 끝이 아니다. CSS 를 수정해야 한다. 이게 좀 손이 많이 간다.
CSS 에서 방명록에 관한 부분은 모두 삭제한다. 1787번째 줄부터 /* guest-list */ 라고 표시된 부분부터 공지 사항 전까지 삭제하면 된다.
그리고 이제부터 좀 귀찮은 부분이다.
1687번째 줄부터 1748번째 줄까지 .reply-list 로 표시된 부분을 모두 손봐야 한다. 왜냐하면 이 부분은 댓글 부분만 적용되도록 되어 있기 때문이다.
.reply-list 가 포함된 모든 부분에 동일하게 .guest-list ... 를 추가해야 한다. 뒤의 항목까지 모두.. 포함되도록...
이해하기 쉽게.. 아래 그림을 보면 방식을 알 수 있을것이다.
.reply-list, .reply-list li {position: relative;} /* 기존 상태 */
......
.guest-list, .guest-list li, .reply-list, .reply-list li {position: relative;} /* 변경 상태 */
쉼표를 이용해 똑같은 방식으로 방명록 리스트에도 적용되게 하였다.
이제 저장 후 화면을 확인해 보면 된다. 제대로 되지 않았다면.. 뭔가 중간에 잘못된 부분이 있을것이다. 이 글이 어렵다 생각된다면 그냥 처음 상태로 쓰기를.. 바란다. 괜히 머리만 아플 수 있다.
아주 간단한거라고 생각했는데 글로 써놓고 보니 뭔가 복잡해 보인다. -.-;
이 글을 쓰느라 나도 처음부터 다시 해보았다. 오랫만에 해보니 나도 헛갈린다. ㅎㅎ
