'티스토리 스킨'에 해당되는 글 6건

SKIN

2012-7-16 업데이트 : 상단 메뉴바 색상이 잘 적용되지 않는 문제 해결

세 번째 화이트 스킨입니다.

위저드를 지원합니다.

기본 이미지는 맥북의 이미지로 되어 있으니까, 마음에 드는 그림으로 바꿔서 사용하시면 될 것 같습니다.

 

이 스킨은 특징이 두 가지 있습니다.

 

첫째는 카테고리 색상입니다.

카테고리에 색상이 들어가 있는데  일일히 집어 넣는 것이 아니라 알아서 색상이 매겨집니다.

 

색상을 바꾸고 싶으면,

스킨 직접 수정에 들어가서 다음과 같은 부분을 찾습니다.

 

var colors = ["#A2BE7B","#FFD600","#93AFBA","#BEAD93","#F69F40","#68A39B","#A4D3E2","#A67AA3"];

 

찾았으면, 따옴표 안의 글자들의 순서를 바꾸거나 단순히 색상코드를 추가하는 것 만으로 카테고리의 색상을 추가할 수가 있습니다.

예를 들어 9번째 카테고리 배경에 검정색을(#000000) 추가하고싶다고 하면,

 

var colors = ["#A2BE7B","#FFD600","#93AFBA","#BEAD93","#F69F40","#68A39B","#A4D3E2","#A67AA3","#000000"];

 

이렇게 하시면 됩니다.

 

나머지 하나의 특징은, 섬네일 지원입니다.

설명해봤자 말만 길어질 것 같고, 스샷을 보여드리면 될 것 같아요.

 

 

이처럼 섬네일을 지원합니다. (다만 갤러리스킨과는 다르게 ie6은 지원하지 않습니다.

따로 견본 웹페이지는 없습니다.

 

다운로드
 


white3-1.zip


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

두 번째 화이트 스킨입니다.

역시 기본형의 스킨이고, 위저드를 지원합니다.

기본 이미지는 고양이 샴푸의 사진으 되어 있으니까, 마음에 드는 그림으로 바꿔서 사용하시면 될 것 같습니다.

기본으로 들어가는 그림의 가로 길이는 1090px입니다.

 
 다운로드는 여기.


 

신고
SKIN

2012/07/15 업데이트 - 티스토리 개편작업으로 인한 상단 메뉴바 기본 크기 수정, 티스토리 전용 툴바 숨기기


메인 페이지의 스크린샷입니다.  갤러리스킨1과 마찬가지로 그림의 크기는 화면크기에 따라 조절됩니다.

 

 

 

페이지 리스트의 스크린샷입니다. (섬네일 지원)

 

 

 

페이지 리스트 하단의 버튼을 누르면 나오는 카테고리 화면입니다. (카테고리와 사이드바가 표시됩니다.)

 

 

 

기본적으로 포스팅의 모든 그림은 하나의 슬라이드쇼에 모이게 됩니다.

네비게이션 버튼은 마우스 오버 섬네일을 지원합니다.

 

 

 

하지만 'Blog' 카테고리에 글을 쓰면 그림이 모여서 배치되지 않으며, 사이드바가 우측에 표시됩니다.

 

 

 

검색결과 혹은 카테고리 리스트는 이렇게 표시됩니다.

 

 

 

네비게이션 버튼도 지원합니다. (마우스오버)

 

 

견본 페이지 -->  http://catnexample.tistory.com/

 

제가 티스토리 갤러리 스킨을 만들면서 가졌던 가장 아쉬웠던 점 중의 하나는,

  1. 섬네일 그림을 보여주는 리스트를 지원하지 않는것
  2. 워드프레스 테마처럼 갤러리와 블로그를 구분해서 보는 것이 불가능한것

 

이었기 때문에, 이 둘을 해결하는데에 가장 큰 중점을 두어서 개발한 스킨입니다.

 

  1. 1번의 경우는 얘기하자면 길지만 하여간에 ajax를 이용해서 해결하였으나,
  2. 2번의 경우는 상당히 제한을 가진 채로 해결할 수 밖에 없었습니다.

 

따라서 본 스킨을 사용하시려면 꼭 설명대로 세팅과정을 따라주셔야 합니다.

  

  1. 티스토리의 신기능 '메뉴 관리'를 사용하고 있다면 미리 메뉴를 모두 지워놓고 저장합니다.
  2. 다운받은 파일의 압축을 풀고 티스토리 메뉴의 '스킨'->  '스킨 선택'  ->  '새 스킨 등록'  메뉴를 이용해  블로그 스킨을 설치합니다.
  3. 티스토리 메뉴의 스킨 -> 카테고리 설정 에서 Blog 카테고리를 추가합니다. ( 대소문자 구분 필요! )
  4. 티스토리 메뉴의 스킨 -> 메뉴 설정에서 BLOG 메뉴를 선택합니다. 이 과정은 새로운 메뉴라 스크린샷을 첨부합니다.
  5. Notice 란은 각자 블로그의 프로필란으로 예정했지만 관련 치환자를 찾지 못했습니다.
  6. '직접 입력' 으로 ' 자기 블로그 주소/notice ' 로 추가해주시면 감사하겠습니다.
    물론 추가하지 않으셔도 무방합니다. 

 ★ 그림 파일을 올릴 때, '사진' 메뉴로 올릴 시 크기를 '크기 조절 안함'으로 하시는 것이 원본 이미지의 크기를 살릴 수 있습니다.★

 지원브라우저는 IE6(일부제한)~ 이후버전,  FF, SAFARI, CHROME입니다.
 OPERA나 기타 브라우저는 디버깅해보지 못했습니다. 죄송합니다. 

이상입니다.

 

스킨 다운로드는 여기


   

gallery2.zip



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

화이트 스킨을 만드려다가 화이트 아닌 스킨을 만들었는데 그냥 화이트 스킨이라고 배포해요.

연습용이 아니라 정식으로 만든 만큼 이전 스킨들과는 달리 속도면에서 만족스러우실거라 생각합니다.


특징은 스킨위자드와 사이드바를 지원한다는 것이고요, 커스텀 메뉴 기능은 없습니다.

왜냐하면 스킨 디자인상 메뉴 넣는 부분이 없어서...


이번에는 화려한 효과를 최대한 자제하고 jquery대신 css3를 좀 사용했기 때문에 

사파리, 파폭, 크롬 등에서 진면목을 느끼실 수 있을거에요.

물론 IE에서도 동일한 레이아웃과 애니메이션을 보실 수 있습니다.

또한 나눔고딕 폰트를 사용했습니다.

설명은 이정도로 하고 스킨 생김새를 볼까요.





대충 이렇습니다.

2011년 7월 7일 현재 사용하고 있는 스킨입니다.


다운로드는




저작자 표시 비영리 변경 금지
신고
SKIN
티스토리 갤러리 전용 스킨 배포합니다...


 


견본 블로그는 
http://gallaryskin.tistory.com/
0804 - 보호글 관련 수정
0810 - 화이트버전 파이어폭스에서의 오류 수정
질문이나 요청사항은 리플에...

검정 버전


화이트 버전


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

스샷은 맥에서 찍어서 폰트빨이 좀 살죠 -0-


강좌를 하려고 견본 스킨을 만들다보니..
하다보니 다 만들어버린 것 같아서 견본용 스킨이지만 그냥 배포합니다.

예제 블로그
http://catntunaexample.tistory.com/

첨부파일 받으시면 됩니다.
스킨위자드 지원.. 그림 자동 리사이즈 지원..
IE6+지원

크롬 파폭 지원(크롬파폭부터 웹폰트 적용)
개조나 배포는 트랙백으로 남겨주세요.
버그신고는 댓글이나 메일로..



저작자 표시 비영리 변경 금지
신고
1
블로그 이미지

린스네 집

고양이와 참치

티스토리 툴바