Creative

Bluum:fx Skin for Textcube.com

2009/05/17 23:34

얼마전 공개한 Bluum:fx 스킨의 텍스트큐브닷컴용 버전을 배포합니다.

스킨 특징/정보

원래 처음에 디자인 했던 대로, 스킨의 본문 폭은 410px (그림은 최대 400px)으로, 보통 스킨보다는 좁은 편입니다. 하지만 청명님께서 폭을 늘려서 사용하시는걸 보고 이것도 나름 괜찮겠다.. 해서 폭 늘리기가 쉽도록 손을 좀 봤습니다.
본문의 폭을 넓히시려면

style.css에서 #contentColumn 부분을 찾아서 width: 410px로 되어있는 곳에 에 원하시는 값이 되도록 더해주세요. 그리고 #bgvertical와 #copyright부분의 width, 에도 동일한 값을 더해주세요. (copyright= 본문 폭+320px, bgvertical=본문폭+461px입니다) 그리고 마지막으로 index.xml에서 <contentWidth>400</contentWidth> 부분에도 동일한 값을 더해주세요.
되도록이면 사이드바 모듈들은 기본으로 배치되어있던 위치에 놓아주는 것이 보기에 좋습니다. (최근 글, 댓글, 트랙백, 공지, 카테고리는 왼쪽 사이드바에, 블로그 프로필, 방문자수, 검색, 링크등은 오른쪽에.)
한 페이지당 권장 표시 포스팅 갯수는 1개입니다.
블로그 프로필의 그림 사이즈는 165x165px입니다.
BlackNoir2, 설치형 텍큐용 Bluum:fx 스킨과 동일하게, 태버 자바스크립트 기능이 포함되어 있습니다. 자세한 정보와 사용법은 이 포스팅을 참고하세요. 하지만 텍큐닷컴의 js파일 업로드제한때문에 기능이 풀리기 전에는 사용할 수가 없을 듯 합니다.

+업데이트 2009/07/11 14:46

텍스트큐브의 내부 코드가 바뀌었는지 원래는 댓글 작성 창 내 출력되던 트랙백이 독립되어버려서 다시 스킨에 직접 코드를 추가해야만 되게 되었습니다. -_-;; 압축파일을 업데이트했으니 다시 받으셔서 skin.html과 style.css를 새로 업로드해주세요.

스킨을 직접 수정하셨거나 해서 덮어씌우신후 또 수정작업을 하셔야된다면, 직접 수정 부분을 추가해주셔도 됩니다. 아래와 같이 만들어주세요:

skin.html, 480번째 줄 (기본 배포판 기준)에 trackbackAdd div추가

style.css, 507번 줄 (기본 배포판 기준)에 .trackbackAdd 스타일 추가

/*——————————-*/<br /> /* trackback */<br /> /*——————————-*/<br /> .trackbackAdd { background: url(‘images/bullet_uri.gif’) no-repeat 5px 50%; padding-left: 20px; margin-bottom: 10px; font: 0.9em ‘Trebuchet MS’, Helvetica, sans-serif; }<br /> /* Trackback list */<br /> .trackback h3 { display: none; }</p> <p>

+업데이트 2009/10/18 00:02

상단의 텍스트큐브 관리자/유저 메뉴 툴바 관련 스타일을 수정했습니다.
이미지 파일 하나가 추가되었으니 수동으로 업데이트 하실 분은 파일을 받아서 업로드 해주시고 (자동으로 images폴더에 올라갑니다) 아래 변경된 CSS 코드를 적용해주세요.

style.css, 52번 줄 (기본 배포판 기준)에 #tt-GNB 관련 스타일 추가

#tt-GNB { text-align: left; padding: 0; }<br /> #tt-GNB.type-black a { color: #000; text-shadow: 0 1px 1px #fff, 0 1px 1px #fff, 0 0 1px #fff, 1px 0 1px #fff, -1px 0 1px #fff; }<br /> #tt-GNB.type-black a:hover { color: #000; font-weight: bold; text-shadow: 0 1px 1px #fff, 0 1px 1px #fff, 0 1px 1px #fff, 0 0 1px #fff, 1px 0 1px #fff, -1px 0 1px #fff; }<br /> #tt-GNB.type-black .name { color: #000; text-shadow: 0 1px 1px #fff, 0 1px 1px #fff, 0 0 1px #fff, 1px 0 1px #fff, -1px 0 1px #fff; vertical-align: middle; }<br /> #tt-GNB .tt-GNB-bar { margin: 0; padding: 5px 50px 5px 10px; float: left; display: block; width: auto; background-image: url(images/adminbarbg.png); background-repeat: repeat-y; background-position: right top; }<br /> #tt-GNB .tt-GNB-bar li { letter-spacing: -1px; font-size: 9pt; vertical-align: middle; }<br /> #tt-GNB .user .btnLogout { border: none; }<br /> #tt-GNB li.user { margin: 0 0 5px 0; font-size: 1.2em; vertical-align: middle;}

※참고로 text-shadow 속성은 IE6,7,8에서 지원하지 않습니다.

+업데이트 2009/10/19 01:36

블로그 폭보다 작은 해상도에서 페이지를 접속했을때 가로 스크롤이 나타나지 않던 점과 텍큐 관리자 바의 다중 블로그 운영시 나타나는 토글 드롭다운리스트의 위치가 잘못된 점을 수정했습니다. 제보해주신 세르엘님께 감사드립니다^^

style.css, 37번 줄 (기본 배포판 기준)에 #bgvertical, #container 속성 수정:

#bgvertical { width: 871px; height: 100%; margin: 0 0 0 auto; padding: 0; background-image: url(‘images/bgvertical.gif’); background-position: right top; background-repeat: repeat-y; display: block; }<br /> #container { height: 100%; margin: 0 0 0 auto; padding: 0; background-image: url(‘images/contentbg.jpg’); background-position: right top; background-repeat: no-repeat; display: block; }

style.css, 59번 줄 (기본 배포판 기준) 이후에 아래 내용 추가:

#tt-GNB .tt-GNB-owner .tt-GNB-NAVIGATEBOX { position: relative; top: 21px !important;}<br /> #tt-GNB .tt-GNB-WRITE.tt-GNB-NAVIGATEBOX { right: 340px !important; }<br /> #tt-GNB .tt-GNB-OWNER.tt-GNB-NAVIGATEBOX { right: 222px !important; }<br /> #tt-GNB .tt-GNB-BLOG.tt-GNB-NAVIGATEBOX { right: 296px !important }

추가로, 트랙백 부분의 중복된 아이콘을 없앴습니다.
style.css, 527번 줄 (위 내용 추가 이후) .tt-trackback-div부분 수정

.tt-trackback-div { font: 0.9em ‘Trebuchet MS’, Helvetica, sans-serif; }

스킨 미리보기:

제 텍스트큐브 닷컴 블로그 (http://kima.textcube.com) 에서 보실 수 있습니다.

스킨 다운로드:

텍스트큐브 스킨 게시판에서 받으실 수 있습니다. 설치형 텍큐버전과 같은 페이지에 있으니 알맞은 버전을 받아주세요.
마지막 수정된 날짜: 2009년 10월 19일

브라우저 호환성

다음 버전의 브라우저에서 테스트되었으며 정상적으로 출력됩니다.

※인터넷 익스플로러 6은 지원하지 않으며 깨져보일 수 있습니다.

설치 방법:

관리자 페이지 > 꾸미기 > 스킨 편집으로 들어가서 페이지 밑의 ‘파일 업로드‘ 버튼을 누르고 다운받으신 압축 파일을 선택해주세요. 업로드가 된 것을 확인하시고 ‘적용하기’ 버튼을 누르면 끝!

텍스트큐브닷컴의 특성상 사이드바에서 항상 ‘프로필’과 ‘관심 블로그 목록’이 왼쪽 사이드바에 뜨는데, 되도록이면 꾸미기 > 위젯 페이지에서 두 모듈을 오른쪽 으로 끌어 옮긴 후 저장해주세요.

* * *

스킨을 사용하시다 수정해야할만한 부분을 발견하시거나 스킨에 관련한 질문이 있으시다면 이 포스팅에 댓글로 남겨주시면 답변해드리도록 노력하겠습니다.

responses

56 comments

쿠나says:
2009/05/18 at 07:06 #

오오오!! 청명님 스킨이 이거였군요..
참고하겠습니다 :)
Reply
- Kimatgsays:
  2009/05/18 at 16:08 #
  
  ㅎㅎ 네, 참고하세요^^ (?)
청명says:
2009/05/18 at 07:39 #

부, 부끄럽사옵니다. 제 이름이 실리다니 ;;;

확실히 원본 제작자 + 실력자 가 직접 만드니 품질이 다르군요... OTL

잘 가져다 쓰겠습니다 ; ㅅ;
Reply
- Kimatgsays:
  2009/05/18 at 16:07 #
  
  허허 별말씀을요. 잘 쓰세요~ ^^
Indiersays:
2009/05/18 at 17:00 #

텍스트큐브닷컴스킨과 텍스트큐브스킨은 어떤 차이점이 있나요?
Reply
- Kimatgsays:
  2009/05/18 at 22:32 #
  
  베이스는 같으나 트랙백, 댓글이 하나로 통합되는 등 변화때문에 텍스트큐브닷컹에서는 더이상 쓰이지 않는 치환자 등이 있습니다. 또한 댓글 작성 부분등 여러 하드코딩되어 (skin.html에 포함되지 않음에도 자체적으로)출력되는 부분들을 CSS로 원래 스킨 디자인대로 스타일링했습니다.
히라says:
2009/05/18 at 18:35 #

역시 Kimatg 님 스킨 너무 이뻐요 ^.^
그치만 지금 스킨도 공유 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
잉잉~
모두 공개가 싫으시다면 저한테만 살짝 ㅋ ^^^^^^^^^^^^^^^*
Reply
- Kimatgsays:
  2009/05/18 at 22:34 #
  
  앗, 그러니까 그건 좀 곤란...^^^^^^^^^;;;;
누says:
2009/05/18 at 20:13 #

와.. 배포한 스킨도 이쁘지만, 사용하고 계시는 스킨은 무지무지 이쁜걸요~ 아랫쪽 메뉴들도 이쁘게 만드셔서 부럽네요! 저도 저렇게 넣고 싶은데.. 역시 실력의 한계... (...)
Reply
- Kimatgsays:
  2009/05/18 at 22:36 #
  
  감사합니다^^
  꼬박 한주동안 스킨만 붙들고 열심히 삽질한 결과인듯 합니다^^;; (먼산)
달무리says:
2009/05/18 at 21:32 #

좋은 스킨 공개해주셔서 감사합니다. 전 오페라 브라우저를 사용하는데 검색창이 ie8에서보다 height가 더 크게 나오네요; 그리고 Kimatg 님이 지금 사용하고 계신 스킨도 오페라에서는 조금 이상합니다..-0-
Reply
- Kimatgsays:
  2009/05/18 at 22:36 #
  
  흠, 그런가요, 오페라는 한번도 써본 적이 없어서리...
  
  현재 스킨의 브라우저 호환성은 [url=http://www.xenosium.com/193?category=15]여기[/url]에 적힌 대로입니다. :)
Flatina+ TECHNIKALsays:
2009/05/19 at 07:21 #

확실히, 설치형버전의 스킨을 컨버팅한것에 비해 월등히 깔끔해졌습니다. 몇일 전과 크게 다르지 않아 보이시겠지만, 다릅니다. 오리지날의 제작자인 Kimatg님께서 직접 만들어주신 텍스트큐브를 위한 스킨입니다. 물론 이번에도 나름 편집을 거쳐 맑은고딕체 의 적용과 본문폭 640픽셀을 이룩했지만요. 하지만 아쉽게도 단점도 있습니다. 여기저기서 완벽함을 갖췄긴 했지만 IE8에서만 그런듯 해요. 당장 IE8에서 호환성모드를 적용하면 와장창(...) 깨집니다...
Reply
청명says:
2009/05/19 at 07:44 #

적용했습니다. 달무리님 말씀대로 오페라에서 검색창이 조금 크게 나오긴 한데 그건 크게 거슬릴 정도는 아니라 다행이군요.
그런데 오페라는 둘째치고 IE8의 호환성모드에서 레이아웃이 박살납니다 OTL

텍스트큐브닷컴의 에디터는 IE8에서 호환성모드를 키지 않으면 이미지 업로드가 되지 않기 때문에 ..... orz 일단 껐다켰다 하거나 오페라를 사용하는걸로 대체중입니다. IE6에서도 깨지는거 확인했고요... IE7은 모르겠네요.
그리고 이건 스킨 문제인지 정확히 모르겠는데 index.xml의 컨텐츠 폭을 바꿔도 에디터의 폭은 그대로더군요 ....... OTL 항상 640픽셀로 이미지를올리는데 .... 어휴;;

그리고 스킨과는 좀 번외 질문인데 ... 줄간격 설정을 어떻게하죠? ...
<p> 태그에 속성을 line-height 로 해서 주는게 맞나요?....
오페라랑 IE랑 같은페이지에서 줄간격이 완전히 틀리게 나와서 말이죠 ... 휴;;
Reply
- Kimatgsays:
  2009/05/19 at 10:51 #
  
  ...확인해보니 그렇군요.
  폭 수정하기 쉽게 parent div에서는 width값을 지정해주지 않았는데 IE8이나 파폭에서는 괜찮은게 IE7에서는 깨지는군요. -_-;;
  
  아흐, 망할 IE...
  
  수정해서 다시 올리겠습니다.
  
  index.xml의 경우에는, 아마도 다른 스킨으로 적용했다가 다시 적용해야할 듯 합니다. 설치형 텍큐에서도 이상하게 이게 캐시가 남나봐요. ;;
- Kimatgsays:
  2009/05/19 at 11:48 #
  
  수정했습니다! 다시 받아가주세요.
  번거롭게 해드려서 죄송합니다ㅜㅜ
청명says:
2009/05/19 at 12:54 #

확인했습니다. 지금은 학교라 집에 가서 해 볼 생각인데요... 바뀐 부분이 많은가요? 지금걸 적용하고 편집한게 많아서 바뀐 부분이 조금이라면 그 부분을 제가 수정하는편이 나을 것 같아서요 . ... orz
Reply
- Kimatgsays:
  2009/05/19 at 14:05 #
  
  아 네, 확실히 그러실듯 하네요.
  
  수정된건 그리 많지 않습니다. style.css에서
  #mBody의 width를 없애고 대신 #bgvertical에 width: 871px를 지정했습니다. (포스트 본문에 수정해 적었듯이, bgvertical=본문폭+461px입니다)
  
  또한 검색창 높이 문제와 관련해
  #searchBox { height: 23px; }
  #searchBox .sInput { line-height: 1.3em }
  와 같이 추가했습니다.
청명says:
2009/05/19 at 17:21 #

친절히 답해주셔서 고마워요 / ㅅ/

덕분에 잘 적용했습니다. 스킨, 감사합니다 ^^
Reply
- Kimatgsays:
  2009/05/23 at 11:45 #
  
  넵 스킨 잘 쓰시고 즐거운 블로깅 라이프 되시길! ^^
Luxurysays:
2009/05/21 at 21:44 #

이제 티스토리 버전이 나오는건가요!!!!!!!!!!
Reply
- Kimatgsays:
  2009/05/23 at 11:46 #
  
  앗, 티스토리도 있었죠 |||_|||ㅋ
해바라기says:
2009/05/22 at 00:41 #

머..멋진 스킨입니다!
Reply
- Kimatgsays:
  2009/05/23 at 11:46 #
  
  가...감사합니다! :)
청명says:
2009/05/26 at 11:46 #

뒤늦게 추가 피드백입니다.
IE6에서 본문이 왼쪽으로 밀리면서 오른쪽 사이드바가 아래로 떨어집니다.
그리고 댓글에 수정삭제 메뉴도 안뜨네요...

그리고 다른 방문자분의 제본데 크롬에서도 깨진대요 .....
Reply
- Kimatgsays:
  2009/05/26 at 12:09 #
  
  음, 본 스킨과, 앞으로 제가 만들어낼 모든 스킨들도 IE6는 지원하지 않습니다.
  주변에 IE6깔린 컴터가 없어서 테스트해보지도 못했고, 앞으로 테스트 해볼 생각도 없습니다. 8년이나 된 브라우저를 아직까지 쓰는건 좀 아니라고 봐요.
  죄송합니다만 이해해주시리라 믿겠습니다. :)
  
  크롬은 테스트해봤는데 다 잘 나오던데요.
  어느 버전의 크롬에서 어느 페이지가 깨지나요?
한비[韓非]says:
2009/06/17 at 15:03 #

이유는 모르겠는데 로그인 창이 없네요..-_-
왼쪽 상단에서보면 Kimatg님껀 있는데.....제껀 안보이네요...
뭐가 잘못된것이지 -_-??
Reply
- Kimatgsays:
  2009/06/17 at 17:54 #
  
  혹시 설치형 텍스트큐브에 텍큐닷컴용 스킨을 잘못 설치하신건 아닌지요? ^^;;
- 한비[韓非]says:
  2009/06/18 at 03:13 #
  
  음 말그대로 바꾸어서 되긴했는데요
  사실 여러가지 문제가 있었는데 나머지...는 고쳐졌고..
  로그인글만 안보이네요 ..-_-
  이상하게 로그인이에요
- Kimatgsays:
  2009/06/18 at 07:56 #
  
  제가 기억하기로 분명 한비님은 설치형이시죠?
  설치형 텍큐용 버전은 이 글이 아니고 [url=http://www.xenosium.com/200]여기[/url]에 있습니다. 그리고 설치형 버전에서는 텍큐닷컴처럼 왼쪽 상단에 "로그인"이라고 뜨지 않습니다.
  관리자 메뉴로 들어가시려면 사이드바에서 CP를 클릭하시거나 단축키 Q를 눌러서 들어가시면 되죠.
  
  이 문제가 아니라면... 정확히 뭘 뜻하시는지 잘 모르겠네요.^^;;
스킨says:
2009/06/17 at 19:04 #

안녕하세요~텍스트큐브에서 보고 왔는데요.
혹시 텍스트큐브와 텍스트큐브닷컴용 스킨이
어떤부분에서 차이가 나느지 알수 있을까요?
다시말해서 텍스트큐브용 스킨의 어느 부분을 고쳐줘야
텍스트큐브닷컴용으로 쓸수 있는지 그 부분이 궁금해서요.^^
Reply
- Kimatgsays:
  2009/06/17 at 20:33 #
  
  음.. 아직 공식 문서가 없어서 정확히 어떤 부분에서 다른지는 저도 자세히 설명드릴 수 없습니다만, 설치형 텍큐와 비교했을때 사용되는 치환자가 조금씩 다릅니다.
  
  생각나는 몇개 적어보자면... 댓글+트랙백이 하나의 "의견"으로 합쳐저서 댓글 리스트 부분이 달라졌고, 댓글 입력 창은 스킨의 HTML에 의하지 않고 기본 코드대로 출력되어서, CSS로 잡아 맞춰 스타일링할 수 밖에 없게 되었습니다. 또 프로필 페이지라는게 생겼죠. 사이드바에서 프로필 위젯과 관심 블로그 목록. 이 부분들도 마찬가지로 출력되는 코드에 맞춰 CSS로 스타일링 해 줘야됩니다. 포스팅 관리 메뉴 (편집,공개,삭제 등) 부분도 마찬가지입니다.
  
  다만 이 스킨(Bluum:fx)을 사용하실 생각이라면 변환하는 걱정하실 필요는 없습니다. 텍큐닷컴과 설치형 텍큐 용으로 맞춰서 두 버전을 배포하고 있습니다.
- 스킨says:
  2009/06/18 at 05:08 #
  
  아 정말 성실한 답변 감사드립니다. 그런데 죄송하게도 무슨 말인지 이해를 잘 못하겠네요. 공부를 좀 더 해야겠네요.^^;;
- Kimatgsays:
  2009/06/18 at 07:56 #
  
  좀 복잡하긴 하죠^^;;
- 한비[韓非]says:
  2009/06/19 at 07:22 #
  
  해결되었어요..;;; 역시 ... 그냥 제가 다르게 본거였군요..히히...
  감사해요 스킨 잘쓸께용~
- Kimatgsays:
  2009/06/19 at 20:31 #
  
  응? 한비님 엉뚱한 리플에 답변을 다셨네요 ㅋㅋㅋ
  암튼 제대로 되었으니 다행이네요.
  
  아 그리고 왼쪽에 그 까만 줄이 나타나는 이유는 모르겠지만... 일단 style.css에서 #bgvertical의 width를 870px로 해주시면 제대로 나옵니다. ㅎ_ㅎ;;
- 한비[韓非]says:
  2009/06/20 at 10:39 #
  
  ㅋㅋㅋ 이거 달때 너무 졸려서 내껀줄알고 달았네요 하하하 스킨님 죄송합니다. 그리고 해결잘되었네요^^ 감사합니다
엘군says:
2009/06/19 at 03:10 #

아쉽게도 제 원래 포스팅이 그림 파일이 커서,
전부 박살나는군요...좌절입니다.. 느낌좋아서 써보려고 했는데^^;;
그림들이 전부 사이드바를 넘어서네요;;;

인연이 닿지 않는군요~ ^___^
하지만 좋은 스킨 감사합니다!!
Reply
- Kimatgsays:
  2009/06/19 at 20:32 #
  
  좀 폭이 좁은 편이긴 하죠. ㅎㅎ;;
  위에 설명한 대로 본문 폭을 넓혀보시는건 어떨지요? :)
- 엘군says:
  2009/06/20 at 16:54 #
  
  제가 넷북을 쓰다보니 좌우폭이 넓어지면 느낌이 없어져서요 ^__^
- Kimatgsays:
  2009/06/22 at 00:00 #
  
  그, 그렇군요. ㅇㅅㅇ
트랙백이,,says:
2009/07/10 at 20:21 #

트랙백 주소가 나타나지 않네요,,
댓글 눌렀을때,, ,왜그런거죠;;
Reply
- Kimatgsays:
  2009/07/14 at 20:01 #
  
  텍스트큐브의 코드상 뭔가 변경이 되었나봅니다. 수정했습니다 :)
삼문이says:
2009/07/14 at 00:26 #

본문에 줄간격이 너무 촘촘해서 보기가 힘드네요 ^^;

혹시 줄간격 적용방법좀 알려주실 수 있으신가요?
Reply
- Kimatgsays:
  2009/07/14 at 20:11 #
  
  줄간격은 line-height로 변경할 수는 있지만, 삼문이님의 경우 블로그 글 코드를 보니 줄마다 div로 되어있더라고요? 이게 원인이지 않을까 합니다.
컴포지션says:
2009/09/24 at 11:28 #

안녕하세요.. 한가지 여쭈어 볼 게 있는데,
스크립트를 그대로 사용하되 이미지들을 수정해서 사용해도 될까요?
감사합니다
Reply
- Kimatgsays:
  2009/09/24 at 19:15 #
  
  네, 원저작자인 저를 크레딧에 넣어주신다면야 마음대로 수정하셔도 상관없습니다. :)
서주현says:
2009/09/25 at 00:13 #

감사합니다 :) 이쁘네요 ~
Reply
- Kimatgsays:
  2009/10/01 at 21:43 #
  
  네~ 잘 쓰세요^^