본문 바로가기

티스토리스킨/반응형3단 스킨

티스토리 스킨 086 - 반응형 3단 트리플 스킨 배포합니다.

스킨 086 : 반응형 3단 트리플


- 반응형 3단 스킨으로 사이드바에 많은 위젯을 표시할 필요가 있을 경우 추천하는 스킨입니다.

- 30가지 이상의 스킨 옵션을 이용해 다양한 디자인으로 변경할 수 있습니다.

- 컨텐츠 표시 영역을 좁게(640px) , 기본(740px) , 넓게(840px) 설정할 수 있습니다.

- 카테고리를 사이드바, 또는 탑메뉴에 위치시킬 수 있습니다.

- 왼쪽 사이드바와 오른쪽 사이드바 위치를 서로 바꿀 수 있습니다.

- 다양한 커버 타입을 지원하는 커버 페이지를 만들 수 있습니다.

- 스킨에 포함된 index.xml 파일과 images 폴더 안의 script.js 파일을 업로드해야 스킨 레이아웃이 정상 동작합니다.

 

 








스킨 옵션 설정

 

스킨 옵션 설정에 대한 상세한 설명은 ->스킨 옵션설정 글을 보시기 바랍니다.(일부 옵션 항목은 제외되어 있습니다.)






A. 사이드바 좌우 위치 반전





B. 카테고리 위치 변경





C. 컨텐츠 영역 너비 설정





 

패치 내역

 

  • 없음












설치 주의사항

 

  • 스킨 적용시 index.xml, script.js 파일을 반드시 업로드해야 스킨이 정상 적용됩니다.
  • 파일 업로드 후에는 웹브라우저 캐시를 한번 소거해야 바로 스킨이 정상 반영됩니다.




  • 먼저 이런 스킨 배포해주셔서 감사합니다.
    그런데 궁금한 게 있는데요...
    저는 2단으로 쓰고 싶어서 오른쪽 사이드를 안보이게 했거든요.
    필요한 것만 왼쪽으로 옮기고요.
    그리고 나니 휭해서요 모니터에 맞게 내용부분을 넓히고 싶은데 어떻게 해야 하나요??
    알려주시면 감사하겠습니다~~

    • 3단 전용 스킨입니다.
      2단으로 강제 수정하면 레이아웃 손을 많이 봐야 합니다.

      082 2단 대시보드 스킨
      https://apost.kr/462

      매거진B 스킨
      https://apost.kr/391?category=798147

      정도를 추천합니다.

      그외에 2단이 유사한 스킨이 많으므로 그걸 추천합니다.

      구지 강제로 조정해 쓰겠다면
      아래 몇가지 설정 조정을 통해
      컨텐츠 영역을 강제로 넓혀줄 수는 있습니다.
      스킨 원본 style.css 기준

      1.
      1057행(#content)
      width: 100%
      속성 삭제

      2.
      스킨 원본기준 1055행 ~ 1067행의

      max-width:

      속성값 숫자에
      280을 더해주면 됩니다.
      현재 스킨 옵션 설정으로는
      .wide-content #content
      클래스가 직접 영향을 줍니다.(이 클래스의
      max-width 속성을 1100으로 조정합니다.)

      3.
      그리고 현재 좌우 사이드바를 반전해서 안보이게한 왼쪽 사이드바를 아얘 안보이게 해야합니다.

      785행
      .sidebar-left.sidebar
      클래스에
      display: none;
      속성을 추가합니다.

  • 감사합니다~~

  • 좋은 스킨을 배포해주셔서 감사합니다.

    글을 보고 따라해서 적용하였는데, 카테고리 위치를 사이드바로 변경하였는데 카테고리가 표시되지 않네요. 혹시 왜 그런지 알 수 있을까요?

  • 배포해주신 스킨 잘 쓰고 있습니다. ^^
    그런데 질문이 있습니다.
    글 목록을 보면 글 제목 있고 그 아래줄에 날짜가 나오잖아요.
    날짜를 다음 줄이 아닌 제목과 같은 줄 오른쪽 끝에 맞춰서 나오게 하려면 어떻게 해야 하나요?
    html에서 <div class="article-info"> 이 부분을 수정하면 될 것 같은데 잘 모르겠습니다..

    그리고 코드를 복사해서 올리면 일부분이 지워져서 보이는 건 왜 그런건가요??

    <div class="article-info">
    <span class="title"></span>
    <s_if_var_view-thumbnail-date>
    <span class="date">
    <s_if_var_short-date></s_if_var_short-date>
    <s_not_var_short-date></s_not_var_short-date>
    </span>
    </s_if_var_view-thumbnail-date>
    <s_if_var_view-thumbnail-excerpt>
    <span class="excerpt"></span>
    </s_if_var_view-thumbnail-excerpt>
    </div>

    위 코드에서도 [## _article_rep_date_##]은 표시가 안됩니다.

    • 1
      스킨 치환자는 티스토리 시스템 레벨에서 차단되어 있습니다.
      샵샵 으로 변경해서 올려야 합니다.


      2.
      날짜 표시 위치 조정은

      style.css

      1974행
      .post-item .title 클래스

      display: block -> inline-block; 으로 변경

      display: -webkit-box; 삭제(필수)

      max-width: 220px; 추가-이 너비는 옵션 설정에서 컨텐츠 영역으로 설정한 너비값에서 -400px 정도를 한 값이 됩니다.
      제목이 길어지면 날짜와 겹쳐지기 때문에 강제로 잘라내기 위한 것입니다.
      잘라내지 않고 제목이 줄바꿈으로 모두 표시되게 해주려면
      overflow: hidden; 을 삭제해주면 됩니다.


      2011행
      .post-item .date 클래스

      display: block; -> inline; 으로 변경
      float: right; 추가
      margin: 0 0 10px; -> margin: 3px 0 7px;로 위아래 간격 조정 변경


      하면 날짜가 오른쪽 끝으로 정렬되어 붙습니다.
      css 특성을 이용한 일종의 신박한 트릭인데 보통은 이렇게 글 흐름과 무관하게 배치하는게 그렇게 권장되지는 않습니다.

    • ie에서는 브라우저 구조적인 문제로 제목 글자(한글)가 잘려보일 수 있습니다.

  • 감사합니다~~~


닫기