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 Skin [Ver2.0]

User inserted image
Monochrome 스킨의 새 버전입니다. 지금 이곳에 적용된, 스킨의 배포용 버젼으로 보시면 되겠습니다. 이름을 굳이 모노크롬이라고 또 명명 해야 할 이유는 없지만, 마땅한 다른 이름이 떠오르지 않아.. 그냥 모노크롬 2.0 입니다. 냐하함..

왠지 모르게 만들다 만 듯한 좌우 비대칭과 썰렁함이 콘셉이라면 콘셉..
(사실 만들다가 만 것이 맞아요..;;)

ncloud 님의 simple.js 스크립트를 사용했습니다. 사용을 허락해 주신 ncloud 님께 감사드립니다.

웹표준? 그런 것 잘 모름. :)
저작권? 저작권도 잘 모름.. (As your wish~!)
본문영역 600px, 사이드바 200px
오류사항은? 아래 댓글로 알려주시면 해결방안을 찾아보겠습니다. 모를 확률 90%~! 10%의 확률에 도전해 보실분이라면야.. :P

사용하실 분이 굉장히 없을 것으로 예상되므로 티스토리용은.. 상황을 봐서..
감사합니다.

-----------------------------------
Date : 2007. 5. 13
Name : hi8ar_mono_20
by : h8ar.net


* 2007.5.15 티스토리 버젼.
* 2007.5.17 800px 만들기.

* 2007.5.24 1st A/S

* 2007.6.15 2nd A/S
수정되고 바뀐 내용은 다음과 같습니다. @_@'

  1. listbox2 에도 listbox 와 같은 크기의 윗쪽 여백 추가.
  2. 방명록에 비밀글 기능 추가.
  3. 카운터 위 "Stats" 추가.
  4. 불필요한 플러그인 치환자 제거.. ;;;;
  5. 본문 영역 키워드 위에서 마우스 커서 모양 변경.
    User inserted image
  6. 기타 등등.. :)
  7. 800px 확장 css 의 경우, 방명록 하단 블로그 이름과 배너들이 가운데 정렬 되지 않는 것 수정.
  8. 심심해서 만든 상단 이미지 하나.
top.gif

top.gif


위 이미지가 적용된 모습은 http://hi8ar.tistory.com/ 에서 보실 수 있습니다.
(위 그림 저장하셔서, 파일 이름을 top.gif 로 변경한 후 스킨 images 폴더에 올리시면 변경됩니다. 기대는 마세요. 구리구리 합니다. ;P )

태터툴즈 게시판의 태터툴즈용 스킨, 티스토리 블로그의 티스토리 스킨, 800px 변경하기의 css 파일 모두 수정, 추가되었습니다.. :)


-----------------------------------

다운로드는 태터툴즈 스킨 게시판에서... :)
티스토리용도 따로 만들었데요~!
본문 영역을 800px 로 늘릴수 있습니다.

 

shooters 딱지. 혹은 logo.

st_logo1
st_logo2


딱지 만들기..


 

Deskshooters 배너 공모.

150 x 70 px
ds_banner1 ds_banner2

150 x 50 px
ds_banner3 ds_banner4

100 x 40 px
ds_banner5 ds_banner6


공모전 이야기만 꺼내 놓고, 아무것도 만들지 않으면 안될것 같아서 끄적여 봤습니다. 이런거 만들기엔 별로 소질이 없어, 그저 그렇게 만들었지요. :') 결론부터 얘기하면.. "구리구리"합니다. 막상 만들려고 하니, Deskshooters 사이트에서 무엇인가를 따와서 배너로 만들어야 할텐데.. 따오거나 가져올것이 별로 없었습니다. 게다가 사이트 리뉴얼 작업을 하고 있는 지금, 아무래도 다소 엉뚱한 디자인이 된듯합니다. 하하.. 사실 Deskshooters 의 이렇다할 마크 하나도 없는데.. 그저 할수 있는거라곤 Deskshooters 글자 나열 정도밖엔..... ^^;;;

아무튼, 슈터즈가 리뉴얼 되면.. 그에 어울리는 배너를 다시 생각해 봐야겠습니다. 역시, 큰 사이즈보단 작은 사이즈가 쉽네요. 100x40 px 사이즈가 제일 맘에 듭니다. 낄낄. 배경색은 각자 블로그의 배경색에 맞게 수정해도 괜찮을 것 같습니다.


Deskshooters Link 패널을 여는 배너
ds_banner7 ds_banner8

그러니까 병뚜껑 버젼.. :) 위 배너들에서 억지로 색상만 끼워 맞췄지요. 까만 병뚜껑은 좀 이상하네요.

슈터즈의 앞으로의 방향에 대해서 까지 이야기가 나오고 있습니다. 아무래도 배너공모는 시기가 적절치 못했을런지도 모르겠어요. ;_; 하지만 뭐 아무려면 어떻습니까? 상품까지 등장했는데 안 할수는 없잖아요. "아.. 이거 뭐 이렇게 구려..", "아무래도 안되겠다. 다시 만들어라.." 등등의 표현 환영합니다~! 하하.. 하.. v_v''

(글꼴은 Corbel 과 Greg's Hand, HelvCondensedCaps 라는 글꼴을 사용했습니다. )
배너 이미지들과 psd 파일을 함께 압축해서 올려둡니다. 공모전에서 벌써 수상한것도 아니고, 벌써부터 배포할 이유는 없는것 같긴 하지만.. 다른분들이 이렇게 하셨길레... 테스트 삼아 제 블로그에 한번 달아 놓도록 하겠어요. 낄낄..

 

Monochrome Skin for TT 1.1 [Ver1.2]

Monochrome 스킨이 1.2 버젼으로 업데이트 되었습니다.

1.1용 스킨 ver 1.1 에서 달라진점
  1. body ID 기능을 사용해 탭 네비게이션에 현재탭을 표시합니다. (이 기능은 nezene님의 이 스킨에서 배워 왔습니다.)
  2. body ID 기능을 사용해 방명록 부분에 사이드바를 출력하지 않습니다. (방명록에 출력될 리스트 갯수를 작게 잡아주시면, 짜리몽땅한 귀여운 모습이 될지도 모릅니다. ;_; )
  3. 사이드바의 가로 크기를 늘려도, 레이아웃이 망가지지 않습니다.

User inserted image



사이드바의 가로 크기를 늘리고 싶으신분들이 계신것 같아서 간단히 수정했습니다. 사이드바의 가로 크기를 늘리는 방법은 다음과 같습니다. :)

딱 세군데의 width 값만 변경하시면 됩니다.


기타 바디 아이디에 관련한 css 들은 style.css 파일 제일 하단부에 추가 되었습니다. 다른 페이지에서도 응용할수 있어요~!

아무튼, 요즘에는 예쁜 스킨들이 너무 많이 나와서...
인기없는 스킨을 업데이트 하는것이 의미가 있는지 모르겠습니다. ;_;

 

Monochrome Skin for TT 1.1 [Ver1.1]

MonochromePreview

Monochrome 스킨이 1.2 버젼으로 업데이트 되었습니다.
2006. 11. 28
http://hi8ar.net/279




태터툴즈 1.1 사용자를 위한, Monochrome 스킨을 공개/배포합니다.

기존의 1.0.6을 위한 스킨과 모양상 달라진 점은 없습니다.

1.0.6 스킨에서 달라진점.

  1. 태터툴즈 1.1에 맞도록 제작되었습니다.
  2. 소스가 나름대로 깔끔(?)해 졌습니다.(하지만 아직도 불필요한 부분이 많을수 있습니다.)
  3. 키워드 기능을 사용할수 있습니다.
  4. 스킨관련 메뉴의 사이드바 설정 기능을 지원합니다.
  5. More/Less와 3개의 그림정렬부분등 몇몇부분에 대한 Class를 추가했습니다.
  6. 관리자 댓글, 방문자 댓글, 비밀 댓글에 대한 고유의 Class를 추가했습니다.
  7. 댓글의 갯수와 관련해서, 단 복수 형을 구분합니다.
  8. 포스팅 제목 부분의 글꼴을 Verdana 에서 Lucida Grande로 변경했습니다. (Lucida Grande 가 없는 시스템에서는 Trebuchet MS 글꼴으로 나올것입니다.)
  9. body id 기능을 이용할 수 있습니다. 하지만 현재, 특별히 적용된 부분은 없습니다.
이전 배포했던 1.0.6 스킨과 같이, 검정색빨강색 두가지 컬러셋이며, 대부분의 브라우져에서 이용하실수 있습니다. (Safari의 경우 대략적인 레이아웃만 확인했습니다.) 또한 제작자와 제작자의 배너를 삭제하지 않는 범위 내에서 자유롭게 수정하실 수 있습니다. 하지만, 전반적인 수정으로 스킨의 모양이 원본과 많이 달라졌다고 생각되신 다면 제작자 부분 역시 삭제 하셔도 좋습니다.. :)

이 스킨은 대부분의 코드 내용은 태터툴즈 기본 한글스킨(Xhtml, Tattertools_skyline_ko)을 바탕으로 합니다.
(기본 스킨에 포함된 댓글 아이콘들을 많이 빌려왔습니다....)

이 밖에 활용할수 있는 부분등, 대부분의 내용은 이전에 공개한 1.0.6 스킨과 동일합니다.
이전 스킨 공개글을 참고해 주세요. :)

질문이나 오류에 대한 신고는 댓글로 부탁드립니다.
스킨을 사용하시게 된다면, 간단한 트랙백이라도 하나 남겨 주시면 어떨까요?.... :D


내려받기(Download)
태터툴즈 스킨 게시판으로 링크합니다.

Monochrome 스킨이 1.2 버젼으로 업데이트 되었습니다.
2006. 11. 28
http://hi8ar.net/279


SweetTitle 스크립트에 대해서..



사실 더 일찍 공개 할 수도 있었지만, 괜히 늦장을 부리게 됐습니다...^^;;
이것 저것 일들에 치여, 제대로 손에 잡히는 일이 없네요. 마침맞게 내 놓는다고 했었는데, 조금 늦은것 같기도 하고.....많은 분들이 사용하시진 않겠죠?

아무쪼록 멋진 블로그 만드시길 바랍니다... :D

 

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 에서 지정한 여백이 맞게 적용됩니다.



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

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

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

Cutie_Square for foo_title.

Foobar 2k V0.9 의 foo_title 컴포넌트 스킨입니다.
커버 이미지는 음악화일과 함께 folder.jpg 혹은 png 의 형태로 있어야 합니다.
폰트는 Greg's Hand 체를 사용했습니다.(폰트는 포함되어 있습니다.)
 

DarkBlue FCS for Foobar2k v0.9.

DarkBlue FCS Preview


두가지 타입의 FCS가 들어있습니다. 적용된 폰트는 Franklin Gothic Medium 입니다.
Foobar v0.9에만 적용됩니다.


TAG , ,
 

hi8ar Custom CSS for Firefox Sage.

불여우(Firefox)의 RSS 리더 확장인 Sage에서 사용가능한 사용자 지정 CSS 입니다.

심심해서..
올리버네님의 Sage용 사용자 지정 CSS를 수정해 봤습니다. (저작권에 As you wish.. 라길레..) 물론 지극히 본인의 취향에 맞도록....

본인의 취향이란? +_+''
  1. 작은 모니터에 큰 해상도를 사용하다보니, 왠만하면 큰 글자.

  2. 최대한 내 눈에만 편안한 색상.

  3. 한눈에도 알아볼수 있는 링크의 색상.


그러니까.. 그저 크기와 색상을 변경한것에 지나지 않습니다.

그 밖에.. 원본과 같이 감쳐진 태그를 보여주고, 원본과 달리 Embed 태그를 모두 나오게 하였습니다. (Embed 부분은 주석으로 가려만 두었습니다.)
모든 링크에 방문했던 기록이 표시되도록 수정했습니다.
(방문한 기록이 있는 페이지는 제목 우측에.. Visited 가, 새글일 경우 New article 이 표시됩니다.)

간단한 미리보기..




 

White Box Skin for foo_title.



  • foobar2000 v0.9foo_title component가 필요합니다.

  • 반드시 동봉되어 있는 폰트를 설치하셔야, 프리뷰의 글꼴 모습으로 나옵니다.

  • 개인적인 수정만 가능하며, 재배포 하실수 없습니다.