스킨을 배포합니다. Three Layers White 1.1

스킨/배포 2007. 3. 7. 00:02
스킨을 배포합니다.

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

스킨/배포 2007. 2. 26. 19:02
스킨을 배포합니다.

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

,

[예고] Three Layers 1.1 (black)

스킨 2007. 2. 22. 09:30
사이드바가 두 개인 스킨들을 만들면서 느낀 건데, 이게 의외로 안정감이 있더라고요. 이제껏 복잡할 것 같아서 사이드바는 한 개로만 만들어왔는데 말이죠.

그래서, 한번 더 만들어 봤습니다. 이 스킨도 '심플!'을 강조하며 시작했건만 많이 심플한 것 같지는 않군요;;; 하지만, 제 스킨들이 다 그렇듯 좀 투박해 보이기도 하고, 어느 정도 튜닝이 가능한 (^^) 뭐 그런 측면으로 볼 때는 썩 나쁘지는 않은 듯 해요.

흰색 바탕에 검은 글씨라는 기본형을 벗어난 스킨은 많이 없는 게 사실이예요. 하지만, 특정 색깔을 강조하기도 애매하죠. 결국 사이트의 성격별로 특성에 맞는 색을 강조해야 할텐데 배포용 스킨에서는 그런 게 어렵기도 하고요.

어쨌든 배경 하나 달랑 깔고 (^^), 메뉴 아이콘 간단하게 만들어서 해봤습니다. 처음에 마진을 잘못 잡고 시작해서 수정을 조금 해야 할 것 같아요. 언제나 느끼지만 가독성이 좋은 페이지를 만든다는 건 참 어려운 것 같습니다. 스킨 잘 만드시는 분들 보면 정말 대단해요.

어쨌든 이 스킨 역시 조금 더 만져서 공개하려고 합니다. ^^
,

스킨을 배포합니다. Formal Boxes White 1.1

스킨/배포 2007. 2. 14. 12:25
스킨을 배포합니다.

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

,

방명록에 사용되는 비밀글 기능 치환자

스킨/추가설명 2007. 2. 11. 22:20
저는 원래 태터툴즈 클래식 사용자입니다. 태터툴즈 1.1과 티스토리의 사용은 스킨을 만들고 싶어서 사용하게 된 것이고요; (이유가 좀 웃기군요. ^^)

티스토리용 기본 스킨

티스토리용 기본 스킨

따라서, 제가 처음에 스킨을 만들 때 참고했던 스킨이 바로 티스토리용 기본 스킨이었습니다. skin 폴더에 tistory라는 폴더에 들어있었지요.

이 티스토리용 기본 스킨과 태터툴즈 스킨 레퍼런스를 벗삼아 스킨의 구조도 익히고, 치환자도 확인해가며 익혔죠. 그런데, 오마이갓- 이제까지 제가 만들어 온 스킨에 뭔가 이상한 게 있다는 걸 이제야 알았습니다.

굳이 이야기하자면 이상하다기 보다는 뭔가가 빠진 거죠. 저도 왠지 그게 이상했던… 바로 그것입니다.

예, 이미 아시는 분들도 많으실 거라 생각합니다. 바로 제가 만든 스킨들에는 방명록에 비밀글 체크박스가 없더군요. ㅜ.ㅡ

오늘에야 알았습니다. 곰님이 얼마 전 방명록에 비밀댓글이 가능하냐고 여쭤보셨는데, 저는 안된다고 알고 그렇게 대답했거든요. -_-; 태터툴즈의 공식 스킨 레퍼런스에도 비밀글 입력 체크박스에 대한 치환자는 없었거든요.

태터툴즈 스킨 레퍼런스 중에서

보세요. 없잖아욧~!


그런데, 다른 블로그에 가보면 그런 게 있고 해서 참 신기했었거든요. 무슨 플러그인이 있나보다. 하지만, 배포용 스킨은 플러그인까지 신경쓸 수 없다는 게 제 생각이기 때문에 그냥 넘어갔었는데, 다른 분들이 만든 스킨을 보다가 [ ##_guest_input_is_secret_## ] 라는 치환자가 있다는 걸 알게 되었습니다. 오마이갓.

이제까지 제 스킨을 받으신 분들 중 혹시 방명록에 비밀글 기능이 필요하신 분들은 다음과 같이 조치해주시면 될 듯 합니다.

skin.html을 열어서 <s_guest_form> 과 </s_guest_form> 사이에 홈페이지 입력란 바로 아래에 다음과 같은 코드를 살짝 추가해주시고,

<p class="secret-wrap">
     <input type="checkbox" class="checkbox" id="[ ##_guest_input_is_secret_## ]" name="[ ##_guest_input_is_secret_## ]" />
     <label for="[ ##_guest_input_is_secret_## ]"> 비밀글 </label>
</p>

(실제로 추가하실 때는 [ 와 ##_ 를 붙여서 사용하시는 거 아시죠?)

style.css 에도 다음처럼 추가해주세요. 위치는 그냥 아무 곳에나 넣어주시면 되요.

.guest-write .secret-wrap    {}
.guest-write .checkbox        { width:25px; border:none; padding:0; margin:0; }



앞으로 새로 만들 스킨들에는 방명록의 비밀글 기능을 꼭 넣겠습니다. 또, 이제껏 제가 만든 스킨들도 조금씩 업그레이드를 할텐데, 그 때는 꼭 이 기능을 추가하겠습니다. 죄송합니다;;; (아아- 진짜 몰랐어요. 저는 플러그인 기능인 줄 알았어요. -_-)

우선 가장 최근에 배포한 스킨인 Formal Boxes 1.1 에는 적용을 했으니 별다른 수정을 하지 않으신 분들은 자료실에서 다시 받으시면 되겠습니다.

태터툴즈 관계자분들 중 이 글 보시면 스킨 레퍼런스에도 이 치환자를 추가해주세요.

,
글 목록 번호 : 1 2 3 4
◀ 다음 글 목록 이전 글 목록 ▶

티스토리툴바