toPiece_v3.1.1 update 티스토리 스킨 업데이트



티스토리 스킨 toPiece_v3.1.0 업데이트 내역 공유합니다.


toPiece_v3.1.1 업데이트 내역

 - 카테고리 숨김/펼침 기능 추가


지난주 Tistory 커뮤니티 포럼에 필드Joan님이 올린 글(http://www.tistory.com/community/forum/skin#entry_intro_6412)을 보고

필요한 기능이라 판단 되어 업데이트 공유합니다.



toPiece_v3.1.1 update 티스토리 스킨 업데이트



toPiece 3.1.1 버전 업데이트는 카테고리의 하위메뉴 유/무 체크 후, 하위메뉴가 있을 시 위 캡쳐 이미지처럼 오른쪽에 위-아래 화살표 아이콘이 생깁니다.


방법은 skin.html 에 하나의 class를 추가하기만 하면 됩니다. 첨부된 skin.html 파일 내 아래의 주석을 찾으시고

<div class="categorylist"><!-- 카테고리 숨김/펼침 기능 사용은 왼쪽 class에 'open' 추가 -->


위 내용을 아래처럼 변경하면 자연스레 적용이 될 것입니다.

<div class="categorylist open"><!-- 카테고리 숨김/펼침 기능 사용은 왼쪽 class에 'open' 추가 -->


다시 open을 빼면 카테고리가 펼쳐진 형태가 될 것입니다.


보다 나은 아이디어는 언제나 고맙습니다.



toPiece 3.1.1 버전은 아래 파일을 다운로드 하시면 됩니다.



toPiece_v3.1.1.zip




* 주의 : 스킨을 이미 커스터마이징 하신 분들은 수정 내용들을 꼭 백업을 해두시고 스킨 적용하시길 바랍니다.


저작자 표시 비영리 동일 조건 변경 허락
신고
  • 이전 댓글 더보기
  • 김안녕 2016.04.30 21:58 신고

    안녕하세요! 배포해주신 스킨 정말 감사합니다!
    다름이 아니라 게시판 부분만 남겨둔채 주변 디자인 부분을 제가 제작한 디자인으로 수정하고 싶어서 이렇게 댓글 드립니다!
    하단 카피라이터 skin by toDiva. 부분만 따로 넣어서 디자인 부분만 제가 따로 수정해도 될까요?:)

    확인 후 댓글 부탁드립니다! 좋은 하루 보내세요 ^~^

    • BlogIcon toDiva 2016.05.02 08:47 신고

      좋은 아침입니다. 주말이어서 답변을 빠르게 드리지 못했습니다.
      말씀하신대로 수정하셔도 괜찮습니다.

  • BlogIcon by_color 2016.05.03 21:32 신고

    고맙습니다. 이렇게 좋은 스킨을 만들어 주셔서 감사히 쓰고 있습니다.
    스킨 때문에 많은 고민을 했었는데 이 스킨이 사진가들을 위한 스킨이라는거 엊그제 검색하다가 우연히 알았습니다.
    스킨 올리실때 페이지를 올리셔서 몰랐다는....^ ^;;

    유용하게 수정도해서 잘쓰고 있습니다만 다음 버전에서는 검토해 보셨으면 하는거 문의합니다.

    1) 웹화면에서는 썸네일이 가로로 3개 나오는데 만약 7줄로 한다면 21개가 됩니다.
    그런데 티스토리 어플이 아닌(어플은 1개씩 표시됨) 일반 모바일 브라우저로 보면 가로 2개씩 썸네일이 보이거든요?
    그러면 하나가 남게됩니다. 이빨이 빠져서....
    다음번 업데이트시 모바일은 그냥 10개나 14개 등 짝수로 아예 고정하시면 어떨까요?
    모바일 화면에서 2개씩이 1개씩 보이는것보다 제 관점에선 보기가 좋긴합니다.

    2) 블로그 접속시 같은 IP라면 접속 카운터도 하루 하나로 올라갔으면 싶습니다.
    다른 스킨을 써봤을때는 그러지 않은거 같더니 이 스킨은 제가 접속을 두번해도 두번 다 올라가네요.
    혹여, 이게 스킨 문제가 아닌 티스토리 문제 인가요?
    잘 몰라서......^ ^;;

    아무튼 이쁜 스킨 무쟈게 잘 사용하고 있습니다.
    감사합니다.

    • BlogIcon toDiva 2016.05.04 08:39 신고

      안녕하세요 by_color님 ^^
      답변드리겠습니다. 티스토리 스킨 치환자랑 구조가 topiece 스킨이랑 조금 달려져서 다음 버전은 없을 거 같습니다.
      1) 짝수. 좋은 의견이네요. PC화면이랑 모바일 화면에서 썸네일 갯수, 그 부분은 정말 생각지도 못했습니다. 지금 짬짬히 디자인 중인 스킨에 꼭 반영시킬께요. 고맙습니다. ^^

      2) 지금 막 해본 테스트에선 카운트가 되지 않는거 같은데.. ^^;;
      카운트 문제는 스킨에서 처리하는 부분이 아니어서 티스토리에 문의가 필요해 보입니다.

  • BlogIcon yukoya 2016.05.04 17:26 신고

    안녕하세요.
    스킨이 정말 이쁘네요. 왜 이 스킨이 티스토리에 없는건지...
    다름이 아니라 어제 스킨을 적용해보고 여러 가지 테스트를 해보던 중 문제가 있어서 이렇게 글을 남깁니다.

    애드센스라고 아시죠? 블로그에 붙어있는 광고입니다.
    topiece 스킨을 적용 후, 다른 브라우저는 괜찮은데 익스플로러에서 이 애드센스의 오른쪽이 짤리는 현상이 생깁니다.
    이 현상이 생기는 애드센스는 가로로 길쭉한 모양인 리더보드 형식의 광고입니다.




    원인을 찾으려고 여기 댓글을 다신 분들 중 topiece 스킨을 적용한 사이트들을 많이 찾아다녔는데요.
    topiece 스킨을 적용한 사이트 중, 익스플로러로 방문했을 때 두 가지 형태로 화면을 뿌려주는 것을 발견했습니다.
    (테스트한 버전 익스플로러 10, 11)

    첫 번째는 크롬이나 파이어폭스처럼 팍하고 화면에 나타나는 형식이고, 애드센스에 문제가 없었습니다.
    이분들처럼 http://www.compunik.net/category
    http://hoof34.tistory.com/category

    두 번째는 오른쪽에서 왼쪽으로 글자나 레이어?들이 이동하는 형식으로 나타나는데, 이때 위에서 말한 가로로 긴 모양의 애드센스 광고도 같이 이동하다가 끝이 짤리면서 표시됩니다. 제가 사용할 때 이런현상이 있습니다.
    이분들처럼 http://lifephobia.tistory.com/category
    http://pritaa.tistory.com/category
    참고로 텍스트 광고는 괜찮고 이미지 광고들이 그렇습니다.

    이렇게 되면 애드센스라는 광고의 정책에 위반되서 계정이 정지될 수 있거든요.
    어제 topiece 스킨을 적용한 많은분들의 사이트를 찾아봤는데, 많은 분들이 이런 형식으로 광고가 짤리는걸 봤습니다.



    이 스킨이 마음에 들어서 사용하고 싶은데, 혹시나 싶어서 해제하고, 이전스킨을 적용 중입니다.
    첫 번째 처럼 화면에 팍 뿌려주는 형식으로 사용하고 싶은데, 원인을 알 수 있을까요?



    글이 너무 길어서 죄송합니다.





    • BlogIcon toDiva 2016.05.04 18:31 신고

      안녕하세요 yukoya님.
      먼저 제가 애드센스에 대해 무지합니다. 줏어들은 정보 정도의 지식만 가지고 있습니다.
      일단 가장 사이즈의 종류가 728px, 970px 등등으로 알고 있습니다.(틀리면 정정해 주세요)
      그리고 예시로 알려주신 곳은 모두 970px 짜리가 topiece 스킨으로 인해 900px로 노출이 되고 있습니다.

      900px 사이즈는 본 스킨의 1200px 미디어쿼리 작용으로 나타납니다.(topiece 스킨의 기본 본문 사이즈는 720px)
      기본 본문 720px 가 구글 애드센스 광고배너의 728px 보다 8px 작죠. 이부분은 직접 CSS 코드 수정하시면 금방 해결이 되실듯 하구요. 예시로 보여주신 배너들은 1200px 미디어쿼리 작용으로 보여지는데 화면을 줄이시면서 본문 사이즈로 변경이 되는거죠.
      짤려보이는것이 불안하시다니 기본 본문 사이즈 변경(700px --> 900px)은 어떤가요. 더불어 미디어쿼리 1200px 부분들은 삭제.
      나머지 미디어쿼리들은 모바일 접속으로 보여지는 사이즈들이니 애드센스 광고배너 자체가 모바일용으로 나타날테니 걱정마시구요.

      그리고 팍! 이랑 이동하는 모션은 애드센스 광고 정책이랑 무관하니 걱정 안하셔도 될 것입니다.

  • BlogIcon yukoya 2016.05.04 19:16 신고

    빠른 답변 감사드립니다.
    제가 질문의 요지를 정확히 적지 못해서 잘못 전달된 것 같아요 ㅠㅠ

    애드센스의 문제는 부가적인 것이고, topiece 스킨을 적용한 블로그의 화면이 모니터에 뿌려지는 방식을 말하는 것이었습니다.



    좀 더 말씀을 드리면, 위에서 말한 첫 번째 경우는 본문의 내용이 본문 틀이 있는 제자리에서 로딩되어 나타나고, 두 번째의 경우는 본문의 내용이 본문 틀의 200~300px 오른쪽에서 로딩된 후, 왼쪽으로 이동되는 현상을 말하는 겁니다. 이때 애드센스도 같이 로딩되서 본문 틀이 있는 왼쪽으로 이동하다가 끝부분이 짤리는 걸 말한겁니다 ㅠㅠ



    글로 설명해서 잘 이해가 안되실 수도 있겠네요.
    안되면 제가 나중에 영상을 찍어서 다시 질문 드리도록 하겠습니다.

    • BlogIcon toDiva 2016.05.04 19:40 신고

      제가 이해를 잘못했나 봅니다. 답답하셨겠어요. ㅜㅜ

      블로그 접속 시, 모든 내용이 로딩되어 짧은 시간에 모니터에 뿌려지는(이동되며) 현상을 말씀하시는거군요. 저도 그 현상을 의도하여 CSS를 만들었습니다.
      하지만 그 부분만 삭제 가능합니다. 삭제하면 이동되며 노출되지 않을것입니다.

      style_topiece_v01.css 파일을 열면 40, 41 줄에 아래 내용이 있습니다.

      a,.reply_write input.submit,.section_1, .section_2,.section_2 .sidebox form input,.fixed_img_col li,.fixed_img_col .thumb img,.fixed_img_col .thumb #str,.fixed_txt_col a:hover strong,.comment_list ul .commentLi:hover .control,
      #header .head_top,.section_1 #article blockquote { -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; }

      위 내용 모두를 삭제하셔도 되고, 본문과 사이드 영역인 ".section_1, .section_2," 만 삭제하셔도 될 것입니다.

      이번엔 제가 제대로 이해를 한 것이길 바래봅니다.

  • BlogIcon yukoya 2016.05.04 22:02 신고

    너무 번거롭게 하는 거 같아 죄송한 마음입니다. 스킨이 너무 마음에 들어서...




    알려주신대로 위의 내용을 삭제한 후 적용했더니 포스트 제목을 클릭해서 다시 본문을 불러올 때와 하단의 카테고리 다른글을 클릭해서 불러왔을 때는 해결이 됐습니다.

    그러나 처음 블로그에 접속했을 때와 카테고리 이미지를 클릭했을 때의 로딩은 해결되지 않아, 영상을 보여드리기 위해 유튜브에 올렸습니다만.... 글을 적는 중에 다시 확인해보니 완벽하게!! 해결이 되었습니다.




    정말 님은 멋쟁이 짱짱 입니다.
    이렇게 꼼꼼하게 답변해주시는 것도 너무 고맙고, 정말 이 고마움을 표현할 길이 없네요.

    어제 문제가 생기고 topiece 스킨의 댓글들을 많이 봤습니다.
    굉장히 많은 분들이 댓글을 다셧고, 귀찮아 할 법도 한데 많은 부분에서 꼼꼼하게 답변을 다시는 모습이 인상적이었습니다.

    이렇게 잘 만든 스킨을 사용할 수 있게되서 너무 감사하고,. 티스토리 스킨란에 왜 없는건지 이해가 안되네요.
    많은 분이 todiva님의 정성이 담겨있는 이 스킨을 사용하셨으면 하는 바람입니다.

    스킨도 감사하고 답변도 정말 감사합니다.
    todiva님의 앞날에 좋은 일만 생기길 기원합니다.




    마지막으로 혹시 저 코드를 지움으로써 제가 기능적으로 불이익을 받는 건 없겠죠? ^^;;

    • BlogIcon toDiva 2016.05.04 22:29 신고

      네 아무 문제 없습니다. 해결되었다니 참 다행이군요. 내일 어린이날 즐거이 보내시길~

  • BlogIcon HA팀장 2016.05.06 14:16 신고

    안녕하세요. 투디바 님, 덕분에 스킨 정말 잘 쓰고 있습니다. 감사합니다.

    카테고리 리스트를 펼침, 숨김으로 전환하려고 합니다. 근데 안 되네요.ㅠ (

    '관리자 > HTML/CSS' 편집'에서

    <div class="categorylist"><!-- 카테고리 숨김/펼침 기능 사용은 왼쪽 class에 'open' 추가 --> 이 부분을 찾아

    <div class="categorylist open"><!-- 카테고리 숨김/펼침 기능 사용은 왼쪽 class에 'open' 추가 --> 이렇게 바꾸고 그냥 저장했는데

    적용이 안 되네요.ㅠ

    추가로 더 해야 하는 게 있나요? 제가 HTML/CSS에 대해서 완전 무지해서 잘 모르겠네요.ㅠ

    감사합니다.

    • BlogIcon toDiva 2016.05.06 14:14 신고

      안녕하세요 HA팀장님.
      비밀글에는 답변을 달지 않으려 합니다. 방문하시는 다른 분들이 내용을 볼 수 있게 풀어주세요.
      테스트 블로그에서 적용 시 잘 됐습니다. http://topiece.tistory.com/category

      하지만 HA팀장님 블로그를 살펴보니 JS, CSS 파일 별 문제 없는데 적용이 안되고 있네요. 번거롭겠지만 script_core.js , style_topiece_v01.css 파일을 새로 받으셔서 재업로드 후, 다시 한 번 새로고침 해보시겠어요?

  • BlogIcon The 노라 2016.05.10 10:27 신고

    스킨이 참 이쁘고 실용적이예요. 감사히 잘 쓰겠습니다. ^^*

  • BlogIcon 왕발 ʕ•̀ω•́ʔ✿ 2016.05.11 17:30 신고

    디바님 죄송하지만, 어느 순간부터 갑자기 하단부에 < > 가 생겼습니다.

    왜 생기는건지 알 수 있을까요..? ㅠ

  • BlogIcon Klahan 2016.05.13 19:50 신고

    정말 감사합니다(__)!

  • BlogIcon 한빛법무사사무소 2016.05.16 11:45 신고

    안녕하세요.

    멋진스킨 제공해주셔서 정말 감사합니다.
    한가지 문의드릴 부분이 있습니다. 스킨 3.1.1 버전 받아서 설치하였는데
    카테고리 만들고 테스트로 컨텐츠 넣어봤는데 썸네일이 적용이 안되고 그냥 게시글만

    순서대로 노출이 되고 있습니다. 카테고리 클릭 시 게시글 순서대로 썸네일 적용하려면 어떻게 해야하는지 문의드립니다.

  • BlogIcon Klahan 2016.05.18 18:43 신고

    안녕하세요 디바님~
    제공해주시는 스킨 정말 감사하게 사용하고 있습니다 ^^
    질문이 있어 댓글남겨요~

    제가 메뉴를 많이 사용하다 보니 웹에서 볼때, 블로그 이름과 메뉴가 겹치는 현상이 생기네요..
    메뉴버튼들을 블로그 이름 아래로 내리려면 어떻게 수정해야 하나요 ㅠㅠ?

    그리고, 모바일에서 메뉴버튼을 눌렀을 때, 나오는 메뉴들을 가로가 아닌 세로로 바꿀 수 있는지 궁금합니다.

    항상 감사한 마음으로 사용하겠습니다. (__)

  • BlogIcon 카이사르&키케로 2016.05.24 23:45 신고

    안녕하세요.

    스킨 너무 정말 감사하게 잘 쓰고 있습니다.
    이렇게 잘 사용하고 있는데, 이렇게 부탁드리려니 죄송하네요.

    카테고리를 선택하면 카테고리에 해당하는 글들의 이미지들이 펼쳐져서 보여지는데,
    제 블로그에는 그게 왜 적용이 안되는지 문의드립니다.
    제가 어떤 부분을 잘못했는지 잘 모르겠네요.

    감사합니다. ~! 덕분에 블로그 활동이 많이 좋아졌습니다.

  • BlogIcon 간티 2016.05.25 21:32 신고

    안녕하세요~!! 이 스킨 다운받고 정말잘 사용중입니다 ㅠㅠ너무예쁩니다 ㅠㅠ스킨 설정중에 궁금한점이 있어서 문의드립니다 혹시 이 스킨에는 티에디션이 적용이 되지 않나요? 메인 화면에 사진을 지정하고싶어서 티에디션을 설정하려고 했는데 티에디션설정하기를 해도 뜨지않더라구요 ㅠㅠ 티에디션설정이 불가한 스킨인가요..! 아니면혹시 제가 글에서 놓친부분이 있나요 ㅠ

    +
    설정에서 티에디션 설정하기 버튼을 누르면 그냥 홈페이지로 돌아와버립니다 ㅠ 다른 스킨은 적용이 잘 됩니다.......!
    ++
    그리고 확인해보니 html수정 페이지에서는 티에디션 설정한 모습이 뜨는데 그냥 홈에 바로 들어가면 안뜨네요 ㅠㅠㅠ 다른 컴퓨터로 해도 똑같아서 스킨적용 문제인것같아 이렇게 글남기고갑니다!

  • BlogIcon 강가이버 2016.05.31 00:44 신고

    최고의 스킨입니다!!게다가 무료라니..대박이네요ㅎ...이제 더이상 스킨을 찾아 해멜 일이 없을거 같아요. 정말 감사합니다.

  • 스킨 2016.05.31 01:56 신고

    계속 사용하던 스킨 잘못 건드렸다가 다시 초기화 하려고 보니 예전스킨이라 삭제되서 없어졌더라구요 ㅜㅜ
    올려주신 스킨 잘 사용하겠습니다 ㅜㅜ

  • BlogIcon 강가이버 2016.06.08 22:22 신고

    질문이 있는데요..포스팅 본문 글자와 이미지 자막 글자를 좀 크게 하고 싶은데 어떻게 해야 되는지 도저히 모르겠어요ㅠ한시간 씨름하다 포기했어요.

  • 하이 2016.06.12 15:53 신고

    예뻐서 제 블로그에 적용시키다가 조금 불편한 점들을 수정하고 싶은데.

    제가 이런걸 전혀 몰라서 그러는데.

    제목이 항상 표시되게 하려면 어디서 바꿔야 하나요?

    적용방법이나 수정방법이 정리된 게시글은 없나요? 댓글을 검색해서 살펴보는데 잘 안되는 것들고 있고 찾기가 어렵네요.

  • BlogIcon sixline 2016.06.20 10:18 신고

    디바님의 스킨 잘 사용하고 있습니다
    한가지 수정을 하고 싶은데,,,,
    카테고리 의 다른글 항목에서 댓글 달린 수를 나타내는 괄호 항목을 나타내고 싶지않은데
    어느부분을 처리하면 되는지 알려주셨으면 고맙겠습니다.
    수고하세요.

  • BlogIcon LY진 2016.06.24 23:28 신고

    ..ㅠㅠ 답변을 해 주실지는 모르겠는데..
    마지막줄에 .section_1 #article .tx-link {color:#A0BAED;}를 추가 했는데
    이렇게 하니까 마우스 오버시 색이 안바뀌네요.. 해결 방법 있을까요

  • :D 2016.06.26 22:54 신고

    안녕하세요! 좋은 스킨 잘 사용하고 있습니다 :D
    한 가지 고치고 싶은 점이 있는데 제 능력밖의 일이라ㅠ 문의합니다!
    이미지를 썸네일에서 표시할 때 위에 맞춰서 보여지니까 이미지 아랫부분이 잘리잖아요?
    이걸 위아래 똑같이 잘려보이게 할 수 있는 방법이 있을까요?
    위아래 정렬을 가운데로 맞추고싶은데..음 어렵네요
    읽어주셔서 감사합니다

티스토리 툴바