본문 바로가기

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

티스토리 스킨 - 반응형 빅박스 2단 티스토리 스킨 배포합니다.

스킨명 : 반응형 빅박스 2단 티스토리 스킨



- 사이드바가 왼쪽에 고정된 박스 레이아웃을 가진 반응형 스킨입니다.


- 풀화면을 채우는 레이아웃 구조를 가지고 있으며, 브라우저 너비가 넓어지는데 따라 레이아웃이 변경됩니다.


- 커버 페이지는 썸네일리스트 커버를 사용해 제작되었습니다.


- 5개의 컬러 테마를 제공합니다.


- 박스 영역에 그림자 효과를 옵션으로 지정할 수 있습니다.



기타 특징


1. 티스토리 커버 기능 전체 지원

2. 반응형 스킨으로 모바일 완벽 지원

3. 벡터 스킨 아이콘 사용으로 화면 해상도와 무관하게 고화질 아이콘 표시. 아이콘 이미지 업로드 불필요

4. 메인 커버 슬라이더 자동 스크롤 지원

5. 스킨에 사용한 글꼴은 구글 오픈 글꼴인 노토산스KR과 노토셰리프KR 입니다.




패치리스트

----------------------------------------------------

2019-04-20 1.0.2 Pach - 메인 커버 썸네일 목록에서 리본과 제목이 겹쳐 보이는 버그 패치

2019-04-16 1.0.1 Patch - IE에서 컨텐츠 영역이 밀려서 아래로 내려가는 버그가 있어서 패치

----------------------------------------------------







스킨 레이아웃이 브라우저 화면 전체를 채웁니다. 

큰 레이아웃을 원하는 블로거에게 적합한 스킨입니다.
(반응형 스킨이므로 브라우저 너비가 좁으면 모바일/타블렛 대응 화면이 보이게 됩니다.)














설치 주의사항


1. index.xml 파일을 반드시 업로드해야 합니다. 티스토리 신스킨은 스킨 옵션 설정을 위해 반드시 이 파일이 필요합니다.


2. script.js 파일 업로드 후에는 웹브라우저 캐시 소거를 한번 해주시기 바랍니다. 브라우저 환경에 따라 구 사용 스킨의 자바스크립트 파일이 캐시에 남아 자바스크립트가 정상 동작하지 않는 경우가 있습니다.

사이드바 메뉴가 펼쳐지지 않는다거나 할 경우 캐시 소거를 하면 됩니다.




029_bigbox.zip


스킨 다운로드
스킨 설치 방법



  • 너무 예쁘네요!!

  • *^^*/

  • 올리브 2019.04.17 12:13 댓글주소 수정/삭제 댓글쓰기

    안녕하세요! 스킨 잘 적용해서 뿌듯했는데 크롬 브라우저에서는 완벽하게 적용됐는데 익스플로러에서 들어가니 뭐라고 해야하나.. 썸네일이나 본문 표시되는 넓은 공간이 저 아래로 밑으로 내려가있어요 ㅜㅜ 어떻게 해야될까요? 사이드바는 정상적인 위치에 나와요!! 제가 무얼 잘못한걸까요 ?!?

    • ie에서만 나타나는 버그입니다.
      정확하게는 ie의 버그로 인한 호환성 문제인데 제작 당시에는 미처 확인이 안되었습니다.

      스킨 원본 기준 style.css
      675 ~ 683행을

      #content{
      position: relative;
      display: block;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      padding: 30px;
      box-sizing:border-box;
      float: right;
      width: calc(100% - 330px);
      }
      로 변경하면 됩니다.
      새부적으로는

      681행
      margin-left: 300px;
      삭제

      682~683행 사이에
      float: right;
      width: calc(100% - 330px);
      추가
      된 것입니다.

      사이드바와 컨텐츠 영역간의 간격이 다소 좁아보여 30px 간격을 더 주어 330px로 맞췄습니다.( 기존은 300px 였습니다.)

      스킨은 패치되어 있습니다.


    • 너무 예쁩니다!!!! :) 잘 수정되었어요! 좋은 스킨 감사합니다~

  • 비밀댓글입니다

    • 스킨을 다른 걸로 이미 변경하신 듯 싶지만...

      1798 ~ 1799행 사이에
      (또는 .entry-content 클래스를 찾아서 그 뒤에 추가해줘도 되겠습니다. 어디까지나 관리상 편의를 위해...)

      .tt_article_useless_p_margin{
      max-width: 960px;
      margin: 0 auto;
      }


      이렇게 넣으면 컨텐츠 보기 글이 960px 너비로 제한되고
      좌우 여백이 생겨 보이게 됩니다.
      숫자값은 원하는 크기로 적당히 맞춰주시면 되고...

      좌우 여백 없이 왼쪽에 붙어보이게 하려면
      margin: 0 auto;
      요 속성을 지우면 됩니다.

      내용 자체를 텍스트가 센터 정렬이 되어 보이게 하려면
      text-align: center;
      를 위 클래스에 더 넣어주면 됩니다.

      제가 만들어 배포하는 스킨은 대부분 기본 구조가 동일하기 때문에 다른 스킨에도 그대로 적용해서
      글 너비를 조정할 수 있습니다.

    • 헉 다시 변경하러 갈것입니다 ㅠㅠ 페이지가 커서 좋았고 스킨자체가 너무 예뻐서 바꾸기싫었는데 기존에 작성한 본문이 너무 흐트러져서 신경이쓰이던차에 방금 다른것우로 바꾸었는데 이렇게 친절히 알려주시고 정말 감사해요!!!!! >_<b 예쁘게 쓰겠습니다~

    • 지금 적용된 것도 예쁘고 좋아보입니다.

      다른 스킨인 경우
      위 내용 너비조정 클래스가 적용 안되면

      아마
      .tt_article_useless_p_margin{

      대신
      .entry-content > .inner{
      아니면
      #content > .inner{
      를 찾으면 css가 있을거고

      max-width: 960px;

      속성 정도를 추가해주면
      대부분 다 맞을겁니다.

    • 오... !!!!!!!!!!!!정말 감사합니다!!! ^_^bb

    • 캬 드디어 적용 다 했는데 너무 맘에 들어요 오랫동안 스킨 바꿀일 없을 것 같아요 ㅋㅋㅋ 복 받으세요!!

    • 마음에 드셔서 저도 기쁩니다.^^/

    • 2019.04.20 02:01 댓글주소 수정/삭제

      비밀댓글입니다

    • 버그입니다.
      ie만 따로 위치 잡는 코드를 더 넣어합니다.

      스킨 원본기준
      889행에

      display: block;

      한줄을 추가해주어야 합니다.

      클래스로는

      .cover-thumbnail-list ul li .title

      요걸 찾아서 그 안에 넣어주시면 됩니다.

      커버 썸네일 리스트에만 누락되어 나타나는 현상이고 카테고리 목록에서는 정상 적용이 되어 있습니다.

    • 정말 능력자십니다! >_< 잘 해결되었어요 감사합니다.