'스킨' 카테고리의 글 목록 (2 Page)

구글 크롬 테마를 만들었음

스킨 2010. 7. 26. 19:59

보시다시피 마도베 나나미입니다.

그냥 나나미 넣고 색깔 찍어서 골라 줬더니 원색적인 색채가 마음에 들어요.

저작자표시 비영리 변경금지

Posted by 도바토

[베타] 블루큐브 v1.4 - 티스토리 스킨

스킨 2010. 7. 22. 15:15

베타 릴리즈입니다. 플레인 버전만 있습니다.

크롬과 같은 CSS3을 지원하는 브라우저를 사용해야 합니다. IE에서는 제대로 된 모습이 출력되지 않습니다.
( 구글 크롬 다운로드 - http://google.com/chrome )
네이버에서 배포하는 나눔글꼴이 설치되어 있어야 합니다. 없다고 맑은 고딕으로 표시되지 않습니다.
( 나눔글꼴 다운로드 - http://hangul.naver.com/nanum.nhn )
이 스킨을 사용하면서 발생하는 문제점 & 지적사항은 이 글의 덧글로 바로 달아주셨으면 합니다.

BLUECUBE_by_Polaris_Australis_V1-4_PLAIN.7z

저작자표시 비영리 변경금지

Posted by 도바토

스킨 대 변경!

스킨 2010. 6. 13. 20:36

여름용 SUMMERCUBE 1단 웹킷 CSS3 그라이언트 버전으로 탈바꿈!

구글 크롬을 사용하시는 분은 제 블로그에서 CSS3의 시원한 그라이언트를 감상하실 수 있습니다!

혹시 탐나시나요? 이건 저 혼자 쓰려고 만든 버전이라서 공개는 불가능할 것 같습니다!

메모리가 딸려서 그런지 인코딩중이어서 그런지, 그라이언트 뿌리는게 워낙 부하가 큰건지

마우스 움직이면 롤오버 되는것마다 반응이 느리네요!

쓸거리도 없고 좀 패닉이라서 못썼지만 이제 쓸거리도 생기고 스킨도 바꿨으니 기분 체인지 업!

저작자표시 비영리 변경금지

Posted by 도바토

블루큐브 v1.3 - 티스토리 스킨

스킨 2010. 6. 2. 20:41

티스토리 스킨 - 버전 1.3

CSS3!

Comportable Supreme Stylesheets 3 (??)

색상별 가로크기 (단위: 픽셀)

	라임*	플레인*	기본*	바이올렛*
2단 (skin_2column.html, style_2column.css	950	1010	950	920
3단 (skin.html, style.css)	1165	1225	1165	1105
본문 영역	690	750	690	690

잠깐!! 받아가시기 전에 일단 아래의 문장들을 한번만 확인해주셨으면 하는 바람입니다.

이 스킨을 사용하기 위한 준비물 - 별로 많지 않습니다.

IE(인터넷 익스플로러)가 아닌 브라우저를 사용하십니까?
구글 크롬, 모질라 파이어폭스, 애플 사파리, 오페라 브라우저 같은 웹표준을 준수한 브라우저들을 말합니다. 이런 브라우저들을 사용해서 제작한 스킨이므로, 사용할 때에도 꼭 필요한 준비물입니다.

이젠 아예 IE6,7이건 IE8이건 버리는게 낫습니다! (IE9가 나온다면 모르겠지만) 아직도 IE를 쓰는데 이 스킨을 쓰고 싶으시다면 IE가 아닌 브라우저로 갈아타 주세요!

(가장 추천)구글 크롬 다운로드 / 파이어폭스 다운로드 / 사파리 다운로드 / 오페라 다운로드
나눔글꼴
별것 아닌 스킨이지만 많은 종류의 폰트를 사용하는 스킨입니다. 없어도 상관 없지만, 나눔고딕(다운로드 링크)은 반드시 가지고 있어야 합니다.
절제된 탐구심
부디 skin.html이나 style.css를 무리하게 수정하지 말아주세요.
손가락으로 툭 치면 쓰러질 것 같은 아슬아슬한 모래탑이라, 조금의 코드 수정으로 블로그 전체가 박살날 수도 있습니다.(뻥) 스킨 전문가이시다면 모르겠지만, 거슬리는 점이 있으면 제게 문의해 주세요. 빠른 시간 내에 수정해 드리겠습니다.
기본적인 개념
여러가지 의미의 개념을 말합니다. 스킨을 블로그 관리에서 올려서 사용할 수 있는 지식, 또다른 뜻으로는 index.xml을 마음대로 수정해서 제작자를 조작하거나 하지 않는 것 등입니다.

모든 준비가 되셨다면 사용해 주셔도 좋습니다. 감사합니다. 꾸벅

TISTORY_BLUECUBE_v1-3_by_Polaris_Australis.7z

이 스킨의 기본형은 3단입니다. 고로 2단 적용하는 방법은:

skin_2column.html과 style_2column.css 파일을 각각 skin.html, style.css로 이름을 바꿔서 업로드하면 됩니다.

ChangeLog - 이전 버전에 대해 바뀐 점

CSS3의 수용(收用)
CSS3 기술인 border-radius와 text-shadow를 사용했습니다.
그래서 images 폴더의 길쭉한 이미지는 이로서 전부 사라졌습니다.
구글 크롬, 모질라 파이어폭스, 애플 사파리, 오페라 브라우저에서는 사람좋은 둥글둥글한 모습을 감상하실 수 있습니다.
가로 폭 조정
전체적으로 모든 색상의 가로 폭을 6~7px 늘렸습니다. IE6 이하에서 content 부분이 밑으로 푹 꺼져버리는것은 아무래도 아니다 싶어 여유를 두기 위함입니다. 아주 영문도 모르게 6~7px 좁아진 걸 가지고 무슨 좁은 병목에 낀 고무공마냥 밑으로 쑥 빠지는게 매우 불가사의합니다. IE6.
플레인 색상 와이드화
바이올렛이 좁은 스킨인것처럼 플레인은 넓은 스킨으로 만들었습니다. 다른 스킨보다 본문영역이 60px 넓습니다.
바이올렛 색상 완화
눈아프다는 분이 계셔서 좀 연하게 했습니다.
둥글게 만들 수 없던 것을 둥글게 만들다. CSS3 덕분입니다.
포스트 밑부분의 "이 카테고리의 다른 글 보기"와 글 본문에 삽입한 글상자는 자동으로 둥글게 표시됩니다.
마음에 안 드시면 CSS를 직접 수정해 주세요. 망가져도 몰라요.
자잘한 디자인 수정

Arial Black 폰트를 버렸습니다. 전부 Segoe UI로 대체했습니다.
푸터 부분의 메뉴가 티에디션에서만 이상하게 보이길래 수정하려고 봤더니 전혀 고칠 수가 없음. 그래서 그냥 없애버리고 대신 스킨 정보 같은 것을 짤막하게 한 줄 넣었습니다.
상단의 블로그 메뉴를 수정했습니다.
카운터는 모든 색상에서 플레인 스타일로 나옵니다. 귀찮아서 다 똑같이한건 아닙니다.

저작자표시 비영리 변경금지

Posted by 도바토

블루큐브 스킨 뜯어보기 Part.1 - 「CSS3」

스킨 2010. 6. 1. 20:15

CSS3~~[씨에스에스삼]~~으로 div(글상자)의 모서리를 둥글게 만들어 보세요.

저도 방금 알아냈어요. (...)

드디어 시작된 스킨 뜯어보기 코너. 그런데 처음부터 난데없이 CSS3인 이유는...

블루큐브 스킨을 보시면 전체적으로 둥글둥글하다고 느끼실 겁니다. 그 둥근 테두리를 전부 이미지로만 처리해야 하는 애로사항이 있었는데, CSS3의 사용법 중 div(글상자)의 모서리를 둥글게 만드는 것이 있다는 것을 뒤늦게 깨닫고 말았습니다.

...-ㅅ-;; 많이 늦긴 하지만 CSS3을 사용하는 스킨이 되었다는 말입니다.

예를 들어 이런 부분이 있다고 하면

이렇게 세 부분으로 나누어져서, 각각 부분을 글상자로 만든 다음

윗부분과 아랫부분은 테두리를 둥글게 그려놓은 배경이미지로 채워넣고,

가운데 부분은 흰색 배경으로 채워 넣는 것이었습니다.

.commentReplyTop {

width:603px; height:6px;

margin-top:12px;

background:url(images/commentReplyTop.png) center center no-repeat;

}

.commentReplyBottom {

width:603px; height:6px;

margin-bottom:12px;

background:url(images/commentReplyBottom.png) center center no-repeat;

}

.commentList p {

background-color:#FFF;

padding:5px 12px 5px 12px;

margin:0;

}

<div class="commentReplyTop">

</div>

</div>

이렇게 난잡하기 짝이 없던 코드가

.commentList p {

background-color:#FFF;

padding:12px;

margin:12px 8px 12px 0;

-webkit-border-radius:7px;

-moz-border-radius:7px;

}

<p>[샵샵_rp_rep_desc_샵샵]</p>

무려 이렇게 간단하게 바뀌어버렸습니다. 오오 이런...
결과는 위의 사진과 거의 동일하게 나오겠죠?~~(귀찮아서 사진 안올리려는 수작)~~

색깔이 좀 달라진건 신경쓰지 말아주시고, 결과물이 아주 약간 더 깔끔하다는 것을 확인할 수 있습니다.

코드를 보시면 감이 확 오실 겁니다. 넵. 크롬, 사파리, 파이어폭스에서만 보입니다.

사용법은 이렇습니다.

-webkit-border-radius:(수치)px;

-moz-border-radius:(수치)px;

위의 두 줄을 CSS파일의 원하는 부분에 부담없이 넣어주시면 됩니다. 픽셀 말고 다른 단위는 되나 확인을 안해봤네요.

div 뿐만 아니라 img(이미지)에도 먹히더군요. 예뻐 죽겠네요. -ㅂ-

신기술과 친하게 지내는것은 언제나 좋은것 같습니다. 어허허

위의 글상자 모서리 둥글게 다듬어주는것뿐만 아니라 텍스트 그림자에 글상자 그림자, 그라이언트까지 아주 지옥같은 집이 천국의 러브하우스로 변하는중.

이것들을 굉장히 다양한 방법으로 혼합해서 사용하면 무한한 응용이 가능하더군요.

근데 이제부터 IE나 오페라에서는 제 스킨이 매우 각지게 나오겠군요? 완전 다른 스킨마냥...

저작자표시 비영리 변경금지

Posted by 도바토

블루큐브 v1.2 - 티스토리 스킨

스킨 2010. 5. 29. 20:55

티스토리 스킨 - 버전 1.2 (FIX)

이번 버전에는 색상만 추가했고 큰 변화는 없습니다.

간단한 코드 수정으로(하지만 색상이 4가지라 개노가다로) 2단 버전을 추가했습니다.

색상별 가로크기 (단위: 픽셀)

	라임	플레인	기본	바이올렛
2단	944	944	944	914
3단	1158	1158	1158	1098

잠깐!! 받아가시기 전에 일단 아래의 문장들을 한번만 확인해주셨으면 하는 바람입니다.

이 스킨을 사용하기 위한 준비물 - 별로 많지 않습니다.

IE6, IE7이 아닌 브라우저를 사용하십니까?
구글 크롬, 모질라 파이어폭스, 애플 사파리 같은 웹표준을 준수한 브라우저들을 말합니다. 이런 브라우저들을 사용해서 제작한 스킨이므로, 사용할 때에도 꼭 필요한 준비물입니다.
혹시 지금 아직도 IE6이나 IE7을 사용중이신가요?? 굳이 IE6을 고집하신다면, 지옥의 경관을 감상하실 수 있습니다.
이 스킨을 사용하려면 뒤떨어지지 않는 브라우저가 필요합니다. 구글 크롬 다운로드 파이어폭스 다운로드 사파리 다운로드
나눔글꼴
별것 아닌 스킨이지만 많은 종류의 폰트를 사용하는 스킨입니다. 없어도 상관 없지만, 나눔고딕은 반드시 가지고 있어야 합니다.
절제된 탐구심
부디 skin.html이나 style.css를 무리하게 수정하지 말아주세요.
손가락으로 툭 치면 쓰러질 것 같은 아슬아슬한 모래탑이라, 조금의 코드 수정으로 블로그 전체가 박살날 수도 있습니다.(뻥) 스킨 전문가이시다면 모르겠지만, 거슬리는 점이 있으면 제게 문의해 주세요. 빠른 시간 내에 수정해 드리겠습니다.
기본적인 개념
여러가지 의미의 개념을 말합니다. 스킨을 블로그 관리에서 올려서 사용할 수 있는 지식, 또다른 뜻으로는 index.xml을 마음대로 수정해서 제작자를 조작하거나 하지 않는 것 등입니다.

모든 준비가 되셨다면 사용해 주셔도 좋습니다. 감사합니다. 꾸벅

TISTORY_BLUECUBE_v1-2_by_Polaris_Australis.7z

이 스킨의 기본형은 3단입니다. 고로 2단 적용하는 방법은:
skin_2column.html과 style_2column.css 파일을 각각 skin.html, style.css로 이름을 바꿔서 업로드하면 됩니다.

ChangeLog - 이전 버전에 대해 바뀐 점

이번 버전은 색상이 추가된것 외에는 큰 변화가 없습니다.

2단 버전 추가
기본형은 3단이지만 몇번의 코드수정으로 간단히 2단으로 트랜스폼되는 구조를 갖고 있었으므로(...) 이번 버전부터 2단 도 만들어서 배포합니다.
색상 바리에이션 제작
라임(Lime)색과 플레인(Plain)이 추가되었습니다. 모든 색상은 한 압축파일로 묶어서 배포합니다.
+ 바이올렛(Violet)버전도 추가되었습니다. 이 버전은 특별히 저해상도에 더 최적화된 버전입니다.
자잘한 디자인 수정

페이징 모양 수정.
+ 글자크기를 좀 줄여봤습니다.
글내용부분과 딱붙어있던 사이드바를 약간 분리했습니다.
포스트 제목의 날짜 표시를 달력 형식으로 바꾸었습니다.
스킨 꼭대기부분의 배경이미지를 없앴습니다. 훨씬 깔끔해보입니다.

스크린샷은 여기서 확인해주세요. 바뀐 점은 거의 없으니까 대충 이렇다고 보시면 됩니...()
http://australis.tistory.com/entry/BLUECUBE11

저작자표시 비영리 변경금지

Posted by 도바토

블루큐브 v1.1 - 티스토리 스킨

스킨 2010. 5. 22. 20:59

티스토리 스킨 - 버전 1.1

블루큐브의 버전 1.1을 공개합니다. 두번째 스킨을 만들다가 때려치고 이 스킨을 다시 잡았습니다.

쓸만한 스킨이 될때까지 발전시키고 업데이트할 예정입니다. 많은 애용과 사랑 부탁드립니다. 굽신 굽신

TISTORY_BLUECUBE_v1-1_by_Polaris_Australis.7z

(재배포는 삼가해 주세요.)

잠깐!! 받아가시기 전에 일단 아래의 문장들을 한번만 확인해주셨으면 하는 바람입니다.

이 스킨을 사용하기 위한 준비물 - 별로 많지 않습니다.

IE6, IE7이 아닌 브라우저를 사용하십니까?
구글 크롬, 모질라 파이어폭스, 애플 사파리 같은 웹표준을 준수한 브라우저들을 말합니다. 이런 브라우저들을 사용해서 제작한 스킨이므로, 사용할 때에도 꼭 필요한 준비물입니다. 혹시 지금 아직도 IE6이나 IE7을 사용중이신가요??
이 스킨을 사용하려면 뒤떨어지지 않는 브라우저가 필요합니다. 구글 크롬 다운로드 파이어폭스 다운로드 사파리 다운로드
나눔글꼴
별것 아닌 스킨이지만 많은 종류의 폰트를 사용하는 스킨입니다. 없어도 상관 없지만, 나눔고딕은 반드시 가지고 있어야 합니다.
절제된 탐구심
부디 skin.html이나 style.css를 무리하게 수정하지 말아주세요.
손가락으로 툭 치면 쓰러질 것 같은 아슬아슬한 모래탑이라, 조금의 코드 수정으로 블로그 전체가 박살날 수도 있습니다.(뻥) 스킨 전문가이시다면 모르겠지만, 거슬리는 점이 있으면 제게 문의해 주세요. 빠른 시간 내에 수정해 드리겠습니다.
기본적인 개념
여러가지 의미의 개념을 말합니다. 스킨을 블로그 관리에서 올려서 사용할 수 있는 지식, 또다른 뜻으로는 index.xml을 마음대로 수정해서 제작자를 조작하거나 하지 않는 것 등입니다.

모든 준비가 되셨다면 사용해 주셔도 좋습니다. 감사합니다. 꾸벅

ChangeLog - 이전 버전에 대해 바뀐 점

2단 → 3단, 가로 사이즈 934px → 1148px
가장 크게 변화된 점입니다. 사이드바가 2개로 분리되어 각각 따로 취급됩니다.
자잘한 디자인 수정

content 영역 안에 들어있던 블로그 메뉴를 밖으로 꺼냈습니다.
블로그 이미지를 사용하는 블로거가 덧글이나 방명록을 달면 블로그 이미지의 테두리가 둥글게 표시됩니다.
(굉장히 조잡한 코드 덩어리입니다. 왠만하면 skin.html을 뜯어보지 말아주세요.)
알록달록(?)한 아이콘들이 추가되어 한층 눈이 즐겁습니다. (-_-)
보기 힘든 블로그 관리 메뉴와 태그트레일의 글씨색을 좀더 보기 쉽게 조절했습니다.
지금이 몇번째 페이지인지 도무지 알 수 없는 페이징 부분을 수정했습니다.
그리고 기타 등등 더욱 마이너한 자잘한 수정사항...

티에디션 위화감 제거
티에디션을 설정하면 배경이 흰색으로 나와 매우 어색한 점을 수정했습니다.
IE6이나 IE7을 사용하는 사람이 블로그에 방문하면 아래의 아름다운 문구를 볼 수 있습니다.
IE6에 대한 호환성 약간 증가
바로 위의 항목에 대해 모순된다고 생각하실지도 모르겠지만, 일단은 가능한 한 많은 사람들에게 좋은 첫인상을 남겨야 할 것 같다고도 생각했기에, PNG 알파채널을 IE6에서도 볼 수 있는 코드를 추가했습니다.
이 글의 맨 위에 있는 로고 같은 게 다음 배포때에도 사용될 것입니다.
직접 그린건데 어떤지 평가좀 해주세요. ()