Textcube를 위한 whiteBoard 스킨을 공개합니다.
whiteBoard v2.0
쵸썰렁한 하얀 보드에 대문짝만하게 낙서하는 기분으로 사용하시면 좋습니다. :) 아름다운 낙서를 위해 다양한 색상의 마커펜을 제공.. 훗~ 처음에 생각했던 깔끔한 시안 이미지는 안드로메다로~ 이것은 완전 난장 분위기~
History
- 2008.10.30 whiteBoard v1.0 공개
- 2008.10.31 whiteBoard v1.1 업데이트 - IE6 : 레이아웃보다 작은 크기의 창 사이즈일때 검색폼 배경 잘리는 문제 수정. http://hi8ar.net/entry/whiteboard-for-t ··· ent18650
- 2008.11.1 whiteBoard v1.1 for 티스토리 공개
- 2008.11.2 whiteBoard v1.1 for 티스토리 업데이트 - 사이드바의 링크가 출력되지 않는 문제 수정.
- 2008.11.8 whiteBoard v2.0 / whiteBoard v2.0 for 티스토리 공개 - 작은 가로 해상도(1024px) 에서도 무리 없이 사용 할 수 있도록 수정.
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에서 검색폼 동작하지 않던 문제 수정.
- 그리고.. 기타 등등.. :)
텍스트큐브 적용 방법
- 텍스트큐브용 whiteBoard 스킨을 다운받습니다. 다운 받은 zip 파일의 압축을 풉니다.
- 자신의 계정, 텍스트큐브 스킨 폴더에 FTP 등을 이용해서 폴더 그대로 업로드 합니다.
- 텍스트큐브 관리자 페이지, 꾸미기 - 스킨선택 에서 적용합니다.
- 스킨 상세 설정에서 자신의 블로그에 맞게 설정합니다.
- 참 쉽죠? :)
티스토리 적용 방법
- 티스토리용 whiteBoard 스킨을 다운받습니다. 다운 받은 zip 파일의 압축을 풉니다.
- 티스토리 관리자 - 스킨선택 에서 업로드 합니다. (폴더는 구분해서 압축해 놓았지만, 어짜피 티스토리 스킨 업로드 기능이 알아서 업로드 해줍니다. 아무렇게나 몽땅 업로드 합니다.)
- 새 스킨으로 저장된 whiteBoard 를 적용합니다.
- 끝~
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에서 스킨의 기본 색상을 따로 분리해서 하나의 문서에 담았습니다. (과장 쵸큼 보태서..) 아아아~ 카멜레온 처럼 변하는 당신의 블로그는 일곱 빛깔 무지개~~ 훗, 워낙에 배경이 허멀건한 것밖에 없다 보니, 색상 하나만 바꿔도 새로운 분위기~ :) 좋아하는 색상의 마커펜을 사용한다는 기분으로~
- theme.css 를 사용하는 텍스트 에디터로 엽니다.
- 배포되는 theme.css 에 지정되어 있는 기본 컬러는 1번, 빛바랜 빨강색 마커펜 #966 입니다.
- 사용하는 에디터의 찾기/바꾸기 기능을 이용해서, 좋아하는 색상의 컬러값으로 바꿔 줍니다.
- 수정한 theme.css 를 다시 업로드 하셔서 덮어쓰시면, ok~
- 추천하는 색상. 파스텔 톤의 은은한 색상이 잘 어울립니다.
- 아래는 제가 미리 수정해서 올려둔 예제 입니다. 파일명을 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 따위 "지옥에나 가버려~" 라면 사이드바는 당신이 원하는 만큼~ 사족... 본문은 이미지 배경 때문에 쉽게 줄이거나 늘릴 수 없어요~ =_=''
페이징 대체 이미지

이미지 폴더에 덮어 씌우면 됩니다. 어처구니 없게도... 사실 이것이 원래 디자인 이었습니다. =_=' 근데 좀 안 어울려서 중간에 퇴출~ :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
DownLoad : http://www.tistory.com/forum/viewtopic.php?id=3091
Comments
Go to write form예쁘셈..ㅋㅋㅋ 이런 걸 늘상 내놓는 님하가 케부럽셈효...
케케케케.. 부럽삼? :)
스킨 완전 멋집니다! ^^;
그런데 창 사이즈를 줄이면 검색칸쪽 배경이 덜 나와서 조금 어긋나네요(IE6)
감사합니다~! ^^ 아 정말 그렇더군요. 알려주셔서 감사합니다~! 생각했던 대로 되지 않아 IE6 은 포기해 버릴까 했습니다만, 쵸큼 억지로.... 그러니까, 완벽하진 않지만, 그래도 조금 더 보기 좋도록 수정했습니다. :)
글꼴이 큼직한게 마음에드네요 멋집니다 ^^;
고맙습니다..^^; 마음 같아선 지금 보다 두배 정도 더 크게 하고픈뎅.. :)
관리자만 볼 수 있는 댓글입니다.
음.. 딱히 안 보일만한 이유가 없는 것 같습니다. 아마도 업로드시 이미지 파일이나 css 파일이 제대로 올라가지 않았거나, 일시적인 서버 장애가 아니었을까요? 스킨 파일을 다시 업로드해 보시거나, 올려진 파일들의 사이즈가 0byte가 아닌지 확인해 보시면 해결될 것 같습니다. :)
워워~ 멋지셈~!
맨날 언제 공개하나 숨어서 째리고....+ㅁ+;; ㅋ
뽀려가겠사옵니다~
뭐, 돈주고 파는 것도 아닌데, 뽀려가실 것 까지야.. 그냥 대놓고 가져가세요~ :)
스킨 깔끔하고 이쁘네요^-^//
잘 쓸게요~ 고맙습니다.
감사합니다. 다른분 블로그에 적용된건 첨 봐요~ ㅠㅠ;
아마도 이스킨을 사용하시게된 첫번째 분이 아니실런지.. :)
whiteBoard 스킨이 v1.1 로 업데이트 되었습니다.
-----------------------------------------------------------------
하루만에 이런 변이 생겼습니다. 죄송해요~ =_='
- 업데이트 내용 : IE6: 브라우저 창 크기를 레이아웃보다 작게 했을때, 상단 검색폼 배경 잘리는 문제 수정.
- 수정된 파일 : layout.css , screen_ie6.css
- 새로 받아서 적용해 주세요. 모두 재업로드 하시거나, 이미 변경하신 부분이 있으신 분은 위 수정된 파일 두개만 새로 업로드 하셔도 됩니다.
관리자만 볼 수 있는 댓글입니다.
음.. 그렇군요. 사이드바의 리스트 제목을 클릭해서 열고 닫고 하는 것은 그리 어려운 건 아닙니다만, 아래 내용 없이 큰 글자의 제목만 덩그러니 나열되는 것은 썩 보기 좋을 것 같지 않습니다. :) 사실 제가 별로 좋아하지 않는 방법이기도 합니다. 아무튼 참고 하겠습니다.
기본적인 사이드바 요소들은 항상 노출시키고, 링크 같은 덜 중요한 요소들은 감출수 있게 하는 것도 나쁘진 않겠네요. 연구해 보겠습니다. :)
워.. 오랜만에 스킨 공개하셨군요.. 언젠가 하이바님 스킨 한번 써보고 싶었는데..
텍스트큐브 쓰게되면 적용시켜봐야겠어요.. 멋찝니다.. :)
네.. 정말 오랜만이에요. 확실히 공개를 맘에 두고 작업을 하면, 신경 써야 할게 많아서 힘들긴 한데, 나온 결과물은 한결 낫긴 합니다. :)
이런거 시간 들여서 하시는 거 보면 정말 대단하다는 생각밖에 안드네요.
여간 까다로운 작업이 아닐텐데 말이죠.
노고에 박수를 보냅니다. 짝짝짝~
사실, 까다롭긴 하지만 익숙해 지면, 그냥 저냥 나도 모르게 쑴풍쑴풍 되버리지요. :) 이번에 나름 신경 써서, skin.html을 작성했으니, 앞으로는 css만 바꿔가면서.. 다산의 꿈을..... ㅎㅎ;
항상 감사합니다. :)
안녕하세요. 공개해주신 스킨을 잘 사용하고 있습니다.
다만 원하는대로 안되는 것이 있어 문의차 왔습니다.
현재 카테고리가 펼쳐진 상태로 나오는 데요.
카테고리가 안 펼쳐진 상태로 할 수는 없을까요?
그리고, 비공개로 설정한 카테고리도 그냥 나오던데요. 이것도 안나오게 할 수 없을까요?
수고스럽겠지만 부탁드리겠습니다.
텍스트큐브에서는 두가지의 카테고리 리스트 치환자를 제공합니다.
하나는 리스트의 의미에 맞는 <ul> 안에 <li> 로 만들어지는 리스트형 카테고리([ ##_category_list_## ])이고, 다른 하나는 <table> 을 이용한 카테고리([ ##_category_## ]) 입니다.
리스트형 카테고리에서 비공개로 설정한 카테고리가 출력되는지는 몰랐습니다. 뭐 이정도라면 텍스트큐브 포럼에 버그신고라도 해야 할지도 모르겠어요. :)
아무튼, 펼쳐졌다 접혔다 하는 카테고리라는건 테이블형 카테고리를 말씀하시는 것 같습니다.
skin.html 에서 아래와 같은 내용을 찾으셔서 수정하시면 됩니다.
--------------------------------------------------------------
<!-- 블로그 카테고리 -->
<div class="categoryNav">
<h3>category</h3>
[##_category_list_##]
<!-- 의미있는 마크업을 위해 [샵샵_category_list_샵샵]를 권장 -->
<!-- 테이블형 카테고리를 사용하는 경우 [샵샵_category_list_샵샵]를 삭제 또는 주석처리하고,
아래 [샵샵_category_샵샵]의 주석 제거 -->
<!-- [샵샵_category_샵샵] -->
</div>
--------------------------------------------------------------
주석의 내용을 보시고 [ ##_category_list_## ] 를 [ ##_category_## ]으로 교체하시면 됩니다. ('#'을 '샵'으로 적어 둔 이유는 텍스트 큐브가 주석을 치환자로 인식하지 않도록 하기 위해서 입니다.)
테이블형 카테고리의 경우, 텍스트큐브 내부에서 코드가 만들어지고, css 적용을 하기 힘들다 보니 whiteBoard 스킨의 리스트 디자인이 담기지 않습니다. 다만 기본적인 css 내용은 sidebar.css에 이미 포함되어 있습니다.
지금 막 든 생각인데.... 좀 복잡한 코딩이 되겠지만, 어쩌면 리스트형 카테고리에서도 숨겨 놓을 수도 있을지도 모르겠네요.. 연구해 보겠습니다. :)
감사합니다. ^^
덧붙여서 몇 말씀만 더 드리자면...
사용하시는 플러그인중 Entry Hits Plugin, Recent Guestbook 등에서 만들어 주는 사이드바 리스트 에도 whiteBoard 의 리스트 디자인을 적용하실수 있습니다.
사용하시는 플러그인 환경 설정을 보시면... (JP님의 플러그인들은 거의 동일)
html 헤더 부분의
<div class="listbox"> 만
<div class="sidebarListBox"> 로 변경해 주시면 됩니다. :)
본문 부분에 "~분류의 다른 글" 보여주는 플러그인은 리스트를 테이블 안에 담아서 보여주는군요. 본문 영역에서 작성되는 테이블은 article.css 에서 테이블 보더(border)를 미리 디자인해 두었기 때문에 모두 article.css 의 스타일에 영향을 받습니다.다른 스킨들 처럼 테이블 boder가 보이지 않게 하시려면, article.css 에서 table 관련 스타일을 모두 삭제 하시면 됩니다. 혹은 <div class="article"> 영역 밖으로 플러그인 치환자를 빼내시거나.... :)
원래는 따로 글로 적어두려고 했던 내용들인데 말 나온 김에 길게 적어 봤습니다. ^^;;;;;;;;
너무 신경쓰진 마세요. :)
고맙습니다...
답변 감사드립니다.
집에 가서 적용해 볼께요. ^^
비록 텍스트큐브는 쓰진 않지만...존경해마지 않습니다. 진심으로...OTL
허허허.. 지나친 칭찬과 감탄으로 부담 잔뜩 주시는 당신은.......
멋쟁이~ 우후훗~
나이샷!!! :)
언젠간 한번 함께 라운딩이라도.... 깔깔... :)
whiteBoard v1.1 for 티스토리 가 공개 되었습니다.
-----------------------------------------------------------------
티스토리 이용자를 위한 whiteBoard 스킨을 티스토리 포럼에서 배포합니다. :)
http://www.tistory.com/forum/viewtopic.php?id=3091
whiteBoard v1.1 for 티스토리 가 업데이트 되었습니다.
-----------------------------------------------------------------
사이드바의 링크가 출력되지 않는 것을 수정했습니다. 더불어 텍스트큐브 스킨 사이트에도 함께 올려두었습니다. :)
정말 고맙습니다. : )
스킨 때문에 고민하고 있었는데, 주저 없이 선택하게 되는군요.
여쭤보고 싶은게 있어서요.
1. 글 제목.
좀 커서요, 어디를 건드려야 줄일수 있는지요?
2. 글 제목과 글 쓴 시각의 동시 블록설정
이건 불가능한가요?
동시에 블록설정이 안되는 것 같아서요.
3. 글 쓴 시각
이것도 볼드체를 풀려면 어디를 수정해야 하는지 알려주시면 고맙겠습니다.
노고에 다시한번 고마움을 전하면서...
민노씨처럼(음.. 그러니까.. 아... 뭐냐하면.. 저기.. 블로그 필명이 왠지 존대하기 힘든 이름이에요. 왠지 어색하게 느껴지는 게 제가 이상한건 아니겠지요? 하.. 하하... 아 무슨 소리를 하고 있는지....) 유명하신 분의 블로그에 제 스킨이 걸리다니 영광입니다. :)
아.. 각설하고..
1. 글제목은 main.css 294째 줄
--------------------------------------------------
.titleBox h2 {
margin-top: 18px;
color: #666;
font: 400 39px "NanumGothic bold","나눔고딕 bold", NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", Arial, Sans-serif;
letter-spacing: -3px;
}
--------------------------------------------------
에서 font 39px 부분을 원하시는 사이즈로 줄여주시면 됩니다.
2. 동시 블록 설정이 무슨 말씀인지 몰라서 머리만 긁적이고 있었는데, 민노씨 블로그의 제 스킨에 관한 글을 읽고 이해 했습니다. :)
글쓴 날짜 부터 시작해서 글 제목까지 함께 블럭이 잡히지 않는 이유는, 모니터상에서 보기에는 '글쓴 날짜'가 '글 제목'보다 위에 있지만, html 문서상에선 '글 제목'이 '글쓴 날짜' 보다 위에 위치하고 있기 때문입니다. 실제로 글 제목부터 마우스로 블럭잡기 시작해서 글쓴날짜까지 블럭 잡으시면 한꺼번에 잡히는걸 보실 수 있을 거에요. ^^;;;
아무래도 글제목이 글쓴 날짜 보다는 중요하다고 생각되서 html 문서상에는 위에 위치시켰습니다. 뭐 그런걸 열심히 고려하는 건 아니지만, 이를테면 구조적인 접근 뭐 그런겁니다요..^^;;;; 그러니까 모니터상에 보일때는 CSS에서 디자인을 위해 날짜를 위로 올린 거죠.
실제로 skin.html 문서를 보시면..
--------------------------------------------------
<div class="entry"> <!-- 본문 시작 -->
<div class="titleBox"> <!-- 제목 상자 -->
<h2><a href="[ ##_article_rep_link_## ]" title="PermaLink :: ">[ ##_article_rep_title_## ]</a></h2>
<div class="articleRepDate">[ ##_article_rep_date_## ]</div>
이하 생략...
--------------------------------------------------
div class="articleRepDate" 와 <h2><a href="[ ##_article_rep_link_## ]" title="PermaLink :: ">[ ##_article_rep_title_## ]</a></h2> 의 순서를 보실 수 있습니다. 함께 블럭을 잡기 위해서 할 수 있는 가장 간단한 방법은 이 둘의 위치를 바꿔 주시는 겁니다. :)
둘의 위치를 바꿔 주시고, CSS 를 살짝 수정해 주시면 훨씬 보기 좋을겁니다.
main.css 303째 줄
--------------------------------------------------
.articleRepDate {
position: absolute;
top: 0;
left: 0;
padding: 2px;
font-size: 18px;
font-weight: bold;
letter-spacing: -2px;
}
--------------------------------------------------
에서 posion:absolute;, top: 0;, left: 0; 을 삭제하시고,
같은 파일 294째 줄..
--------------------------------------------------
.titleBox h2 {
margin-top: 18px;
color: #666;
font: 400 39px "NanumGothic bold","나눔고딕 bold", NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", Arial, Sans-serif;
letter-spacing: -3px;
}
--------------------------------------------------
에서 margin-top: 18px 를 margin-top: -10px 정도로 음수값을 주어서 위로 살짝 붙여 주시면 현재와 비슷한 모양으로 나올 것 같습니다. :) 어쩌면 IE6에서는 음수값 때문에 핵이 필요할지도 모르겠습니다.. 암튼 비슷하게는 나올겁니다요. ^^;;;
3. 날짜의 볼드체를 해제 하려면.. 앞서 2번 답변중 파란 글자로 표시한 부분을 삭제해 주시면 됩니다. :)
그냥 '민노씨'로 불러주시면 됩니다.
'~씨'라는 호칭이 이상하게 하대처럼 들리기도 하지만, 저 나름으로는 꽤나 존중을 담은 호칭으로 생각해서요.
저 개인적으론 그 호칭이 왠지 상호간 동등한 느낌이 드는 호칭이라서 좋아합니다.
그리고, 영광이라뇨, 저야말로 영광이죠.
친절한 설명 정말 진심으로 고맙습니다.
hi8ar님의 친절과 호의는 잊지 않겠습니다.
몇가지만 덧붙여 말씀드리자면..
사이드바를 300px 로 수정하시면서 footerAdmin의 글자가 레이아웃을 뚫고 나간것을 수정하시느라고 text-align: center 로 수정하신 것 같습니다.. ^^;;;
--------------------------------------------------
#footerAdmin {
margin-top: 10px;
padding-right:100px;
text-align: right;
color: #ccc;
}
--------------------------------------------------
사이드바를 100px 늘려 주셨으니까.. padding-right 혹은 margin-right를 100px 정도 주셔서 오른쪽 여백을 잡아 주시면 원래 자리로 돌아 올겁니다. :)
음.. 길게 쓴 김에.. 앗쌀하게~, 별로 중요치 않은 것까지 말씀드리자면...^^;;;;
IE6에서는 min-width를 이해 못해서, 레이아웃 보다 작은 브라우져 크기에서, 가로 스크롤바를 우측으로 스크롤하면 검색폼 옆으로 배경이 생기지 않는 문제가 생깁니다. 이를 해결하기 위해서,
screen_ie6.css 10번째 줄..
--------------------------------------------------
#mainNav ul {
width: 1010px;
padding-right: 2%;
overflow: hidden;
background: #ccc url(../images/bg_mainNav.gif) repeat-x scroll 0 bottom;
}
--------------------------------------------------
width: 1110px; 정도로 수정하시면 땜빵을 떼우실수 있을것 같습니다. :)
대충 파이어폭스에서 firebug를 이용해서 간단히 테스트해 본 거라 틀렸거나 잘못 되었거나, 엉뚱한 소리를 했을런지도 모르겠습니다...하하...;;;;
암튼, 감사합니다.. :D
답글 작성중에 이미 보셨네요..^^
사실 솔직히 말씀드리면, 호칭에 관련한 이야기는 민노씨 블로그에서 이미 본 적이 있습니다. ㅎ 나름 민노씨 블로그 애독자라면 애독자입죠.. 아 조금 뻘쭘하군요.. 냐하하함~~
스킨 넘 이뻐요^^
그런데 사진위에 커서를 올려놓으면 테두리가 검게 변하는데,
이 효과 안나오게 할 수 없을까요?
이미지에 hover 효과는 나름 whiteBoard 만의 내세울 만한 자랑거리~ 말하자면, 킬러 콘텐츠 같은 거랄까~ 뭐 그런 건데... 마음에 안 드신 다면 어쩔 수 없지요...^^;;;
article.css 80째줄..
-----------------------------------------
.article .imageblock img:hover {
background-color: #212121;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
-----------------------------------------
위 부분을 삭제 하시면 됩니다.
정말 쓰고싶은데...몇 가지 제약이 있네요 ㅠㅠ
노트북이 옛날거라 1024*768밖에 지원안하거든요~
거기다 적용했더니 심하게 잘리더라구요 ㄱ-;;
1024*768에 적용할수 있는 방법은 없을까요? 좌우에 여백이 많아서 가능할 것 같긴한데
안되면 아쉽지만 사용이 불가할 것 같아서 이렇게 문의 드립니다 ㅠㅠ
그리구 스킨 너무 이뻐요~ 아직 사용하진 못하지만 멋진 스킨 만들어주셔서 고맙네요~^^
사실.. 가로크기 1024 해상도도 고려해서, 전체 가운데 정렬을 하려고 했었는데.. 배경 이미지 자르면서 쉽게 하려고 하다 보니, 현재는 이모냥이 되었습니다...;;;
아무튼, 배경 이미지를 손대지 않으면서 좌측으로 바짝 붙이는 가장 간단한 방법을 생각해 보면..
layout.css 4째 줄..
------------------------------------------
#wrap {
width: 1134px;
margin-left: -150px; 수정
}
#mainNav {
margin-left: -150px; 추가
height: 60px;
min-width: 1184px;
overflow: hidden;
background: #ccc url(../images/bg_mainNav.gif) repeat-x scroll 0 bottom;
}
------------------------------------------
main.css 34째 줄..
------------------------------------------
#searchForm {
position: absolute;
top: 4px;
left: 784px; 수정
width: 200px;
height: 59px;
background: transparent url(../images/bg_searchForm.gif) no-repeat 0 0;
}
------------------------------------------
왼쪽 마진으로 음수값을 줘서 화면 밖으로 밀어내는겁니다.
후~ 머릿속에서 그리고 firebug 에서만 테스트 해서 제대로 표현되지 않을수도 있습니다.
행운을 빌어요~ ;)
잘 쓰겠습니다. 정말 감사해요 ^ㅡ^
별 말씀을요~ 고맙습니다~! :)
아.....완벽하십니다.....
저렇게 했더니 되네요!!
우와!! 지금 적용했어요 히히히히힛!!!
감사합니다!!^^
아 그리구 질문이 더 있는데요~
1. 요 댓글 입력 창에 Submit아래랑 저~기 더 아래에 prev 1.2.3.4.5 next 아래에 여백이 엄청 큰데요
그거 줄이는 소스는 어디를 손봐야 하는지요~
2. hi8ar님 블로그 보면 trackbacks이랑 comments 옆에~
몇 명이 봤는지 나오는거는 따로 설치하신건가요?
저는 안나오는거 같아서요~
죄송합니다.
제가 너무 귀찮게 굴어서.....흑흑! 실력이 딸리다보니 ㅠㅠ
잘 적용된다니 다행입니다. :)
1. 블로그를 방문해 보니 이미 수정하신 듯 합니다. :)
2. 트랙백과 코멘트 옆에 viewed 로 표기 되는 부분은 따로 설치해야 하는 텍스트큐브 플러그인중 하나입니다. :)
예상하신 것처럼 "footerAdmin의 글자가 레이아웃을 뚫고 나간것을 수정하시느라고 text-align: center 로 수정"한게 맞습니다. ^ ^;
이렇게 세심하게 조언을 주시니 정말 고맙습니다.
hi8ar님께서 친절하게 설명해주신대로 했습니다.
그리고 제 볼 것 없는 블로그를 종종 읽으신다니 그야말로 반갑네요.
그런데 제가 너무 hi8ar님 시간을 빼앗은 것 같아서 죄송스런 마음도 듭니다.
정말 고맙습니다.
시간을 뺏기긴요. :) 좋아서 하는 일인걸요. 이것 저것 해결해 드리면서, 아는 것도 늘려가고.. 암튼 즐거운 일입니다..^^
글재주도 없고, 아는 것도 미천하여, 댓글은 잘 적지 못하지만, 앞으로도 열심히 읽어 보겠습니다~ 꾸벅~ (__)
좋은 스킨 만들어주셔서 감사드립니다.
바로 설치해서 적용해봤네요 ㅎㅎ
제가 올린 사진들이 죄다 640싸이즈라 20픽셀 차이로 아쉽긴 하지만 (ㅠㅠ),
그래도 자동으로 리사이즈 되는 것까지 만들어주셨으니 만족합니다 ㅎ
다시 한번 감사드립니다.
안녕하세요. :)
이미지가 리사이즈 되는 것은 스킨에 포함된 index.xml의 <contentWidth>600</contentWidth> 의 값을 기준으로 텍스트큐브에서 자동으로 리사이즈 됩니다. :)
질문 있는데요~ ㅎㅎ
댓글 입력 폼 글씨랑 comment, what's on your mind? 이 글씨들 그리고 댓글에 붙은 닉네임 글씨크기 어떻게 바꿔여?
흠... 원하시는게 많으시군요.
표현하신대로 적겠습니다.
댓글 입력 폼 글씨
basic.css
--------------------------------------------------------
input, textarea { font-family: NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", "Lucida Grande", "Segoe UI", Arial, AppleGothic, Sans-serif; }
--------------------------------------------------------
comment, what's on your mind? 이 글씨들
main.css
--------------------------------------------------------
.comment h3 {
font-size: 28px;
font-weight: normal;
letter-spacing: -2.5px;
}
--------------------------------------------------------
댓글에 붙은 닉네임 글씨크기
main.css
--------------------------------------------------------
.commentList .name {
display: block;
float: left;
font-family: Georgia, "Times New Roman", serif;
font-size: 26px;
letter-spacing: -1px;
height: 49px;
}
--------------------------------------------------------
예~ ㅎㅎ 제가 main.css파일 좀 뒤적뒤적 보다가
어라? 여긴가 하고 바꿔보니 되더라구요~ ㅎㅎ
그리구 그건 텍스트큐브 플러그인이었군여~ ㅎㅎ 티스토리는 저런거 안생기려나?ㅎㅎ
뭐 간절히 바라고 원하면 생길지도... :)
hi8ar님 멋진 스킨 너무 감사합니다~ 덕분에 텍큐로 다시 돌아오게 됐습니다~ ㅎㅎ
제가 더 감사하지요. :) #445b69 색상도 잘 어울리는데요? ^^
--------------------------------------------------------
텍스트큐브 1.7.6 staccato 에서 적용시 수정할 사항에 대해,
본문 글에 적어 두었습니다.
--------------------------------------------------------
어라라라.....hi8ar님 ㅠㅠ
갑자기 문제가 생겼어요~
제가 원래 검색 기능을 잘 안쓰다보니 스킨 설치하고 검색을 했던 기억이 없었어요~
근데 방금전에 예전 포스팅좀 찾아보려고 검색을 했는데 검색이 안되네요 ㅠㅠ
검색어 치고 엔터 치면 멍충이 처럼 가만~~~~~~~히 있네요 흑흑!!
제가 뭔가 건드리다가 이리 된거 같은데 ㄱ-;;
이거 뭐.....;; 다시 설치해서 수정하는게 좋을까여?ㄱ-;;;;
음.. 그렇군요. 티스토리 버젼의 경우, IE 에서 검색폼이 동작하지 않네요. 뭐 건드리셔서 그런게 아니라 첨부터 있던 문제 같습니다. 일단 확인했습니다. 조만간에 레이아웃 문제를 해결한 버젼에서는 고쳐서 내 놓겠습니다. :)
스킨이 이쁘고 심플해서 좋네요, 잘 쓸게요 ^^
감사합니다. :)
whiteBoard v2.0 / whiteBoard v2.0 for 티스토리 가 공개 되었습니다.
-----------------------------------------------------------------
이제 1024px 에서도 원활한 글 읽기가 가능~ 유후~
아 지금 몇시야.. 자자~
쓰고 싶다 쓰고 싶다 쓰고 싶어요!!!
하지만 저는 불행히도 텍스트큐브............닷컴 이용자 -o-
스킨 설치 불가능..
흑. 스킨 때문에 티스토리로 옮길까 살짝 고민도 했어요. 흑.
@ 결국 잘 쓰지도 않는 (버려둔) 영어 블로그에 덧입혔어요 흐..
(한국어로 되어있는 부분들 스킨 손봐서 다 영어로 고쳤는데, 괜찮겠죠?)
As your wish~ :)
텍스트큐브 닷컴은 아직 베타 서비스 중이니까요. 언젠간 스킨도 되겠죠? ^^;
티스토리 버전이 나온지도 몰랐군요~ ㅋ
얼른 가서 바꿔야 겠습니다.
감사해요~~~ =)
아아~ 내가 좋아하는 보라색.. :) 역시 이드씨는 똘끼 충만? ;p
완전 고맙삼!! 덕분에 새 포스팅하게 생겼음 ㅋ
새 포스팅은 새 블로그에서? 응? 잘 지내시죵? 같이 늙어가는 처지에 우리 서로 위로하며 지내요~ 하하.. 무슨 소리 하는 지는 나도 모르니, 그냥 흘려 들으셈.. :)
와우! 벌써 2.0이 나왔군여!!
티스토리 검색 문제도 해결이 되겠네요 ㅎㅎ
정말 감사드립니다...;)
일단 다운만 받아놓고 설치는 나중에 ㄱ-;;
네.. 아마도 해결되었을 거라 생각합니다. :) 꼼꼼해지려고 노력하는데, 아무래도 제 성격은 그리 꼼꼼하진 못한가 봐요. 한번에 깔끔이 끝내는게 없넹.. :)
잘 지내시죠? 머 그동안 먼일이야 있었겠습니까만은.....예의상..
스킨 잘 쓰고있습니다~
문제는 블로그에 글을 안쓴다는게...문제지만...
한가지 의문이 있어서...>_<;;
헤더인가? [h4]일케 쓰는고..
헤더 3인가4는 글간간격이 굉장히 좁은데..이건 폰트자체의 문제인갑유? 5부터는 다시 넓어지던데..
그냥 이것저것 써보다가 의문이 나서요~
참...전 맑은고딕으로..
우왕~ 오랜만에 뵙습니다. :)
저야 뭐.. 돈 못 버는거 빼곤 그럭저럭 잘 지내고 있습죠..=_=''
헤딩(문단의 중간 제목)은 article.css 에 있습니다.
--------------------------------------------------------------
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 { letter-spacing:-3px; color:#666; }
.article h1 { font-size: 48px; border-bottom: 3px solid #eee; }
.article h2 { font-size: 39px; border-bottom: 2px solid #eee; }
.article h3 { font-size: 30px; border-bottom: 1px solid #ddd; }
.article h4 { font-size: 22px; }
.article h5 { font-size: 18px; letter-spacing:-1px; }
.article h6 { font-size: 14px; letter-spacing:-1px; }
--------------------------------------------------------------
음.. 지금 보니 다 따로따로 쓰면 될 것을 몇 글자 줄여 보려고 제일 윗줄에 중복 되게 적은게 있네요.
암튼.. 글간격이 좁은 이유는, h1~h4 까지는 letter-spacing이 -3px 가 적용되고,
h5~h6 까지는 letter-spacing 이 -1px 가 적용되기 때문입니다.
본문글을 적을때 좀 더 멋을 내기 위해 위와 같이 하였는데, div article 영역에 위치하게 되는, 플러그인 따위가 만들어 내는 부분에도 영향을 미쳐 버립니다.
아마 티스토리의 "이 분류의 다른글 보기" 기능의 제목의 줄 간격이 줄어든것 때문에 묻지 않으셨나 싶습니다. :) letter-spacing을 적당히 줄여 주시거나, 삭제 하시면 원하시는 간격을 만드실수 있지 않을까 싶네요. :)
지금 티스토리의 다른분 블로그를 보니,
'****' 카테고리의 다른글 의 글자 간격은..
.another_category_color_gray h4 라는 클래스로 h4 로 작성되는군요. 티스토리에서 만들어 주는 클래스라... 이 클래스에서 직접 수정하면 좋겠지만, 그럴 수 없으니,
.article h4 { font-size: 22px; letter-spacing: 0; }
이정도로 수정하면 원래의 모습이 되지 않을까 싶습니다. :)
후훗~
감사르~ :P
저만 그런가요..
이상하게도 스킨 상세편집 영역에서 몇가지를 건드리고 저장을 해도
최초버전 그대로 변함이 없는데요.. ㅡ,.ㅡ;;
다들 잘 사용하시고 계신걸 보니 아마 저만 그런가봐요 ㅡ,.ㅡ;;
왜 그런걸까요 ㅡ,ㅡ;; 슬퍼라...
흠.. 왜 그럴까요. 스킨 상세 설정의 내용이 저장이 안되는 이유는 딱히 스킨에서 찾을 수는 없을 것 같습니다. 설치된 텍스트큐브의 문제가 아닐지... 텍스트큐브 포럼에 문의해 보시거나..
직접 스킨에 포함된 index.xml 파일의 내용을 수정하신후(스킨 상세 설정의 초기 내용은 index,xml 에 있습니다.) 스킨을 새로 적용하시거나 하셔야 할것 같습니다.
하이바님 덕분에 2년간 쓴 정든 스킨을 버리고 화이트보드로 갈아탑니다....^^
css 보고 놀랬습니다.
정말 세세하게 나눠놓으셔서....^^
다시금 감사 드리고 깔끔함이 생명인 화이트 보드 스킨을 마구 헝크러논거 같아서 왠지 죄송하네요....OTL
방금 블로그 가서 구경하고 왔습니다~! 배경 이미지 짱 멋져부러요~ :)
css 분리에 대해서라면... 사람마다 나누는 기준이 다르고, 각자의 코딩 습관도 다르고 해서.. 잘했다고도 못했다고도 할 수 없는 부분이라고 합니다.
암튼 감사합니다. 스킨은 마음에 드실때까지 마음껏 수정하세요~ 저작권 운운한건.. 사실, 별 관심이 없습니다. :p
아...CSS를 너무 상세하고 체계적으로 나눠놓으셔서 스킨 수정 하는 사람이 너무 편하고 좋았다는거죠..^^
사실 상세한 리마크와 함께 구조적으로 코딩하면 추후에 소스를 참고하고 수정하는 자신이나 타인에게 그것보다 큰 축복은 없을테지만 실제로 귀찮아서.. 여러가지 이유로 그렇게 하는 사람들이 그리 많지 않죠..OTL
아무튼 하이바님 덕분에 쉽고 즐겁게 작업할수 있었습니다. 저 또한 배운게 너무 많았고요..
다시 한번 감사 드려요....^^;;;;
요 며칠 몸살 때문에 이제야 인사를 남기네요.
정말 노고 크셨습니다.
노벨 테마상을 드리고 싶은 심정이네요.
고맙습니다. : )
와 노벨 테마상~ 정말 있었음 좋겠습니다~ 깔깔~