스킨을 배포합니다.

Three Layers White 1.1

Three Layers White 1.1 입니다.



스킨명

Three Layers White 1.1


개요

매우 단순한 형태의 스킨입니다. 지난 번에 발표한 Three Layers Black 1.1 의 흰색 버전입니다.


내용

- 3단형 스킨입니다. 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 블로그 로고 이미지를 보여줍니다.
   단, 너무 큰 이미지는 넣지 말아주세요.
  자동으로 리사이즈하는 태그를 넣지 않았습니다.
  (가로 사이즈 160px에 맞춰져 있습니다.)

- 스킨을 다운 받아 압축을 풀면 2개의 폴더가 있습니다.
  예, 하나는 설치형 태터툴즈용이고 다른 하나는 티스토리용이죠.
  폴더명 끝에 표시가 되어 있으니 선택해서 사용하시면 됩니다.

- 두 스킨의 표면적 차이는,
   미디어로그가 있느냐 없느냐의 차이입니다.
   아, 스킨 하단부에 태터툴즈 아이콘이 있느냐 티스토리 아이콘이 있느냐의 차이도 있군요.

- 컨텐츠가 들어가는 부분의 가로폭은 500px 에 맞춰져 있습니다.
  이론상으로는 컨텐츠의 폭을 수정하는 게 어렵지 않지만
  전체적인 레이아웃을 배경이미지 하나로 처리했기 때문에
  images 폴더 안의 bg.gif 를 수정해야 합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 인터넷 익스플로러 7.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.


간단하게 스킨 구조를 표시하면 다음과 같습니다



<div id="header"></div>
<div id="content"></div>
<div id="sidebar1" class="sidebar"></div>
<div id="sidebar2" class="sidebar"></div>
<div id="footer"></div>



※ Three Layers Black 1.1 과 차이점은 거의 없습니다. 심지어 skin.html 은 완전히 동일하며 style.css 의 색깔들을 수정하였고, 몇 가지 설정값들만 살짝 고쳤습니다. 아, 그러고 보니 이미지 파일도 수정했군요. ^^


다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Three Layers White 1.1

,
스킨을 배포합니다.

Three Layers Black 1.1

Three Layers Black 1.1 입니다.


스킨명

Three Layers Black 1.1


개요

매우 단순한 형태의 스킨입니다. 특징이라면 전체적으로는 좌측 정렬, 사이드바가 두 개. 검은 계열의 스킨이라는 것이죠.


내용

- 3단형 스킨입니다. 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 블로그 로고 이미지를 보여줍니다.
   단, 너무 큰 이미지는 넣지 말아주세요.
  자동으로 리사이즈하는 태그를 넣지 않았습니다.
  (가로 사이즈 160px에 맞춰져 있습니다.)

- 스킨을 다운 받아 압축을 풀면 2개의 폴더가 있습니다.
  예, 하나는 설치형 태터툴즈용이고 다른 하나는 티스토리용이죠.
  폴더명 끝에 표시가 되어 있으니 선택해서 사용하시면 됩니다.

- 두 스킨의 표면적 차이는,
   미디어로그가 있느냐 없느냐의 차이입니다.
   아, 스킨 하단부에 태터툴즈 아이콘이 있느냐 티스토리 아이콘이 있느냐의 차이도 있군요.

- 컨텐츠가 들어가는 부분의 가로폭은 500px 에 맞춰져 있습니다.
  이론상으로는 컨텐츠의 폭을 수정하는 게 어렵지 않지만
  전체적인 레이아웃을 배경이미지 하나로 처리했기 때문에
  images 폴더 안의 bg.gif 를 수정해야 합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 인터넷 익스플로러 7.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.


간단하게 스킨 구조를 표시하면 다음과 같습니다



<div id="header"></div>
<div id="content"></div>
<div id="sidebar1" class="sidebar"></div>
<div id="sidebar2" class="sidebar"></div>
<div id="footer"></div>




다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Three Layers Black 1.1

,
스킨을 배포합니다.

Formal Boxes White 1.1

Formal Boxes White 1.1 스킨입니다.



스킨명

Formal Boxes White 1.1


개요

예. Formal Boxes 1.1 과 상당히 비슷한 스킨입니다. 단지 배경이 흰색이라는 점과 테마 기능이 없다는 점이 차이겠지요. 단순이라는 측면에서는 더 나은 듯도 합니다. ^^

이미 Formal Boxes 1.1 을 받으신 분들 중 테마를 흰색으로 수정해서 사용하실 수 있는 분들은 이 버전을 무시하셔도 됩니다. ^^


내용

- 3단형 스킨입니다. 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 블로그 로고 이미지를 보여줍니다.
   단, 너무 큰 이미지는 넣지 말아주세요.
  자동으로 리사이즈하는 태그를 넣지 않았습니다.
  (가로 사이즈 160px에 맞춰져 있습니다.)

-  스킨을 다운 받아 압축을 풀면 2개의 폴더가 있습니다.
    예, 하나는 설치형 태터툴즈용이고 다른 하나는 티스토리용이죠.
    폴더명 끝에 표시가 되어 있으니 선택해서 사용하시면 됩니다.

   두 스킨의 차이는,
   티스토리용에는 media 메뉴가 있고, 댓글의 날짜 표시가 플레이트형이 아닙니다.
   설치형 태터툴즈용에는 media 메뉴가 없고, 댓글의 날짜도 플레이트형입니다.


설치형 태터툴즈용은 댓글의 날짜 표기 형태가 플레이트형입니다.


타스토리용의 댓글 날짜 표기는 플레이트형이 아닙니다.


하지만 두 스킨 모두 본문과 방명록의 날짜 표기는 플레이트형입니다.


- 컨텐츠가 들어가는 부분의 가로폭은 500px 에 맞춰져 있습니다.
  물론 제가 만든 여느 스킨들처럼 가로폭을 수정하는 게 그리 어렵지는 않습니다만
  본문폭을 넓히다 보면 제일 많이 사용하는 해상도인 가로 1024px 를 넘어가기 쉽습니다.
  주의하세요. ^^

- 역시 style.css 와 index.xml 만 수정하면 됩니다.
   본문폭은 style.css의 주석으로 표시한 contentWidth와 관련된 수식에 맞춰서 수정하면 됩니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 제가 여타 다른 색들을 넣어봤는데, 잘 어울리지 않더군요.
  Formal Boxes 1.1 의 테마를 변경하는 게 더 빠르다고 생각합니다.
  이건 아주 조금 더 가벼운 흰색 버전이라고 생각히시면 되고요.


간단하게 스킨 구조를 표시하면 다음과 같습니다

스킨 구조

스킨 구조


<div id="header"></div>
<div id="content"></div>
<div id="sidebar1" class="sidebar"></div>
<div id="sidebar2" class="sidebar"></div>
<div id="footer"></div>


Formal Boxes 1.1 과의 차이점은 다음과 같습니다.

테마

이 스킨은 위와 같은 테마 선택 기능이 없습니다.


1. 배경이 흰색으로 고정되어 있습니다. 테마 기능이 존재하지 않습니다.

Formal Boxes White 1.1의 하단부 스크린샷

하단부가 살짝 바뀌었습니다.


2. 스크롤이 길게 되는 경우를 위해 하단부에 메뉴를 다시 한번 반복하였고,
    rss 버튼과 태터툴즈 아이콘의 위치, 스킨 저작권의 위치를 조정했습니다.
   (위의 그림을 클릭해보세요. 크게 확인할 수 있습니다.)

3. 이 버전은 Formal Boxes 1.1 과는 달리 테이블 태그를 사용하지 않았습니다.
    duplicate text bug 때문이라는 걸 알게 되었고 해결한 상태입니다.
    따라서 div 를 사용해서 컨텐츠 영역과 사이드바 영역을 구분하였습니다.
    (향후 Formal Boxes 1.1 를 업그레이드 할 때 이처럼 할 것입니다. ^^)

소개 영역에 대해 설명드립니다.

소개 영역

소개 영역의 내용은 각자 채워주세요.


0. 블로그에 접속하면 제목 아래 부분에 나오는 박스입니다.
    내용을 각자 원하는 구문으로 수정하시면 됩니다..
    skin.html 63번째 줄의 introduce 안의 details 안의 내용을 고치면 됩니다.
    스킨을 열어보시면 바로 아실 거예요.

※ style.css 를 보시면 introduce 의 폰트가 정의되어 있습니다. (232번째 줄)

※ 소개 영역은 블로그 메인이나 http://블로그주소/포스트번호 로 들어오는 경우에 나타납니다. 개인적으로 테터툴즈의 주소 표시 방법 중 문자로 표시하기를 사용하시면 효과가 좋을 거라 생각합니다.

※ 만약 이 영역을 사용하고 싶지 않으면 skin.html에서 지우시면 됩니다. (134 ~ 142번째 줄)


- 스킨 파일을 어느 정도 보시는 분들이나 html과 css에 대해 조금씩 아시는 분들 혹은 공부하시는 분들은 갖고 놀기 좋은 스킨이 되지 않을까 생각하기도 합니다. ^^ 또 그게 태터툴즈와 티스토리의 매력 중 하나이기도 하니까요. 무한자유!

- 상당수의 설명이 Formal Boxes 1.1 과 겹칩니다. 사실 거의 비슷합니다. 단지 화이트라는 것이지요. ^^ 물론 스킨을 잘 아시는 분들은 Formal Boxes 1.1 만 가지고도 충분히 흰색으로 만들어 사용하시겠지만 스킨 수정에 익숙치 않은 분들을 위해, 그리고 Formal Boxes 1.1의 수정 버전을 내놓기 전에 맛뵈기로 이렇게 table을 사용하지 않은 흰색 버전을 내놓습니다.
(코드도 조금이나마 더 간단하기도 하고요. ^^)



다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Formal Boxes White 1.1

,
스킨을 배포합니다.

Formal Boxes 1.1

Formal Boxes 1.1 입니다.


스킨명

Formal Boxes 1.1


개요

처음에는 '단순'이란 개념에서 시작한 스킨입니다…만 몇 가지 포인트를 주다보니 간단한 느낌은 처음보다는 줄어들었습니다. 그래도 레이아웃만을 보자면 매우 단순한 편입니다. 특징으로는 테마 기능을 가지고 있습니다.


내용

- 3단형 스킨입니다. 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)
  3단형 스킨은 처음 만들어 봤는데, 별로 산만하지 않고 괜찮아 보이는 듯 합니다.
 
- 블로그 로고 이미지를 보여줍니다.
   단, 너무 큰 이미지는 넣지 말아주세요.
  자동으로 리사이즈하는 태그를 넣지 않았습니다.
  (가로 사이즈 160px에 맞춰져 있습니다.)

-  스킨을 다운 받아 압축을 풀면 2개의 폴더가 있습니다.
    예, 하나는 설치형 태터툴즈용이고 다른 하나는 티스토리용이죠.
    폴더명 끝에 표시가 되어 있으니 선택해서 사용하시면 됩니다.

   두 스킨의 차이는,
   티스토리용에는 media 메뉴가 있고, 댓글의 날짜 표시가 플레이트형이 아닙니다.
   설치형 태터툴즈용에는 media 메뉴가 없고, 댓글의 날짜도 플레이트형입니다.


설치형 태터툴즈용은 댓글의 날짜 표기 형태가 플레이트형입니다.


타스토리용의 댓글 날짜 표기는 플레이트형이 아닙니다.


하지만 두 스킨 모두 본문과 방명록의 날짜 표기는 플레이트형입니다.


- 컨텐츠가 들어가는 부분의 가로폭은 500px 에 맞춰져 있습니다.
  물론 제가 만든 여느 스킨들처럼 가로폭을 수정하는 게 그리 어렵지는 않습니다만
  본문폭을 넓히다 보면 제일 많이 사용하는 해상도인 가로 1024px 를 넘어가기 쉽습니다.
  주의하세요. ^^

- 역시 style.css 와 index.xml 만 수정하면 됩니다.
   본문폭은 style.css의 주석으로 표시한 contentWidth와 관련된 수식에 맞춰서 수정하면 됩니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.
   테마별 스타일시트에 들어있는 값들을 수정하고,
   배경만 잘 정해도 여러가지 분위기가 연출될 수 있을 듯 합니다.


간단하게 스킨 구조를 표시하면 다음과 같습니다

스킨 구조

스킨 구조

<div id="header"></div>
<table id="content-table">
  <tr>
    <td id="content-table-td"><div id="content"></div></td>
    <td id="sidebar-table-td-1"><div id="sidebar1" class="sidebar"></div></td>
    <td id="sidebar-table-td-2"><div id="sidebar2" class="sidebar"></div></td>
  </tr>
</table>
<div id="footer"></div>


이 스킨은 테마 기능을 제공합니다.

테마

테마 선택기입니다. 박스에 마우스를 대면 이름이 툴팁으로 나와요.


1. 기본적으로 blue 테마가 지정되어 있습니다.

2. 총 8개의 테마가 있습니다. blue, gray, violet, brown, greengrass, brown,
    jade, pinklove, jadebubble, greenbubble 입니다.
    테마 선택기 박스를 클릭하면 해당 테마로 바로 변신합니다.

3. 테마별로 필요한 스타일시트들은 images 폴더 안에 각각 저장되어 있으며
   각각의 파일 이름은 style.테마이름.css 입니다.
   예를 들어 brown 테마라면 style.brown.css, red 테마라면 style.red.css 겠죠.

  (따라서, 만약 기본 스타일시트인 style.css에서 원하는 정의를 찾지 못한다면
    위의 테마별 스타일시트를 찾아보시면 됩니다.)

4. 기본 테마를 변경하고 싶으시면
    skin.html의 8번째 줄, 97번째 줄의 스타일시트를 원하는 테마로 변경하세요.

    (예: 만약 greengrass 테마를 기본 테마로 하고 싶으면
          8번째 줄과 97번째 줄의 스타일시트를 style.greengrass.css 로 바꿔주세요.
          red 테마로 바꾸고 싶으면
          8번째 줄과 97번째 줄의 스타일시트를 style.red.css 로 바꿔주면 되겠지요.)

6. 만약 테마 기능을 사용하고 싶지 않다면
    38번째 줄부터 시작되는 [테마 선택기 자바스크립트] 를 모두 지워주시고,
    141번째 줄 정도부터 시작되는 [테마 선택기] 부분 역시 지워주시면 됩니다.

소개 영역에 대해 설명드립니다.

소개 영역

소개 영역의 내용은 각자 채워주세요.


0. 블로그에 접속하면 제목 아래 부분에 나오는 박스입니다.
    내용을 각자 원하는 구문으로 수정하시면 됩니다..
    skin.html 136번째 줄의 introduce 안의 details 안의 내용을 고치면 됩니다.
    테마 선택기도 다른 영역으로 옮겨도 됩니다. 아예 삭제할 수도 있지요.
    스킨을 열어보시면 바로 아실 거예요.

※ style.css 를 보시면 introduce 의 폰트가 정의되어 있습니다. (248번째 줄)

※ 소개 영역은 블로그 메인이나 http://블로그주소/포스트번호 로 들어오는 경우에 나타납니다. 개인적으로 테터툴즈의 주소 표시 방법 중 문자로 표시하기를 사용하시면 효과가 좋을 거라 생각합니다.

※ 만약 이 영역을 사용하고 싶지 않으면 skin.html에서 지우시면 됩니다. (134 ~ 142번째 줄)


- 원래 의도는 단순한 스킨을 원했는데 오히려 설정해야 할 것들이 많아져서 자칫 사용하기 어려운 스킨이 된 것도 같습니다.

- 하지만, 스킨 파일을 어느 정도 보시는 분들이나 html과 css에 대해 조금씩 아시는 분들 혹은 공부하시는 분들은 갖고 놀기 좋은 스킨이 되지 않을까 생각하기도 합니다. ^^ 또 그게 태터툴즈와 티스토리의 매력 중 하나이기도 하니까요. 무한자유!



다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Formal Boxes 1.1

,
스킨을 배포합니다.

Letter To You 1.1

Letter To You 1.1 스킨입니다.


스킨명

Letter To You 1.1


개요

예, 편지입니다. 제가 예전에 좀 멀리서(^^) 블로깅을 한 적이 있었는데, 블로그에 접속해서 글을 적고 답글을 달고 하다보니 마치 편지를 적는 듯한 느낌이 들더군요. 안부를 묻고 전하고 그런 느낌 말이죠. 그 때 생각했던 컨셉을 완성했습니다. 편지봉투와 편지지 그리고 연필로 분위기를 잡아주고 있습니다.


내용

- 2단형 스킨입니다. 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 블로그 로고 이미지를 보여줍니다.
  단, 너무 큰 이미지는 넣지 말아주세요.
  자동으로 리사이즈하는 태그를 넣지 않았습니다.

- 컨텐츠가 들어가는 부분의 가로폭은 500px 에 맞춰져 있습니다.
  물론 제가 만든 여느 스킨들처럼 가로폭을 수정하는 게 그리 어렵지는 않으나
  위의 편지봉투와 메뉴들 간의 레이아웃을 고려하면서 수정하는 게 쉽지는 않을 듯 합니다.

- 하지만 당근 직접 수정을 하실 수도 있지요.
  역시 style.css 와 index.xml 만 수정하면 됩니다.
  대부분의 경우 style.css의 주석에 적어둔
  contentWidth과 관련된 수식에 맞춰서 수정하면 큰 문제는 없을 것입니다.

- 또한 폰트 크기라든지 색깔, 사용된 이미지 등은 style.css 파일을 수정하는 것만으로 가능합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.



그리고 몇 가지 설명할 게 있습니다.

0. 스킨을 다운 받아 압축을 풀면 2개의 폴더가 있습니다.
    예, 하나는 설치형 태터툴즈용이고 다른 하나는 티스토리용이죠.
    폴더명 끝에 표시가 되어 있으니 선택해서 사용하시면 됩니다.

1. 관리자 로그인을 하려면 우측 상단의 연필심 부분을 클릭해주세요.
   따로 버튼이 보이지는 않습니다.

사용자 삽입 이미지

2. 좌측 상단에 From 부분의 이름은 블로그의 주인장 이름입니다.
    이름에는 rss 링크가 걸려있어요.
    (물론 사이드바 하단에 rss 버튼이 따로 존재합니다.)
    skin.html 을 열어서 조사 (~가, ~이)를 수정할 수 있습니다.
    <div id="blog-author"><a href="[ ##_rss_url_## ]" onclick="window.open(this.href); return false;" onfocus="this.blur();">[ ##_blogger_## ]</a>가.</div>
    18번째 줄이죠.

사용자 삽입 이미지

3. 물론 편지봉투 좌측 하단에 나타나는 어두운 갈색 바탕의 글자는 블로그 제목입니다.

4. To 즉, 받는 사람의 경우에는 skin.html 을 열어서 직접 수정할 수 있습니다.
   <div class="blog-receiver">그대에게.</div>
   22번째 줄이죠.

사용자 삽입 이미지

5. From 과 To 의 이름을 css의 float으로 맞춰놨는데, 이상하게도
    파이어폭스와 인터넷 익스플로러, 오페라에서 모두 제각각 나타나더군요.
    브라우저마다 조금씩 위치가 다릅니다. 이점 이해해주시고,
    혹시 완전히 이상하게 나오는 (혹은 아예 안나오는) 브라우저가 있으면 알려주세요.



다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Letter To You 1.1



그리고

익스플로러 7에서 제목 부분에 문제가 있다고 하는군요. ㅜ.ㅜ 이 스킨으로 보자면 [To. 그대에게] 부분과 [Skins And Bones] 부분이 겹친다고 합니다. 브라우저마다 표시가 다 다르게 되니 참 어렵군요. 이 부분은 아무래도 다른 방안을 생각해 봐야겠어요. (예를 들자면 psd 파일을 제공해서 각자 직접 이름을 적게 한다든지 하는 방안 말이죠.) 하지만, 그 밖의 브라우저에서는 별 다른 이상 없을 거예요. ==> 인터넷 익스플로러의 float-margin 버그 를 알아서 일단 제 블로그에만 조처를 해두었습니다. 만약 이게 여러 브라우저에서 잘 보이면 이 방법으로 패치를 할 생각입니다.

또한 코멘트 폼에서 탭키를 누르면 순차적으로 이동해서 '댓글달기'버튼으로 가게 되어있는데, 익스플로러 7에서는 역시 사파리에서 잘 안된다고 합니다. 으윽; (그래도 이건 치명적인 건 아니니까;;; )



그리고

2007년 2월 3일 6시 30분 이전에 받으신 분들 중 키로그 출력이 잘 안되시는 분들은 다시 받아서 skin.html을 재설치 해주세요. (특히 티스토리를 쓰시는 분들) 키로그 쪽에 주석을 달아뒀는데, 그게 출력에 영향을 끼친다는 걸 발견했습니다. 설치용 태터툴즈용 주석을 지우니 잘 작동되는군요. 죄송합니다. :|



그리고

설치형 사용자들 중에서 빨간테두리가 나오시는 분들은 style.css에 가서 136번째 줄의 border:1px solid #f33; 으로 되어 있는 걸 지워주세요. 디버깅용으로 남겨두었던 것인데 제가 위의 주석 지우다가 다시 활성화시켰더군요. 죄송합니다. 물론 지금 다운로드 버전은 괜찮습니다. 스킨 배포 하면서 실수가 정말 많군요.
,