toPiece_v2.2.0 update 티스토리 스킨 업데이트




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

 

 

toPiece_v2.2.0 업데이트 내역

 

- 모바일용 리스트형 카테고리 페이지 추가

- 맨 하단으로 가는 버튼 추가
- 썸네일의 작성일, 제목 숨김 추가

- 이름 옆 프로필 레이어 오류 수정(wallel님 감사)

- 트랙백 style 추가

- 보호글 style 추가

 

이번 toPiece_v2.2.0 의 가장 큰 특징은 몇몇분들께서 많이 기다려주신 모바일에서만 나타나는 리스트형 카테고리 페이지입니다.




손쉽게 skin.html 란에서 " mobile_list " 라는 class명 입력만으로 모바일에선 아래 첨부이미지와 같이 리스트형 카테고리로 변경 됩니다.


변경 방법은 관리 > HTML/CSS 편집 > skin.html 란에 아래와 같은 주석이 있습니다.

<!-- 모바일에서만 텍스트 목록(mobile_list를 옆 class에 넣어주세요.) -->


그리고 그 옆엔 빈 class명을 가진 <div class=""> 가 있습니다. 이 안에 mobile_list 넣어주시면 끝! 또 쉽죠?


toPiece_v2.2.0 update 티스토리 스킨 업데이트




그리고 하단으로 바로 갈 수 있는 버튼 요청이 있어 업데이트에 넣었습니다. 하지만 기본은 숨김으로 되어 있으니 아래 한 줄에서 제어하시면 됩니다.


/* 하단으로 가는 버튼 숨김 */
.side_nav .side_bottom { display:none; } - none을 삭제하면 하단으로 가는 버튼이 나타납니다.



또 이름 옆 프로필 레이어 오류를 바로 잡게 도움을 주신 wallel님 감사합니다. 나머지는 기존에 없던 트랙백과 보호글 style 추가 되는 소소한 업데이트입니다.



썸네일의 비율을 편리하게 바꿀 수 있는 업데이트 작업을 계속 진행 중인데 만만찮은 버그들이 공부가 부족해 쉽게 안잡히네요.

하지만 계속 파고 들고 있으니..



위 업데이트 외엔 당분간은 피드백 주신 안드로이드 내장형 브라우저의 버그를 잡아야 할 듯 합니다. 역시 쉬운 공부는 없나 봅니다.

개선점/피드백은 항상 감사한 마음으로 기다리고 있습니다.




아래 파일을 다운로드 하시면 됩니다.



toPiece_v2.2.0.zip



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



  • BlogIcon lifephobia 2015.08.13 22:43 신고

    감사합니다!

    • BlogIcon toDiva 2015.08.13 23:01 신고

      항상 기다립니다. 피드백을요~^^

  • 언제나 러블리 2015.08.13 22:48 신고

    커스터마이징을 한 경우 업데이트 파일에 쉽게 적용할수 있는 방법이 있을까요?
    업데이트 파일을 다시 수정해야 할까요?

    • BlogIcon toDiva 2015.08.13 23:01 신고

      러블리님이시군요.
      질문을 하신 이유가 아마 images폴더 내 css파일을 손 보셨군요.
      그럴경우 저는 파일비교 프로그램으로 코드 비교 후 적용하곤 합니다.

    • 언제나 러블리 2015.08.13 23:03 신고

      완전 사랑합니다...

    • BlogIcon toDiva 2015.08.13 23:04 신고

      제 블로그 포인트 컬러는 핫 핑크라죠...

    • 언제나 러블리 2015.08.13 23:08 신고

      제가 만들다만 곳입니다.

    • 언제나 러블리 2015.08.13 23:09 신고

      다시 운영을 고민 중인데, 혹시 나중에 도움을 청할까합니다

    • BlogIcon toDiva 2015.08.13 23:11 신고

      호오 어마무시한 컨텐츠군요~ 얼마든지요. 제 능력내엔 도움을 드릴 수 있습니다.

    • 2015.08.13 23:13

      비밀댓글입니다

  • BlogIcon 산소공급 2015.08.13 23:30 신고

    오~좋아보입니다.
    조만간 저도 적용해보겠습니다.....

    그런데 본문 넓히고 좁히고 조정 할수는 있는가요?
    지금 현재 본문이 너무 넓은것 같아서요~~

    • BlogIcon toDiva 2015.08.14 00:32 신고

      안녕하세요 산소공급님.
      기본 본문 사이즈는 720px입니다. 900px까지 대응하게끔 되어 있는데 필요없으시면 삭제해도 되는 항목입니다. 자세한 내용은 내일 아침 일찍 답변 드리겠습니다. 지금 컴 상태가 좋지 않아서 ^^;

    • BlogIcon toDiva 2015.08.14 08:59 신고

      좋은 아침입니다. 산소공급님.
      어제에 이어 못다한 답변드립니다.

      style_topiece_v01.css 파일의 Line 291의 '@media' 부터 Line 301 '}' 까지 삭제 또는 주석처리.
      그럼 900px대의 본문은 사라집니다.

      그 후에 관리 > HTML/CSS 편집 > style.css 란에 아래 내용 추가하시면 됩니다.
      .section_1 { width:720px; }
      .section_2 { width:250px; }

      720px는 본문 사이즈, 250px는 사이드바 사이즈입니다. 각각 원하시는 사이즈로 변경하시면 적용 될 것입니다.
      둘의 합이 970을 넘지 않는 것은 물론입니다.

    • BlogIcon 산소공급 2015.08.14 09:11 신고

      아...그런데
      어떤 파일을 다운받아야 하나요?
      이 글 본문에 있는것을 받아보니...css파일에 내용이 별로 없네요.

      이전에 올리셨던 파일을 다운받아야 하나요?

    • BlogIcon toDiva 2015.08.14 09:16 신고

      네. 현재 이 글의 본문 첨부파일을 받으시면 됩니다.
      style.css 파일에선 사용자의 편리한 수정을 위한 용도로 의도되었습니다.
      주요 내용은 images 폴더 내 style_topiece_v01.css 파일에 기술되어 있습니다.

  • BlogIcon 어쩌다 박군 2015.08.14 10:04 신고

    우왕 또 한번의 업뎃ㅎ 감사합니다~~ 잘쓰고 있어요ㅎ

    • BlogIcon toDiva 2015.08.14 10:06 신고

      오셨군요 ^^
      잘 쓰신다는 말이 참 뿌듯합니다 ㅎ

  • BlogIcon 컴퓨터공학과 에디슨 2015.08.14 14:45 신고

    잘 사용하겠습니다. 감사합니다!!!

  • 2015.08.14 16:08

    비밀댓글입니다

    • BlogIcon toDiva 2015.08.14 16:13 신고

      칭찬 감사합니다. ^^
      매우 간단합니다. 관리 > HTML/CSS 편집 > style.css 란에 아래 내용 추가하시면 됩니다.
      .fixed_img_col .thumb img { opacity:1; }
      도움이 되셨길~

  • BlogIcon 홍정석 2015.08.14 21:44 신고

    공유해주신 toPiece_v2.2.0 스킨으로 업데이트 완료했습니다. ^^
    모바일에서 리스트 화면 기능 추가 해주신걸로 적용했습니다.
    늘 고맙습니다.~

    • BlogIcon toDiva 2015.08.14 22:08 신고

      안녕하세요 ^^
      늘 응원해 주시니 너무 감사합니다.
      이상하게 댓글 타이밍이 제가 뭔가를 하나 해결할 때마다 달리는 느낌 ㅎㅎ
      좀전에 썸네일 비율마다 나타내는 것을 성공했거든요. 곧 올리겠습니다. ㅎ

    • BlogIcon 홍정석 2015.08.14 22:09 신고

      뭔가 교감이 이뤄지는걸까요~ :)
      썸네일 비율 조절 기능도 성공적이네요 ㅎ

    • BlogIcon toDiva 2015.08.14 22:12 신고

      아 근데 홍정석님! 폰으로 정석님 리스트를 보면 썸네일 화면이 깜빡이고 텍스트 목록이 나타나는데 뭔가 잘 못 된거 같아요. 다시 한 번 확인해 주세요. 테스트상으로는 그런 깜빡임이 나타나지 않거든요 ^^;

    • BlogIcon 홍정석 2015.08.15 20:31 신고

      덕분에 오류 수정했습니다.~
      즐거운 주말 저녁 보내고 계시죠!

    • BlogIcon toDiva 2015.08.15 20:32 신고

      네 ㅎㅎ 가족들이랑 최고의 저녁식사를 하고 있습니다 ^^

  • BlogIcon 라온제나. 2015.08.14 23:00 신고

    감사합니다. ^^
    잘 적용해서 쓰겠습니다.
    근데 색상정도는 바꿔도 되는건가요? ^^ 감사드립니다. ^^
    혹시 메인화면의 NEW의 색과 그림의 주변 화면 색은 다르게 안되나요?

    • BlogIcon toDiva 2015.08.15 08:42 신고

      안녕하세요 라온제나님.
      toPiece 스킨 선택 감사드립니다. 방문해보니 이미 많은걸 잘 바꾸셨네요 ^^
      질문하신 내용도 가능합니다. 하지만 추천 드리진 않습니다.
      원하시는 썸네일 New 컬러는 아래 한 줄입니다.
      .fixed_img_col .thumb .thumbnew,.fixed_txt_col ul li a .thumbnew{background-color:#ec008c;}

      그리고 썸네일 over 컬러는 아래 한 줄입니다.
      .section_1 .fixed_img_col li:hover{background-color:#ec008c;}

      합쳐져 있는 코드들이지만 따로 따로 컬러 나누고 싶으시면 위처럼 분리하시면 됩니다.

      물론 관리 > HTML/CSS 편집 > style.css 란에 입력해 주세요.

  • BlogIcon Youchang 2015.08.16 02:54 신고

    안녕하세요? 이 스킨 참 마음에 들어서 몇년만에 스킨을 바꿨습니다. 그런데 적용하고보니 조금 더 수정했으면 하는 부분이 있는데 제 능력으로는 잘 안되네요.

    1. 블로그 로고를 이미지로 만들고 싶습니다. 모바일용 로고는 어디에 넣으면 될까요?
    2. 첫 화면 썸네일에서 최신 포스트 1개만 크게 나오게 하고 싶습니다. 그 아래로 2번째부터는 지금처럼 3개씩 나열하는 방식이 가능한가요?
    2-1. 이때 크게 나오는 첫번째 이미지는 밝기를 원래 상태로 밝게 나오게 하고 싶습니다.
    3. 모바일 썸네일 화면에서 썸네일 이미지 아래 제목이 나오게 하고 싶습니다. 리스티클만 하면 밋밋해서요. 어떻게 하면 될까요?

    • BlogIcon toDiva 2015.08.16 03:44 신고

      안녕하세요 Youchang Yang님.
      굉장한 아이디어를 제시해 주셨군요. ^^
      답변 드리겠습니다.
      1. toPiece 스킨 디자인은 블로거를 알리기 보다 컨텐츠의 집중도를 우선하는 컨셉입니다. 즉 모바일 로고는 권장하지 않습니다. 방문자는 로고보다 내용이 더 중요합니다. ^^
      2. 좋은 아이디어네요. 답변을 드리자면 가능합니다. toPiece 스킨 구조상 쉽지 않은 제안입니다. 하지만 재미있어 보이는군요.
      2-1. 2번 구현되면 이 내용은 매우 간단합니다.
      3. 이 질문 역시 꽤 재미있는 제안이군요. 다음 스킨에 적용시킬까 하는 내용인데 음.. 답변을 드린다면 코드추가가 꽤 될 것 같습니다.

      1번 제외한 나머지 제안들은 예정 업데이트에 추가하겠습니다. 재미있어 보입니다.

  • BlogIcon 까미에 2015.08.27 15:36 신고

    스킨 처음 적용하는데 처음부터 굉장한 스킨을 받은 것 같아서 너무 감사드려요!
    하나 여쭙고 싶은게 있는데요~
    썸네일의 작성일, 제목 숨김 어떻게 하는건지 알려주실 수 있나요?
    제가 처음 하는 거라 잘 몰라서요ㅠ

    • BlogIcon toDiva 2015.08.27 15:41 신고

      안녕하세요 까미에님.
      참고로 toPiece 스킨은 3.0.1 업데이트까지 진행되었습니다. ^^
      질문에 답변 드릴께요.
      관리에 가시면 꾸미기 > HTML&CSS 편집 메뉴가 있습니다. 클릭하시면 새창으로 보시게 될텐데 오른쪽 화면의 CSS 탭을 클릭해 보시면 원하시는 내용들이 보이실겁니다.
      해당 항목을 숨기고 싶을 때 none이라고 입력해 주시기만 하면 됩니다. 반대일 경우는 none 항목을 삭제만 해주시면 됩니다.
      도움이 되었음 좋겠네요 ^^

    • BlogIcon 까미에 2015.08.27 15:48 신고

      /* 썸네일 리스트 : 작성일 숨김 */
      .fixed_img_col ul li a strong p { display:; }

      display를 지우고 none 을 쓰면 되는건가요??

    • BlogIcon toDiva 2015.08.27 15:50 신고

      .fixed_img_col ul li a strong p { display:none; } = 숨김
      .fixed_img_col ul li a strong p { display:; } = 보임

      위의 다른것들이랑 비교해 보시면 쓰임새를 알 수 있을겁니다. ^^

  • BlogIcon 까미에 2015.08.27 15:51 신고

    앗 감사합니다!!! 잘 쓰겠습니다 :)

  • BlogIcon onevely 2016.01.07 00:59 신고

    안녕하세요. 예쁜스킨 잘 받아갑니다 !
    웹 디자이너이신가요~!?
    이런걸 만들려면 얼마나 공부해야 할까요...?

    그리고 티에디션 배치가 적용이 안되는데 메인화면을 여러개의 컨텐츠로 구성하고 싶어요!!
    어떻게 변경해야 할까요..?

    • 2016.01.07 01:00

      비밀댓글입니다

    • BlogIcon toDiva 2016.01.07 08:55 신고

      안녕하세요. onevely님 ^^
      웹디자이너 맞습니다. 그리고 이 스킨은 저도 7월에 공부하면서 만든거라.. 기간은 스스로 시간투자에 달라질 거 같습니다.
      티에디션은 이 스킨에서 지원하지 않습니다.
      사용하시려면 관리 > 꾸미기 > HTML&CSS > HTML 소스상 head부분에 "Main Page Redirect by Readiz" 라고 되어 있는 스크립트를 삭제하시면 됩니다.
      모바일은 관리 > 꾸미기 > 모바일웹 스킨에서 상단에 보시면 "모바일웹 스킨" 이라고 ON/OFF 있습니다. "OFF" 체크하시면 모바일에서도 동일한 디자인을 볼 수 있습니다.

  • BlogIcon Mood Indigo 2016.01.18 19:19 신고

    안녕하세요! 좋은 스킨 잘 쓰고 있습니다.
    타이틀 글자 크기와 폰트를 변경해 보고 싶은데 가능할지요?
    초보자가 이것저것 해보는데 쉽지 않네요.

    • BlogIcon toDiva 2016.01.19 09:42 신고

      안녕하세요.
      style_topiece_v01.css 파일 18번째 줄에
      h1{font-size:3.3em;} 이 있습니다.
      3.3의 수치가 폰트 크기입니다. 원하시는 크기로 변경하시면 됩니다.
      폰트변경도 마찬가집니다. 해당 줄에 font-family를 원하는 폰트명으로 정의하시면 됩니다.

  • 2016.01.19 14:08

    비밀댓글입니다

티스토리 툴바