SAVE THE DEVELOPERS <!> Upgrade IE 6 Now!

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

«   2024/05   »
      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  

표지 style.css for whiteBoard

스킨 공개한지 2주 정도 지났습니다. 부족하고, 보잘껏 없는 스킨에 많은 분들의 관심과 칭찬(?)에 몸둘바를 모르겠습니다. 이 바닥에서는 이름만 말해도 알만한 유명 블로그에 걸리기도 하고.. 스킨이 저보다 더 출세했습니다. :) 사실 공개할때만 해도, 제 취향에나 맞지, 다른 분들 보시기엔 별 볼일 없을 거라 생각했었습니다. 그런데, 세상엔 제 취향과 비슷하신 분들도 알게 모르게 많은가 봅니다! (__)

아무튼, 텍스트큐브의 플러그인 중 하나인 커버페이지 혹은 표지(MT_Meta_RecentPS_Default) 플러그인 에서 사용하는 스타일시트를 간단히 만들어 봤습니다. (예정 업데이트에 적어 두었던 걸 하게 될 줄은 며느리도 몰랐는데~)

모든 블로그의 최근글 보기 플러그인

텍스트큐브 플러그인계의 대부 J.Parker 님의 '모든 블로그의 최근 글 보기' 플러그인 입니다. (아~ 이름이 참 길군요. 앞으로는 그냥 '표지' 라고 하지요.) 암튼, 텍스트큐브 확장패키지를 설치하신 분이라면, 기본으로 포함되어 있는 플러그인 입니다. 표지 플러그인을 활성화 하시고, 환경설정하고, 꾸미기 - 위젯 - 표지 위젯 에서 표지에 나타낼 것들을 설정합니다.

표지를 첫 페이지로 설정 체크

표지로의 접근은 http://블로그 주소/cover 입니다. 따로 접근할 링크를 만들어 두시거나, 표지 위젯 설정에서 표지를 블로그의 첫 화면으로 설정합니다 에 체크하면 블로그의 첫 페이지가 표지가 됩니다.

표지에서 사용할 수 있는 위젯을 제공하는 플러그인들은 텍스트큐브 표지 플러그인 페이지에서.. :)

whiteBoard coverPage style.css

표지 플러그인에서 다른 건 하나도 수정하지 않았습니다. 아마 하라고 해도 못할 겁니다. :)

포함된 파일은 두개세개로..

  • style.css 는 텍스트 큐브가 설치된 폴더/plugins/MT_Meta_RecentPS_Default 에 덮어 씌우시고.
  • tag.gif 이미지는 위 플러그인 이미지 폴더에 넣어 주시면 옥헤이~
  • 누락되었던 bg_coverPost.gif를 추가해서 다시 올려둡니다. tag.gif 와 함께 플러그인 이미지 폴더에 넣어주시면 됩니다.

약간 특별한 기능

CSS만을 이용해서 부린 약간의 기교(?)입니다. :) 이미 읽었던(방문했던) 기록이 있는 글은 회색 제목+visited 표시, 아직 읽은 적이 없는 글은 검정색 제목 + 노란 NEW 표시로 나타냅니다.

visited 와 new 예시 그림

visited 와 new 예시 그림

그저 a:link 와 a:visited 의 스타일을 다르게 적용한 것 뿐입니다. 때문에 사용하시는 브라우저의 캐시 정보에 따라 new 가 될 수도 visited 가 될 수도 있습니다. 브라우저 캐쉬를 모두 삭제하면 모두 new 가 되버리는 거죠.. :)

.coverpost h2 a:after {
    font-size: 10px;
    letter-spacing: 0;
    color: #fc0;
    content: " - NEW."; /* IE의 경우 IE8부터 이해 가능 */
}
.coverpost h2 a:visited:after {
    font-size: 10px;
    letter-spacing: 0;
    color: #888;
    content: " - Visited."; /* IE의 경우 IE8부터 이해 가능 */
}

물론 이것은 :after 라는 유사 클래스pseudo-classescontent: 라는 프로퍼티를 이해하지 못하는 못난이 브라우저(IE6 ~ IE7) 에서는 지원되지 않습니다. :(

기타

  • IE6 에서는... 모양은 똑같습니다. :)
  • 커버페이지에 넣을 수 있는 것들 중 오직 본문 글에 관한 디자인만 되어 있습니다. 다른 것들에 대한 디자인은 차차 생각해 보겠습니다만, 전 표지 페이지를 별로 좋아하지 않습니다.. :)

예제 페이지는 여기서 보실수 있습니다.

해마다 찾아오는 감기님이 또 찾아 오시려나 봅니다. "안녕~ 감기야~ 왔구나, 안 오는줄 알고 서운했잖아~" :)

 

whiteBoard for Textcube

Textcube를 위한 whiteBoard 스킨을 공개합니다.

whiteboard 스킨의 PREVIEW

whiteBoard v2.0

쵸썰렁한 하얀 보드에 대문짝만하게 낙서하는 기분으로 사용하시면 좋습니다. :) 아름다운 낙서를 위해 다양한 색상의 마커펜을 제공.. 훗~ 처음에 생각했던 깔끔한 시안 이미지는 안드로메다로~ 이것은 완전 난장 분위기~

History

  1. 2008.10.30 whiteBoard v1.0 공개
  2. 2008.10.31 whiteBoard v1.1 업데이트 - IE6 : 레이아웃보다 작은 크기의 창 사이즈일때 검색폼 배경 잘리는 문제 수정. http://hi8ar.net/entry/whiteBoard-for-Textcube#comment18650
  3. 2008.11.1 whiteBoard v1.1 for 티스토리 공개
  4. 2008.11.2 whiteBoard v1.1 for 티스토리 업데이트 - 사이드바의 링크가 출력되지 않는 문제 수정.
  5. 2008.11.8 whiteBoard v2.0 / whiteBoard v2.0 for 티스토리 공개 - 작은 가로 해상도(1024px) 에서도 무리 없이 사용 할 수 있도록 수정.
  6. 2008.12.7 티스토리 버젼에서 페이지 타이틀 치환자 오류 수정

2.0 버젼에서 달라진 점

  • 변경된 파일 : index.xml, skin.html, layout.css, main.css, screen_ie6.css, preview.gif
  • 가로 해상도 1024px 에서도 한 화면에 가로 스크롤바 없이 출력, 그보다 큰 해상도에서는 가운데 정렬하도록 수정.
  • 사이드바 리스트 박스 클래스를 sidebarListBox 에서 listbox 로 수정. (사용자 편의를 위해, 플러그인 등에서 만드는 리스트 코드를 수정하지 않도록, 기본 스킨과 동일한 클래스명으로 수정했습니다.)
  • 방명록 textarea에서 IE6의 경우, hover 효과가 나타나지 않던 문제 수정.
  • 본문 h3 Heading, 1px solid #ddd 밑줄 추가.
  • 사이드바에 200px 이상 되는 element를 추가해도 사이드바가 떨어지지 않도록 수정.
  • 불필요해진 IE_hack 제거.
  • 티스토리 버젼의 경우, IE에서 검색폼 동작하지 않던 문제 수정.
  • 그리고.. 기타 등등.. :)

텍스트큐브 적용 방법

  1. 텍스트큐브용 whiteBoard 스킨을 다운받습니다. 다운 받은 zip 파일의 압축을 풉니다.
  2. 자신의 계정, 텍스트큐브 스킨 폴더에 FTP 등을 이용해서 폴더 그대로 업로드 합니다.
  3. 텍스트큐브 관리자 페이지, 꾸미기 - 스킨선택 에서 적용합니다.
  4. 스킨 상세 설정에서 자신의 블로그에 맞게 설정합니다.
  5. 참 쉽죠? :)

티스토리 적용 방법

  1. 티스토리용 whiteBoard 스킨을 다운받습니다. 다운 받은 zip 파일의 압축을 풉니다.
  2. 티스토리 관리자 - 스킨선택 에서 업로드 합니다. (폴더는 구분해서 압축해 놓았지만, 어짜피 티스토리 스킨 업로드 기능이 알아서 업로드 해줍니다. 아무렇게나 몽땅 업로드 합니다.)
  3. 새 스킨으로 저장된 whiteBoard 를 적용합니다.
  4. 끝~

whiteBoard 스킨 정보

  • 본문 : 620px
  • 사이드바 : 200px
  • 이미지 리사이징 : 600px (index.xml)
  • 모니터 해상도가 가로크기 1280px 이상이 되어야 보기 좋지만, 1024px 에서도 잘 나옵니다.
  • 기본 글꼴 : 이 스킨은 네이버에서 배포하는 나눔고딕 글꼴을 기본으로 사용합니다. (font-family: NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", "Lucida Grande", "Segoe UI", Arial, AppleGothic, Sans-serif; )
  • 텍스트 큐브 1.7.6 버젼에서 테스트 했습니다. 달력을 제외한 대부분의 텍스트 큐브 최신(?) 기능을 지원합니다.
  • 텍스트 큐브 1.7.5 이하 버젼에서 사용시, bodyID 한 곳을 수정하셔야 합니다. main.css 28라인
/* ####### body ID 를 이용한 현재 페이지 표시 ####### */
body#tt-body-pages #navMeta a { background-position: 0 -40px; }

위 코드 부분에서 body#tt-body-pages 를 body#tt-body-page 로 수정하셔야 블로그 처음 페이지 일때 home 탭이 활성화 되어 현재 페이지로 표시 됩니다. 이는 텍스트큐브 1.7.6 에서 notice 를 대신할 수 있는 page 기능이 강화 되면서, 기본 페이지의 body ID 가 변경되었기 때문입니다.

whiteBoard 스킨 특징

  • XHTML 1.0 Transitional
  • CSS 2.1
  • 웹표준 준수, Firefox 3.0, Safari 3.1, Opera 9.5, IE 6.0 ~ 7.0, GoogleChrome 크로스 브라우징.
  • 영역별 css 분리 코딩.
  • 쉬운 사용자 컬러 테마 변경. :)
  • IE를 위한 css hack 분리.
  • 과도하게 남발한(?) 주석 :)
  • print.css 와 wysiwyg.css 포함.
  • 나눔고딕 글꼴이 설치되지 않은 시스템에서 볼때엔 상당히 구림.. =_='

저작권

  • 공개된 리소스를 제외한 대부분의 권리는 hi8ar.net에 있습니다.
  • 영리/상업적 이용을 하실 수 없습니다.
  • 광고만을 위한 스팸 블로그에선 사용하실 수 없습니다.
  • 개인적인 이용시 자유롭게 수정이 가능합니다. 다만 수정시 원 제작자를 표시하여야 합니다.
  • 특별한 경우가 아닌 이상 다음 링크의 라이센스에 따릅니다. :) http://creativecommons.org/licenses/by-nc-sa/2.0/kr/

사용자 Customizing

컬러 테마 theme.css

css에서 스킨의 기본 색상을 따로 분리해서 하나의 문서에 담았습니다. (과장 쵸큼 보태서..) 아아아~ 카멜레온 처럼 변하는 당신의 블로그는 일곱 빛깔 무지개~~ 훗, 워낙에 배경이 허멀건한 것밖에 없다 보니, 색상 하나만 바꿔도 새로운 분위기~ :) 좋아하는 색상의 마커펜을 사용한다는 기분으로~

  1. theme.css 를 사용하는 텍스트 에디터로 엽니다.
  2. 배포되는 theme.css 에 지정되어 있는 기본 컬러는 1번, 빛바랜 빨강색 마커펜 #966 입니다.
  3. 사용하는 에디터의 찾기/바꾸기 기능을 이용해서, 좋아하는 색상의 컬러값으로 바꿔 줍니다.
  4. 수정한 theme.css 를 다시 업로드 하셔서 덮어쓰시면, ok~
  5. 추천하는 색상. 파스텔 톤의 은은한 색상이 잘 어울립니다.
  6. 아래는 제가 미리 수정해서 올려둔 예제 입니다. 파일명을 theme.css로 수정하시고 css 폴더에 덮어 쓰시면 됩니다. 싫증이 났거나, 분위기 변화를 주고 싶을때 언제든 교체해 보세요~!

샘플 예제 중후하고 멋스러운 빛바랜 빨강색 마커펜 #966 대자연의 싱그러움을 느끼고 싶어 초록색 마커펜 #996 똘끼 충만 보라색 마커펜 #969 재래식 화장실에 대한 그리움 변색 마커펜 #630 진정한 남자라면 역시 핫핑크 마커펜 #ff0099 시험지의 빨간비 어젯밤에 새로산 빨강색 마커펜 #c33 할머니 손가락의 옥반지색 마커펜 #699

후~ 괜히 무지개 얘기해서....;;;;

IE6 의 경우 컬러테마에서 변경되지 않는 부분이 있습니다. 자세한 사항은 style_ie6.css 에서 확인 하실수 있습니다._M#]

액세서리

사이드바 250px 변신 킷. :)

250px 변신 킷에 사이드바 왼쪽 padding 값을 잘못 적는 실수가 있었습니다. 11.10 17:30 이전에 받으신 분들을 새로 받아 주세요.. =_=' 아 한번에 깔끔하게 되는 일이 없군요...;;

사실 킷이라 말하기 뭐하게 파일 딸랑 하나.. 스킨을 설치한 폴더/css/ 에 덮어 씌우면 옥헤이~ 음.. 생각건데 왼쪽 본문 영역 padding 50px 까지 잘라낸다면 (가로해상도 1024px에서) 사이드바는 300px 까지 가능. 본문과 사이드바 사이에 여백 하나 없이 딱 붙여도 좋은 사람이라면 320px 까지... :) 1024px 따위 "지옥에나 가버려~" 라면 사이드바는 당신이 원하는 만큼~ 사족... 본문은 이미지 배경 때문에 쉽게 줄이거나 늘릴 수 없어요~ =_=''

페이징 대체 이미지

alter_paging

이미지 폴더에 덮어 씌우면 됩니다. 어처구니 없게도... 사실 이것이 원래 디자인 이었습니다. =_=' 근데 좀 안 어울려서 중간에 퇴출~ :p

whiteBoard를 위한 표지(Coverpage) style.css

자세한 내용은 http://hi8ar.net/entry/표지-stylecss-for-whiteBoard 에서 보실수 있습니다.

예정 업데이트

예정 사항입니다. 언제 될지, 정말 하게 될지는 며느리도 모릅니다.. ;)

  • 가로 해상도 1024px 에서도 가로 스크롤바 없는 멋진 모습 되기.
  • 동적 css 적용 스크립트를 이용한 컬러테마 변경.
  • coverpage(MT_Meta_RecentPS_Default 플러그인)용 css.

기타 알림사항

  • whiteBoard 스킨의 본문 스타일은 이글에서 미리 보실 수 있습니다. article.css 에 공통 html 요소들이 디자인되어 있습니다.
  • 나름 여유를 가지고 테스트를 진행 했지만, 얘기치 못한 버그나 에러가 있을 수 있습니다. 댓글로 알려주시면 최대한 빨리 수정하겠습니다.
  • 적용하신 분은 어..... 간단한 사용 소감(?)이라던가.... 음.... 트랙백 같은 거 하나만 부탁 드려요~... 부디.. 그러니까... 제에발.... :p
  • 앞으로의 버그 수정과 업데이트는 지금 보시는 이 글에서 이뤄집니다. 이 글의 "댓글(response) RSS" 를 사용하시는 리더기에 등록해 두시면, 업데이트 정보를 쉽게 보실 수 있습니다.

Download for Textcube

텍스트큐브 스킨 사이트에서 받으실수 있습니다.
DownLoad : http://textcube.org/theme/entry/whiteBoard-for-Textcube

Download for Tistory

 

whiteBoard 스타일 미리보기

본문 스타일 미리보기

가나다라마바사아자차카타파하

텍스트큐브로고

올해 노벨경제학상 수상자로 폴 크루그먼이 선정되었다. 크루그먼은 경제학계에서 노벨상보다 타기 어렵다는 클라크 메달(미국 경제학회가 40세 이하의 최고 경제학자 1명에게 2년에 한 번 수여하는 메달)을 이미 받았으므로 노벨상을 예약해놓은 것과 마찬가지였지만 쉰다섯살의 수상은 예상보다 이르다. 그의 수상에는 금융위기라는 환경도 작용한 것으로 보인다. 최근 미국발 금융위기는 과도한 시장만능주의가 빚은 참사이니 만큼 시장만능주의에 대해 줄기차게 비판해온 크루그먼의 공로가 돋보일 수밖에 없다.

크루그먼 교수는 모건 스탠리 통화 수석 이코노미스트로 일하는 스티븐 젠의 말을 인용, "신흥시장은 커다란 위기에 봉착해 있으며, 미국의 금융시장이 제1차 진앙지라면, 신흥시장의 '경착륙'이 '제2차 진앙지'가 될 가능성이 있다"고 전했다.

그는 글로벌 금융위기의 1차 진앙지인 미국 정부의 정책을 '정부 개입을 혐오하는 부시 행정부의 이데올로기로 핵심을 놓치고 있다"고 맹비판한 뒤 "어떤 이유로 결함투성이의 정책이 계속되고 있는지는 차지하고, 상황은 통제되고 있지 못한 것이 분명하다. 사태가 악화되고 있다"고 비관했다.

크루그먼 교수가 특히 개탄하는 미국 정부 정책의 허점으로 크게 두 가지 사례를 들었다. 헨리 폴슨 미 재무장관은 뒤늦게나마 은행을 부분 국유화하는 자본 투입 방안에 동의했지만, 이 방안을 주도한 영국 정부와는 달리 이 자금을 은행이 대출하는 데 쓰도록 하는 조건을 달지 않았다. 이로 인해 미국의 은행들은 정부의 구제금융을 그대로 끌어안는 경향을 보이고 있다는 것이다.

텍스트큐브로고

올해 노벨경제학상 수상자로 폴 크루그먼이 선정되었다. 크루그먼은 경제학계에서 노벨상보다 타기 어렵다는 클라크 메달(미국 경제학회가 40세 이하의 최고 경제학자 1명에게 2년에 한 번 수여하는 메달)을 이미 받았으므로 노벨상을 예약해놓은 것과 마찬가지였지만 쉰다섯살의 수상은 예상보다 이르다. 그의 수상에는 금융위기라는 환경도 작용한 것으로 보인다. 최근 미국발 금융위기는 과도한 시장만능주의가 빚은 참사이니 만큼 시장만능주의에 대해 줄기차게 비판해온 크루그먼의 공로가 돋보일 수밖에 없다.

크루그먼 교수는 모건 스탠리 통화 수석 이코노미스트로 일하는 스티븐 젠의 말을 인용, "신흥시장은 커다란 위기에 봉착해 있으며, 미국의 금융시장이 제1차 진앙지라면, 신흥시장의 '경착륙'이 '제2차 진앙지'가 될 가능성이 있다"고 전했다.

그는 글로벌 금융위기의 1차 진앙지인 미국 정부의 정책을 '정부 개입을 혐오하는 부시 행정부의 이데올로기로 핵심을 놓치고 있다"고 맹비판한 뒤 "어떤 이유로 결함투성이의 정책이 계속되고 있는지는 차지하고, 상황은 통제되고 있지 못한 것이 분명하다. 사태가 악화되고 있다"고 비관했다.

크루그먼 교수가 특히 개탄하는 미국 정부 정책의 허점으로 크게 두 가지 사례를 들었다. 헨리 폴슨 미 재무장관은 뒤늦게나마 은행을 부분 국유화하는 자본 투입 방안에 동의했지만, 이 방안을 주도한 영국 정부와는 달리 이 자금을 은행이 대출하는 데 쓰도록 하는 조건을 달지 않았다. 이로 인해 미국의 은행들은 정부의 구제금융을 그대로 끌어안는 경향을 보이고 있다는 것이다.

Dual Image

이미지테스트모델사진1이미지테스트모델사진2

Triple Image

텍스트큐브로고이미지테스트모델사진1이미지테스트모델사진2

공통 XHTML 요소

A link, acronym, strong text and deleted text.

Code

code-sample {
	font-weight: bold;
	font-style: italic;
}

Example Lists

  1. Here is an example
  2. of an ordered list
  • Here is an example
  • of an unordered list
Definition title
Definition description
Definition title
Definition description

Blockquote

Before marriage, a man will lie awake all night thinking about something you said ; after marriage, he'll fall asleep before toy finish saying it.

- H. Rowland

Headers

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Tabular Data

post date title description
2008.10.26 햄버거 군 한개에 십원.
2008.10.26 피자 양 날 먹으면 내일 아침 얼굴이 뽀송뽀송. 몸두개는 불어불어 두배두배 그래도 먹을거야?
2008.10.26 맥주+소주 어질어질 삐질삐질 하악하악.
2008.10.26 2차는 노래방? 돈은 네가 내. 음치는 사절.

More/Less

열려라 참깨..


 

텍스트큐브 관리자 스킨 만들기


처음엔 그저 관리자 화면에서 맑은 고딕 글꼴을 보기 위해 건드렸습니다. 뭔가 대단한 작품을 만들어 보려다, 열심히 해봐야 누가 돈 주는 것도 아니어서, 아무도 알아주지 않을 것 같아서, 사실 좀 귀찮아서, 그냥 이미지 몇개, 아이콘 몇개 바꿔 봤습니다. 역시 하고 나니 뻘짓... 부디 나 말고 다른 분이 멋진 것을 만들어 주시길 바라는 마음에서 이렇게 공개합니다. :)


사용법은 이렇습니다.
  1. 다운 받으신 후 압축을 해제하고, FTP를 이용해 텍스트큐브가 설치된 계정, /style/admin/ 주소 아래 업로드 합니다.
  2. 관리자 페이지, 환경설정 - 블로그 에서 아래와 같이 선택한 후 저장합니다.
    User image
  3. 끝~

주의
  • 기존의 관리자 스킨에 아주아주 굉장히 질리신 분이 아니라면 안(?) 쓰시는 게 좋습니다!
  • 원본은 Needlworks 의 Swallow (1.5 기본 관리자 스킨) 입니다!
  • 텍스트큐브(Textcube) 1.6.3 버젼 말고는 전혀 테스트 하지 않았습니다!
  • 관리자 페이지가 모두 맑은 고딕 글꼴로 변신합니다!
  • 혼자 쓰려고 만들었던 거라 파이어폭스 외의 브라우져에선 어떻게 보이는지 전혀 관심 없습니다!
  • 오류나 버그가 있다고 알려주셔도 고치거나 하지는 않을 것으로 예상됩니다!
  • 마지막으로.. 1.7 버젼이 곧 출시 될것으로 예상 되므로, 이것의 수명은 꽤나 짧을 것 같습니다! :)


 

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 로 늘릴수 있습니다.

 

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



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

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

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

Charcoal Soot TT Blog Skin Release.

스킨 미리보기를 위해 들리신분들께는 죄송합니다.
원래 사용하던 스킨으로 돌려 놓습니다. 미리보기는 아래의 스크린샷으로 대신합니다.. (__) (06.06.11)


으아...
처음해보는 짓이라, 엉망이지만.. 나름 느낌이 있어(?) 태터툴즈 스킨을 공개해 보려고 합니다.

하이바네 ver.숯검댕이
태터툴즈 홈페이지 스킨 다운로드에서 배포합니다...

블로그 스킨 스크린샷으로 미리보기

<strong>전체적인 레이아웃</strong>




간단한 Spec(?)
배경 색상 코드 : #333
링크 색상 코드 : #95A566
링크 마우스 hover시 색상 코드 : #73804E
본문 글자 색상 코드 : #F0F0F0
본문 넓이 : 600px
적용된 영문 폰트 : Arial, Trebuchet MS, Verdana, Georgia (모두 윈도 기본 폰트라 적용에 큰 무리는 없을것 같습니다.)


태터 버젼 1.05 에서 만들어졌습니다. 다른 버젼에서도 별 문제는 없을거라 생각합니다.

사용하실분이 있을런지 모르겠지만, 어두운 스킨을 좋아하시는분, 사진을 많이 올리시는 분들이 사용하시면 좋을것 같습니다. :) 질문은 괜찮습니다만, 제가 아는게 별로 없어 답변을 해 드릴수 있을지 모르겠네요.

이 블로그는 혹시라도 스킨 구경하러 오시는 분들을 위해 몇일 정도만 이 스킨으로 유지하겠습니다.
아무쪼록 멋진 블로그 만드시는데 도움이 되었음 좋겠습니다. :)