SAVE THE DEVELOPERS <!> Upgrade IE 6 Now!

이 배너는 IE6 사용자에게만 보여집니다. 브라우저 업데이트로 보다 편리한 웹세상을 만나보세요!

«   2024/03   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

Monochrome TT Blog Skin.

태터툴즈 1.1 사용하시는 분은 새로 릴리즈한 1.1용 Monochrome 스킨을 사용하시기 바랍니다. :)
Monochrome Skin for TT 1.1



Monochrome 태터툴즈 블로그 스킨을 공개 배포합니다.

태터툴즈 블로그 스킨 공모전에 출품하여, "인기상"에 입상하였습니다. +_+''
간단하면서, 심플한 느낌의 사이드바 오른쪽의 2단형 스킨입니다. 배경으로 사용한 이미지 외에는 별 다른 이미지를 사용하지 않았습니다. Monochrome 시리즈의 첫번째 작품(?)입니다. 순수 아마추어의 작품이라, 코드가 복잡하고 불필요한 부분이 많습니다.
  1. 이 스킨은 태터툴즈 1.0.6 에 최적화 되어 있습니다.
  2. 대부분의 브라우져(IE 6.0, Firefox, Opera, Safari)에서 동일하게 보임을 확인했습니다. (하지만 불여우에서 가장 잘 보입니다.)
  3. Windows의 경우, ClearType 적용상태에서 보다 더 예쁘게 출력됩니다. 클리어타입을 사용하지 않으시는 분은 지금부터라도 사용해 보세요~! (영문폰트 때문입니다.)
  4. 하단 배너(Monochrome 배너)와 제작자를 수정하지 않는 범위 내에서 자유롭게 수정 하실수 있습니다.
  5. 본문의 영역의 크기는 600px 입니다.
  6. 사이드바 영역의 크기는 150px 입니다.

애초에 제작한 스킨은 태터툴즈 1.1에 맞추어 제작 되었습니다만, 태터툴즈 1.1의 공개가 늦어짐에 따라 1.0.6 스킨만 공개/배포 합니다. 1.1용은 1.1이 공개될 즈음에 마침맞게 공개하도록 하겠습니다!


배포하는 스킨은 다음과 같이 두가지 입니다.

1. hi8ar_Monochrome Xhtml V1.0 배포판
단순한 모노톤의 스킨입니다. 간단한 흑백의 조합의 배경만을 사용해서, 포스팅의 내용이 더욱 더 돋보이고 뚜렷하게 함을 목적으로 합니다.
배경 색상 코드 : #d7d7d7
링크 색상 코드 : #3d68d2
링크 마우스 hover시 색상 코드 : #993333


2. hi8ar_Monochrome_Red Xhtml V1.0 배포판
hi8ar_mono와 기본적인 것은 같습니다. 심심한 흑백에 빨강 컬러셋을 적용했습니다. 이 계절에 잘 어울립니다. :)
스크린샷으로 미리보기.
배경 색상 코드 : #cebabb
링크 색상 코드 : #895c5c
링크 마우스 hover시 색상 코드 : #993333


다운로드(Download)
태터툴즈 스킨 페이지로 링크합니다~!
2006.10.24 PM 10:41 간단한 오류 수정이 있었습니다.
2006.10.29 AM 10:00 매우 중요한 오류 수정이 있었습니다.
- 사파리(Safari) 브라우져에서 본문 스타일 미적용 문제 (자세한 내용 보기)



MonoChrome TT Blog Skin의 활용.

1. SweetTitle 스크립트의 적용.

SweetTitle 스크립트가 적용되어 있습니다. 링크 위에서 위와 같은 풍선 팝업을 띄웁니다.
(a 태그에 title 속성이 있을경우, title 의 내용 역시 출력합니다.)
예제: What a Nuisance! (이 링크에 마우스를 올려 보세요~!)
<a href="http://hi8ar.net/" title="hi8ar's Blog">What a Nuisance!</a>

만약 스윗 타이틀이 제대로 동작하지 않는다면, skin.html 파일의 윗부분의 스윗타이틀 스크립트 경로부분을 수정해 주시기 바랍니다.
풍선 팝업의 모양과 색상은 /css 폴더의 sweetTitles.css 에서 수정하실수 있습니다.


2. 상단 탭 네비게이션.
skin.html 파일을 에디터로 열어,
36번째 줄을 보시면
	    	<!-- CSS Tabs 상단 탭에 추가하실수 있습니다-->
<li><a href="[##_blog_link_##]" title="처음으로~"><span>Home</span></a></li>
<li><a href="[##_localog_link_##]" title="위치로그"><span>Location</span></a></li>
<li><a href="[##_taglog_link_##]" title="태그"><span>Tag</span></a></li>
<li><a href="[##_guestbook_link_##]" title="방명록"><span>GuestBook</span></a></li>


위와 같은 부분을 찾으실수 있습니다. 위와 같은 형식으로 <li> 태그 안에 링크를 추가하시면 상단 탭 네비게이션에 탭을 추가 하실수 있습니다. 중요한 카테고리의 링크나 혹은 다른 곳으로의 링크를 더 넣으셔서 활용하세요~!


3. YouTube 동영상 배경 꾸미기.
예제 :: http://hi8ar.net/247
유튜브 동영상 소스를 <div class="utube"> 로 감싸 주시면 유튜브 동영상 뒤에 준비된 배경이 나옵니다.
<div class="utube"><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/0jN7EGVS2bI"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/0jN7EGVS2bI" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object></div>

주의 : 태터툴즈 1.0.6의 에디터는 html 태그 사이를 엔터로 띄우게 되면 <br> 태그 (줄바꿈 태그)를 넣습니다. 줄바꿈 없이, 반드시 한줄로 작성하셔야지만 CSS의 .utube 에서 지정한 여백이 맞게 적용됩니다.



별로 대단치 않은 스킨이라 공개/배포하는데 굉장한 시간이 걸리는군요. 출품했던 스킨의 소스를 찬찬히 다시 뜯어보며, 어떻게 이 스킨이 입상한 것인지 의구심이 갈 정도 였습니다. 여기저기 오류에, 잘못된 경로 때문에 스윗타이틀은 작동하지도 않고....-_ㅡ;; 난감했습니다.

오류와 실수를 바로 잡는다고 바로잡았는데, 제대로 된건지 모르겠습니다. 돌아서면 실수가 보이는군요. 수정하거나 추가할 사항이 있으면 계속 고쳐두겠습니다. 기타 오류와 질문사항등은 댓글로 남겨 남겨 주세요~!

아무쪼록 멋진 블로그 만드시는데 도움이 되었으면 좋겠습니다. :)
감사합니다~!! +_+'''

Trackback

Trackback Address :: http://hi8ar.godohosting.com/oldlog/trackback/252

  1. Subject : MonochromeㅣTattertools Skinㅣ1.0.6

    Tracked from 개츠비's Private 2006/10/29 11:32 del.

    스킨 주소 : Monochrome 스킨 다운로드 : Monochrome 스킨 제작자 : 하이바~ 제작자 설명 : Monochrome

  2. Subject : Monochrome 스킨 오류수정

    Tracked from hi8ar.net : What a Nuisance! 2006/11/09 08:25 del.

    조금은 중요한 오류의 수정이기에 새로운 포스팅으로 알립니다. 죄송해요...;;;; 1. 사파리에서 본문의 스타일이 지정되지 않는 오류를 수정했습니다. style.css 파일 327라인. #sidebar .notice { padding:5px 10px; margin:5px 0; -moz-border-radius: 6px;*/ } 위 보시다 싶이 -moz-border-radius: 6px;*/ 부분입니다. 어처구니 없게도 주석 끝만 있고 주석 시작이 빠..

Comments

Go to write form
  1. 마이해피엔딩 2006/10/23 01:13

    제가 심사위원이었으면 1등이었을 스킨인데.
    아쉽네요 크어~ 고치기 Reply

    • 하이바~ 2006/10/23 01:30

      지금은 상태가 많이 양호(?)해 졌지만.. 출품때만 해도 엉망이었습니다.
      다음번에 이런 기회가 또 있다면, 부디 심사위원이 되어 주세요~!! 후후후.. ^^;;; 고치기

  2. 나비 2006/10/23 02:26

    이얏!! 설명만 봐도 멋져요..언제 한번 적용해 봐야지 8) 고치기 Reply

  3. Peppy 2006/10/23 02:26

    완전 축하드립니다 :D
    떡뽁이는 언제?? :P 고치기 Reply

    • 하이바~ 2006/10/23 19:23

      글쎄요.. 아직 상품 배송에 관한 안내가 없네요. :|
      [b][color=#996633]그나 저나 나의 떡볶이를 노리는 사람들이 너무 많아..........-_ㅡ''[/color][/b] 고치기

  4. Roy 2006/10/23 02:28

    아우.. 하이바님 워프 사용자였으면 얼마나 좋을까나.
    나도 써보고싶어요. +.+ 고치기 Reply

  5. Bangz 2006/10/23 05:06

    요리보고 조리보아도 너무 멋진 스킨이에요.. ;)
    Monochrome에선 저 같이 글 못 쓰는 사람도 재미난 글이 줄줄 써질 것 같은 예감이 드는데요.. :roll:8) 고치기 Reply

  6. 레몬그린티 2006/10/23 11:59

    축하 드립니다... 언제 이런걸 준비 하셨대요+_+ 고치기 Reply

  7. 특급앙마™ 2006/10/23 13:12

    감사합니다.
    날잡아서 스킨 변경해야겠어요.
    정말 정말 감사해용^^ 고치기 Reply

    • 하이바~ 2006/10/23 19:17

      감사는 뭘...^^;;;
      하기사.. 익숙해진 스킨을 바꿔버리는건, 엄청난 부지런함을 요하는 일인것 같습니다~! 고치기

  8. Jays 2006/10/23 15:19

    완전 테터계의 인기스타되셨삼 [!!] 고치기 Reply

  9. foocon 2006/10/23 16:51

    흐잉~
    겨우 블로그 다 꾸며놨는데...
    이거 보니까...스킨 또 바꾸고 싶어져요~ㅠ.ㅠ
    이런 맘 아시죠? 고치기 Reply

    • 하이바~ 2006/10/23 19:27

      글쎄요... 아는 것도 같고 모르는 것도 같고... 하하..하.. -_ㅡ;;;
      아~! [b]곰곰이[/b] 생각해 보니 아는것 같아요! 아무튼 이미 foocon님의 블로그는 아름다운 갈색빛으로 물들었던데요? ^^ 고치기

  10. 가막눈 2006/10/23 20:49

    우왕 하이바님 완존 짱이에요. 요 이쁜 스킨 내 언젠가는 빛을 발할줄 알았삼, 나 신기 있삼.
    부러워요, 한번에 짠 하고 되는거면 저도 업어가고 싶어요 ㅜㅜ 고치기 Reply

  11. FLARE 2006/10/23 22:44

    대빵 축하드립니다~~
    하이바님의 깔끔함이 잘 묻어나는 이쁜 스킨이예요~~

    블로그 올 때마다 항상 부러웠는데 인기상으로는 부족한 느낌 :) 고치기 Reply

  12. DARKLiCH 2006/10/23 22:55

    동영상 배경화면은 제블로그로 끌고가서 용접하겠습니다. 굿아이디어입니다. ;) 고치기 Reply

    • 하이바~ 2006/10/24 01:17

      옙.. 원하신다면 마음껏 사용하셔도 좋습니다~!
      사실 제 아이디어라고는 할수 없고, 때때로 워드프레스 블로그에서 그런 배경이 있는 스킨을 볼때가 있어서....
      살짝 베껴 왔습니다.. ^^;;; 고치기

  13. obse 2006/10/23 23:00

    기다리던 형식의 스킨입니다.
    ^^ 감사하게 잘쓰겠습니다~!!
    정말 감사합니다~:lol: 고치기 Reply

    • 하이바~ 2006/10/24 01:23

      앗.. 감사는 오히려 제가 드려야 할 것 같은데요? 이런 댓글을 꼭 바라는 것은 아니었지만... 뭐랄까.. 공개하기를 잘 했다는 느낌 같은것이랄까요?... 다른 분의 블로그에서 제 스킨이 잘 어울리는 것을 바라보니 기분이 매우 상콤합니다~!! 하하..
      여하튼.. [color=#993300][b]감사합니다~!![/b][/color] 고치기

  14. 얼리어답터 2006/10/25 18:36

    활용부분에서 질문드립니다.
    1,2번에서 이해가 상당히 많이 안가네요..^^;;
    일단 스크립트는 다운받기는 했는데 그후로 어떻게 해야할지 모르겠고..
    링크는 어떤방식으로 넣어야하는지도 모르겠구요..
    좀 자세한 설명 염치없이 부탁드립니다..:) 고치기 Reply

    • 하이바~ 2006/10/26 02:16

      @ 얼리어답터님 //

      1. SweetTitle 스크립트는 이미 스킨에 적용되어 있습니다. 따로 다운 받으실 필요는 없습니다. 다만 스크립트의 경로에 따라서 적용되지 않는 경우가 있는것 같아서, 풍선 팝업이 보이지 않을때는, 경로 부분을 한번 절대경로나 혹은 스킨의 경로로 수정해 보시라고 한 것입니다.
      모든 링크에 대해서 반응 하므로, 특별하게 링크를 작성하실 필요는 없습니다. 다만 title 속성이 있을때, title의 내용을 링크될 주소와 함께 풍선 팝업에 나타냅니다.

      2.탭 네비게이션에 링크를 추가하시려면, 위 올려진 태그부분을 찾아,
      [quote]<li><a href="[color=#993300]링크할 곳의 주소[/color]" title="[color=#993300]링크의 제목[/color]"><span>[color=#993300]링크[/color]</span></a></li>[/quote]
      의 형식으로 추가 하시면 탭 네비게이션에 추가한 링크가 나타납니다.

      도움 되시길... :) 고치기

  15. JeK 2006/10/27 17:48

    먼저 스킨 사용 잘 하겠습니다. 아직 문을 열지 않고 이리저리 수정 중 입니다.

    사이드바에서 카테고리를 보면 하위 디렉토리가 있으면 바로 보이지 않고 + 버튼을 눌러야지만 하위 디렉토리가 보이는데 바로 보일 수 있게 할 수 있는 건가요? 개인적으로 다 보였음 해서 합니다. 고치기 Reply

    • 하이바~ 2006/10/27 19:59

      @ JeK
      태터툴즈의 기본 테이블 카테고리를 사용하면 +버튼을 눌러야 하위카테고리가 보입니다. 테이블 카테고리를 사용하면 수정할수 없는 것으로 알고 있습니다. 치환자 [ ##_category_## ]

      다만.. 테이블 카테고리 대신 DIV 형 카테고리리스트를 사용하면 모든 카테고리가 펼쳐진 모양으로 나타내실수 있습니다. 하지만 +버튼이나 트리모양은 나타나지 않습니다.

      skin.html 파일의 336라인..
      [quote] <!-- category -->
      <div class="category">
      <h3>Category</h3>
      <div class="box"> [ ##_category_## ] </div>
      <!-- <div class="box"> [ ##_category_list_## ] </div>-->
      </div>[/quote]

      보시면 category_list 치환자가 주석으로 묶여 있는 것을 보실 수 있습니다. category 치환자를 삭제하시거나 주석으로 묶어주시고, 아래 category_list의 주석을 풀어주시면 모든 카테고리가 펼쳐진 모습으로 사용하실 수 있을 듯합니다. :) 고치기

What's on your mind?

댓글 입력 폼

:) ;) :D :p 8D 8| 8) :( :o --;) ㅡㅡ;)