Web Template for Tistory : Deep Scarlet

Matrix Ltd. 2008. 3. 15. 21:04

Deep Scarlet it is.

Arcsin이라는 회사(?)에 의해 운영되는 CSS Design Templates 사이트에 올라온 Website Template : Deep Blue알퐁손님이 티스토리용으로 변환해주셨더군요. (알퐁손님의 원본은 여기나 티스토리 스킨 포럼의 쓰레드에서 확인하실 수 있습니다.)

다음은 Muzeholic이 알퐁손님의 변환 스킨을 바탕으로 여러가지 수정 및 변형을 가한 Web Template for Tistory : Deep Scarlet이라는 이름으로 재배포하는 Mod입니다. 원작자와 1차 변환자의 허락을 사전에 구하지 않은 점, 양해해 주시기 바랍니다.

 
"파란 하늘은 너무나 흔해서, 오렌지빛을 하늘에 물들여.."
- 체리필터 [느껴봐] 中.

...아무튼 변경사항을 열거해보자면,

1. 파란 계열(blue)의 바탕색을 주황색(scarlet)으로 바꾸었습니다.
(Arcsin 원본을 확인해보면, Deep Red에서 변형된 것임을 알 수 있습니다.)
2. 폰트 스타일이 Georgia와 맑은 고딕을 대표로 재설정 되었으며,
사이즈 역시 1.2배 가량으로 증가하였습니다.
3. 아티클의 폭을 590px로 맞추고, 본문의 오른쪽이 잘리는 현상을 수정하였습니다.
4. 블로그 메뉴의 높이를 줄여 아티클이 최대한 많이 보이도록 하였습니다.
5. 두께 5px의 이미지블럭을 추가하였습니다.
6. 캡션이 이미지에 가까운 곳에 위치하도록 설정을 추가하였습니다.
7. 사이드바 메뉴의 토글 preset을 바꾸었습니다.

에디터에서 보이는 이 글의 레이아웃

...이외에도 자잘한 수정사항이 더 있지만, 기억하기 귀찮은 관계로 이렇게만 적어봅니다. 이 스킨의 설정에 대해 tip을 적어보자면, (사실 별 건 아니고;;) 두 가지 정도가 되겠군요. 첫째로, 물론 toggle.js를 열어보시면 대충 알 법 하지만 사이드바 메뉴의 preset을 설정하는 방법은, skin.html에서 해당 소스를 찾아보시면 <div id="해당 메뉴" style="display:block(혹은 none)">이 보이실텐데, 이것을 block으로 두면 열린 상태가 preset이 되고, none으로 두면 닫힌 상태로 됩니다.

둘째로 티스토리 자체에서 제공하는 레몬펜 플러그인을 사용하실 때에, 사이드바에 추가할 최근 쪽지 내역의 메뉴 제목을 다른 메뉴들과 동일하게 보이게끔 하려면, 레몬펜 플러그인 설정에 들어가셔서 Header에 <div class="label">제목</div>방식으로 넣어주시면 됩니다. 레몬펜 위젯도 토글이 되게끔 여러가지로 실험을 해봤는데, 적어도 티스토리 플러그인 메뉴에서 넣으려면 불가능하다는 결론이 나왔습니다. (혹시 해결하신 분 있으면 저도 가르쳐주세요. /굽신)

2008년 8월 14일자 Post Script :
Internet Explorer 6에서 사이드바가 밀려 아래로 내려가는 현상을 해결하였습니다. 그래도 확실히 7이상이나 FF에서 보는 것과 비교해 미묘하게 위화감이 있는 것 같습니다만.

2008년 8월 28일자 Post Script :
티스토리의 새로운 에디터 업데이트를 계기로 wysiwyg.css를 추가하였습니다. 이미지블럭 정도를 제외한 나머지는 실제 블로그 레이아웃과 오차율 0.5% 정도의 차이만이 존재합니다. (이상하게 글자가 5줄마다 한칸씩이 다른데 이유가 뭔지는 잘 =ㅅ=;;)

'Matrix Ltd.' 카테고리의 다른 글

Nike Air Max Tailwind 2008.  (0) 2008.04.17
100,000 HIT 돌파  (0) 2008.04.14
ID Solution 취향 분석 결과  (4) 2008.03.22
Web Template for Tistory : Deep Scarlet  (9) 2008.03.15
MuzePod Deck : 새로운 시스템에 안착하다.  (2) 2008.03.08
Griffin Tunebuds for iPod nano.  (2) 2008.01.06
Merry Christmas, Everyone!  (4) 2007.12.24

댓글을 달아 주세요

  1. BlogIcon 알퐁손 2008.03.19 12:14 신고  Modify/Delete  Reply

    와우~ 주황색도 무지 이쁘내요 :)
    현재 빨간색도 만들어보고 있지만, 우선 본문의 짤림현상을 수정해야 겠습니다. -_-
    레이어크기에서 뭔가 잘못된 것 같더군요.~~
    아! 링크부분이 지금 정렬이 안되는데 skim.html파일에서 사이드바의 링크부분 태그를 보시면 <ul>이라고 되어있는걸 <ul class="block">로 고쳐주시면 잘 정렬되서 나온답니다^^;
    아직 초보라 여러가지 문제가 많내요~ㅜ.ㅜ

    • BlogIcon Μųźёноliс 2008.03.19 13:58 신고  Modify/Delete

      본문 짤림현상은...스타일시트에서 컨테이너와 아티클 폭을 똑같이 놓지 않고
      컨테이너가 아티클 폭보다 조금 넓게 잡아두면 해결되는 것 같습니다.
      링크는 사실 개인적으로는 그냥 저렇게 뜨는게 마음에 들긴 하는데 ^^;;
      그래도 배포판에는 수정해야겠습니다. ㅎㅎ;;
      그럼, 알퐁손님 좋은 하루 되세요~

  2. BlogIcon 야짐히라 2008.07.03 19:51 신고  Modify/Delete  Reply

    너무이뻐요^^ 퍼가겠습니다~

    • BlogIcon Μųźёноliс 2008.07.03 21:03 신고  Modify/Delete

      마음에 드신다니 다행입니다. ^^;;
      다만 제 버젼은 본문 폭 때문인지 IE6에서는 사이드바가 아래로 밀려버리더군요.
      (...수정한다고는 했는데 확인을 못해봐서;; 참고하셔요 ^^)
      좋은 하루 되시길 바랍니다.

  3. BlogIcon 작은평화 2008.10.17 19:19 신고  Modify/Delete  Reply

    너무 예뻐서 적용했습니다만 ^^;;
    admin을 누르면 존재하지 않는 페이지라고 떠버리는데
    이걸 어쩌면 좋을까요;;

    • BlogIcon Μųźёноliс 2008.10.17 20:06 신고  Modify/Delete

      앗차 =ㅅ=;;; 티스토리의 owner url이 /owner에서 /admin으로 바뀌는 바람에 오류가 있었나봅니다. skin.html 에디터에서 owner_url로 검색하시면 아마 상단 메뉴바 관련된 태그가 처음 걸리실텐데요..거기 [*##owner_url##]/center/dashboard 라고 되어 있는 링크 주소에서 /center/dashboard를 삭제하시면 제대로 작동할 것 같습니다. ^^;;

      첨부파일에도 수정하여 재업로드하였습니다.

  4. BlogIcon 이름이동기 2009.03.15 16:35 신고  Modify/Delete  Reply

    와우 멋집니다 ^^ 지금 적용중인데 본문 700, 사이드바 200 으로는 안되나요??
    지금 소스를 이것저것 만져보았는데 본문이 늘어나도 내용물은 잘리네요 ^^

    • BlogIcon Μųźёноliс 2009.03.19 15:40 신고  Modify/Delete

      안녕하세요. 저도 원래 600인가 650이던 본문 사이즈를 늘린거랍니다. 물론 단순히 프레임만 늘린다고 해결되는게 아니니...다른 것들도 이것저것 한번 건드려보세요 ^^;; 저도 워낙 오래되서 잘 기억이 안 나네요 ㅠㅠ;;

  5. BlogIcon 라하하 2010.11.11 14:29 신고  Modify/Delete  Reply

    감사한 마음으로 잘 쓰겠습니다. 감사합니다. 그런데 CCL 부분의 폰트 색상을 변경하려면 어떤 곳을 수정해야 되나요? 'Creative Commons License' 이 부분이요. 좋은 하루 되세요.