본문 바로가기

티스토리 스킨 배포/WhiteCloud

[WhiteCloud1.1] 티스토리 스킨 배포 (오류 수정)


인지 다운받아 가신분은 없는 듯 하네요. (T_T) 혹시 다운 받아가신 분이 있다면 새 버전을 새로 업로드해서 적용하시면 됩니다. (스킨 파일을 받아 html, css 소스만 복사해서 적용해도 되지만 차후에 다시 스킨을 적용할 때 또 이런 작업을 반복 해야하는 번거로움이 있을 수 있어요.) 공부를 시작한지 얼마 안된 새내기다보니 디자인이나 크로스브라우징 외 자잘한 부분들에서 조금씩 문제가 보이는 것 같아요. 최대한 발견되는 문제는 해결해서 업데이트 하겠습니다~ 제보해주세요^^

1.0버전에서 브라우져별로 레이아웃이 깨지는 등 크로스브라우징에 문제가 보여 급하게 수정해서 다시 올립니다. 다행인지 불행


사용하시던 스킨은 반드시 백업을 해두시기 바랍니다.

 

블로그 본연의 용도로 사용하기 좋게 최대한 깔끔한 신문처럼 만들려고 노력했습니다.


단축키 사용으로 페이지를 편하게 열 수 있습니다.

[Alt] + a = 관리자 페이지 열기

[Alt] + t = 티스토리 홈페이지 열기

[Alt] + q = 스킨 수정 페이지 열기

[Alt] + w = 글쓰기 페이지 열기

(accesskey 브라우져 별로 사용 안될 수 있음)


HTML5 와 CSS3 에 근거해 제작했고, 익스플로러(9버전, 10버전, 11버전) 오페라(버전18) 파이어폭스(26버전) 크롬(31버전) 사파리(버전5) 스윙브라우져 에서 정상작동을 확인했습니다.

익스플로러 버전8 이하의 버전에서는 스킨을 제대로 출력할 수가 없습니다.


ver 1.1

- 스킨 전체를 둘러싼 하얀 테두리에 여백이 너무 큰 것 같아 여백을 절반으로 줄였습니다.

- 익스플로러, 파이어폭스 등에서 레이아웃이 밀려 내려오는 현상을 해결했습니다.

- 기타 불필요한 공간을 최소화 시키고 색상을 일원화 하였습니다.

 

스킨 백업하기

http://notice.tistory.com/1777


스킨 적용하기

http://notice.tistory.com/1776

http://www.tistory.com/forum/viewtopic.php?id=197

 


스킨 미리보기

http://moksunung.tistory.com


스킨 다운로드

WhiteCloud1.1.zip



  • Favicon of https://goodbyeandhelloo.tistory.com BlogIcon 더쏭 2014.01.17 17:58 신고

    오! 멋져요~ 감사히 사용하겠습니다. 꾸벅_ '-'*/

  • Favicon of https://mnetv.com BlogIcon 홍정석 2014.01.18 08:50 신고

    혹시 상단에 처음으로 태그로그.. 이것을 카테고리 드롭다운 메뉴로 바꿀려면 어떻게 하면 좋을까요.
    티스토리 스킨 정말 예쁘네요. 고맙습니다.

    • Favicon of https://iconsketch.com BlogIcon 구름강아지 2014.01.18 14:43 신고

      안그래도 http://skincenter.tistory.com 에서 새로운 스킨 만들면서 카테고리를 빼버리는 걸 연구중이에요 드롭다운이나 푸쉬다운 같은걸 하게될거같은데... 결정되면 화이트버전에도 사용할게요 감사합니다 ^^

  • Favicon of https://moongomstudio.tistory.com BlogIcon MoonGom 2014.02.10 02:17 신고

    너무너무 예뻐요 특히 현재 구름강아지님이 사용하고 계신 스킨은 더더욱 예쁘네요 ㅎㅎ
    오늘 드디어 티스토리 초대장을 받아서 바로 개설했는데 덕분에 첫 스킨을 깔끔하고 이쁘게
    시작할 수 있을 거 같아요 ㅎㅎ 잘 쓸게요 감사합니다 !!

  • Favicon of https://whiteflowers.tistory.com BlogIcon 자몽잉 2014.02.19 01:41 신고

    오 깔끔하니 예뻐요 감사합니다~

  • 알 수 없는 사용자 2014.03.11 18:59

    너무너무너무너무 예쁩니다! 감사합니다~

  • Favicon of https://pannajuti.tistory.com BlogIcon June & Jane 2014.05.29 00:37 신고

    고마워요. 이런 분들이 계시네요 ^^
    제가 딱 찾던 스킨이예요. 잘 쓰겠습니다.
    감사합니다.

  • 알 수 없는 사용자 2014.05.29 16:17

    깔끔해서 좋아요 잘 쓸게요 ^^

  • 알 수 없는 사용자 2014.06.19 21:17

    안녕하세요. 잘쓰고 있습니다. 하지만
    본문폭은 어떻게늘리나요?

    • Favicon of https://iconsketch.com BlogIcon 구름강아지 2014.06.20 12:32 신고

      안녕하세요 ^^ 사용해 주셔서 감사합니다.
      본문 가로 폭을 늘리기 위해서는 style.css 파일을 열어서 수정하시면 됩니다.
      --------------------------------------------------------------------------------------------
      1. 전체 박스의 크기 변경하기
      아래의 요소들을 ctrl + f 로 검색해서 찾습니다.
      원하시는 크기로 변경하시되 아래 모두 동일한 크기로 변경합니다.

      .main-wrap {
      width: 950px;
      }

      nav {
      width:950px;
      }

      header {
      width: 950px;
      }

      footer {
      width: 950px;
      }
      --------------------------------------------------------------------------------------------
      2. 본문 넓이 변경하기
      마찬가지로 아래의 요소들을 찾아서 원하시는 동일 크기로 변경해줍니다.

      section {
      width: 714px;
      }

      .article {
      width: 715px;
      }
      --------------------------------------------------------------------------------------------
      3. 오른쪽 사이드 메뉴 넓이 변경하기
      아래의 요소를 찾아서 원하시는 크기로 변경해줍니다.

      aside {
      width: 250px;
      }
      --------------------------------------------------------------------------------------------

      주의 하실 것은 [2번 본문 넓이]와 [3번 사이드 메뉴 넓이]의 합이,
      [1번 전체 박스의 넓이] 를 초과하게 되면 초과된 크기만큼 사이드메뉴가 오른쪽으로 밀려서 가려지게 됩니다.

      즉, 1번~3번 크기는
      [2] + [3] ≤ [1]
      이렇게 해줘야 합니다 ^^;; 이해가 되실런지 모르겠네요.
      해보시고 안되면 다시 댓글 주세요~