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

 

 

 

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

 

 

toPiece_v2.1.0 업데이트 내역

 

- 스킨 레이아웃 좌우 변경 가능

- 카테고리 페이지 텍스트형 리스트 추가

- 사이드바 카테고리의 새글 표시 방법 변경
- 썸네일 목록에서 이미지 없을 시 나타내는 기본 이미지 추가

- 본문 텍스트에 강조(Bold)효과 추가(어쩌다 박군님 지적 감사)

 

이번 toPiece_v2.1.0 의 가장 큰 특징은 두 가지입니다.

 

 

첫째. 손쉽게 style.css 란에서 " left , right " 입력만으로 스킨의 레이아웃을 바꿀수 있도록 정리했습니다.

 

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

 

레이아웃 좌,우 변경에 대한 질문이 많이 있어서 아주 쉽게 변경할 수 있게 제작 했습니다.

style.css 파일 내 주석으로 /* 레이아웃 좌우 변경 : 컨텐츠를 왼쪽으로-left , 컨텐츠를 오른쪽으로-right */ 이와 같이 정리했습니다. 참 쉽죠?

 

 

 

둘째. 카테고리 또는 검색 결과를 노출시키는 텍스트 리스트형 페이지를 추가 했습니다.

 

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

 

텍스트 리스트 페이지도 많은 분들의 요청이 있어서 추가 했습니다.

이 페이지 전환도 손쉽게 되어야 할 것입니다. 그래서 class 명 바꾸는 것만으로 전환 할 수 있게 정리 했습니다.

skin.html 파일 내 주석으로 <!-- 썸네일 목록(fixed_img_col) , 텍스트 목록(fixed_txt_col) --> 이와 같이 정리했습니다. 이것도 참 쉽죠?

 

한편으로는 PC화면은 썸네일 목록, Mobile화면은 텍스트 목록 이라는 스왑형이 필요하신 분들도 있을 것입니다.(다음 업데이트 예약)

 

 

 

그리고 사이드바의 새글 표시 방법을 바꿨습니다.

 

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

 

 

차이가 보이시나요. ^^

카테고리에 새글 등록 시 New 아이콘이 생성 됐는데 스킨 디자인과는 전혀 상관 없는 녀석이 갑툭튀했죠. 그래서 오른쪽 화면 처럼 바꿨습니다.

 

toPiece 스킨의 디자인 컨셉 중 하나인 "NO 블릿 아이콘 , NO 이미지"를 차차 완성시켜 가고 있습니다.

 

썸네일 없을 시 기본이미지 노출과 본문의 TEXT 강조 효과(Bold) 추가했습니다. 많은 분들의 애정어린 피드백으로 스킨이 조금씩 발전해 나가고 있습니다.

모두 감사드리며 더 나은 업데이트로 노력하겠습니다.

 

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

(bold-strong_적용css.zip 파일은 본문 볼드체 적용 시 나타나는 파일입니다. - 쭉쭉쭉님 감사)

 

 

toPiece_v2.1.0.zip

 

bold-strong_적용css.zip


 

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

 

 

 

  • BlogIcon 홍정석 2015.08.08 15:27 신고

    스킨 v2.1.0 으로 업데이트 완료했습니다.
    많은 기능들이 추가되었고 앞으로 추가될 기능도 기대되네요^^
    더운 여름 고생 많이 하셨습니다.

    • BlogIcon toDiva 2015.08.08 17:28 신고

      감사합니다^^
      스킨 사용에 있어 더 편리한 기능추가와 확장성에 대한 고민이 즐겁습니다.
      잘 사용해 주시니 뿌듯합니다. ^^
      피드백은 언제나 감사합니다.

  • BlogIcon wallel 2015.08.08 23:40 신고

    이야 점점 더 멋있게 업그레이드 되네요!

    • BlogIcon toDiva 2015.08.09 09:05 신고

      감사합니다 ㅎㅎ
      피드백들이 큰 도움이 되고 있네요 ^^

  • BlogIcon Laki & Piece 2015.08.09 01:49 신고

    업데이트가 너무 빨라요!!
    쉬면서 하세요 ㅋㅋ
    그래도 점점 완성되어가는 느낌이라 좋습니다 :)

    • BlogIcon toDiva 2015.08.09 09:07 신고

      피드백은 빨리 적용시키는게~
      님의 피드백은 다음 업데이트에 적용할께 ^^

  • BlogIcon G.J. 제이 2015.08.09 10:56 신고

    트랙백부분도 다른것처럼 개선되었으면 좋겠네요 ㅇㅅㅇ///
    소셜버튼에 트위터도 추가되었으면 좋겠습니다~~ 스킨 예쁩니다~

    • BlogIcon toDiva 2015.08.09 11:11 신고

      오셨군요 크리츠님 ^^
      전에 크리츠님이 의견주신(로딩 딜레이) 부분을 개선했습니다.
      지금 주신 의견도 다음 업데이트에 반영하겠습니다.
      소셜 버튼에 트위터 물론 있습니다.
      스킨 소개 본문(http://www.todiva.com/3)에 보시면 * 소셜 링크 아이콘 노출 방법 이라고 설명해 두었습니다.
      그리고 칭찬 고맙습니다 ^^

    • BlogIcon G.J. 제이 2015.08.09 15:04 신고

      오오. 제가 못찾았던 거네요. 적용했습니다~

  • MINU 2015.08.09 19:13 신고

    스킨 이쁩니다 ! 다름이아니라
    첫 메인화면 메인 썸네일 이미지 사이즈가 정사각형으로 바꿀 수는 없나요 ?
    직사각형이라서 이미지가 깨지기도하고 쫌더 컷으면 하네요 ㅠㅠ

    • BlogIcon toDiva 2015.08.09 21:03 신고

      안녕하세요 MINU님.
      toPiece 스킨 선택 감사합니다. 썸네일 사이즈 변경 가능합니다.
      다양한 사이즈의 썸네일을 종류에 따라 선택 가능하게 하는 업데이트가 예정되어 있습니다. 하지만 그 이전에 썸네일 변경은 내일 아침 일찍 댓글로 알려드리겠습니다.(지금 파일을 열어볼 수 있는 환경이 안되어서 ^^;)

    • BlogIcon toDiva 2015.08.10 08:31 신고

      좋은 아침입니다. MINU님.
      답변 드리는 css 코드를 style.css 란 하단에 넣어주시면 됩니다.

      .fixed_img_col li, .fixed_img_col li a, .fixed_img_col .thumb, .fixed_img_col .thumb img, .fixed_img_col .thumb .vimimg { height:230px; }
      @media only screen and (min-width: 1200px){.fixed_img_col li, .fixed_img_col li a, .fixed_img_col .thumb, .fixed_img_col .thumb img, .fixed_img_col .thumb .vimimg { height:290px; }}
      @media only screen and (max-width: 767px){.fixed_img_col li, .fixed_img_col li a, .fixed_img_col .thumb, .fixed_img_col .thumb img, .fixed_img_col .thumb .vimimg { height:215px; }}
      @media only screen and (min-width: 290px) and (max-width: 420px){.fixed_img_col li, .fixed_img_col li a, .fixed_img_col .thumb, .fixed_img_col .thumb img, .fixed_img_col .thumb .vimimg { height:145px; }}

      위 내용은 1:1 정사이즈로 썸네일 노출입니다. 비율이 다른 이미지일 경우 살짝 깨질 수 있습니다.

      다양한 썸네일 사이즈 선택가능한 업데이트를 빠른 시일내에 준비하겠습니다.

  • BlogIcon wallel 2015.08.09 20:37 신고

    이름 옆에 프로필의 레이어가 깨지네요~

    style.css 제일 밑에

    #tistoryProfileLayer div { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; }

    요고 넣어주면 괜찮아질거예요. :)

    • BlogIcon toDiva 2015.08.09 20:51 신고

      오~ wallel님 감사합니다. ㅇㅇb
      덕분에 더 발전하네요.^^ 다음 업데이트 파일에 꼭 넣어서 공유하겠습니다.

  • BlogIcon 쭉쭉쭉 2015.08.10 02:38 신고

    본문에 볼드 효과를 추가하셨다고 하는데, 업데이트 했는데 볼드 효과가 나타나지 않습니다.. 어떻게 해야 할까요??

    • BlogIcon toDiva 2015.08.10 08:13 신고

      안녕하세요 쭉쭉쭉님.
      글작성시 편집기에서 볼드체 적용 했는데 적용이 안되는건가요?
      참고로 지금 본문에 보시면 볼드 적용이 된 부분이 있습니다. 혹시 몰라서 strong 적용 파일 올려두겠습니다. 파일 적용 후 다시 확인 부탁드립니다. ^^

    • BlogIcon 쭉쭉쭉 2015.08.10 15:45 신고

      네 파일 다시 적용하니 볼드 효과 나타나네요~ ^^
      감사합니다. 잘만드신 스킨 잘 쓰겠습니다

    • BlogIcon toDiva 2015.08.10 15:47 신고

      참 다행입니다. ^^
      피드백은 언제나 기다리고 있습니다. ^^

  • BlogIcon 비온s 2015.08.10 17:41 신고

    안녕하세여
    스킨을 적용했는데 사이드바가 왼쪽에 있는데 오른쪽으로 가능한가요?

    • BlogIcon toDiva 2015.08.10 17:57 신고

      안녕하세요 비온s님.
      네 가능합니다. 본문에 소개드린대로 skin.html 파일 내 주석으로 <!-- 썸네일 목록(fixed_img_col) , 텍스트 목록(fixed_txt_col) --> 이와 같이 정리했습니다.

  • BlogIcon ppomi 2015.08.11 12:58 신고

    안녕하세요~ 멋진 스킨 잘 쓰고 있습니다.
    쓰다보니 한가지 아쉬운 점이 있는데 말씀을 드려도 될런지요?

    본문의 이미지 자막(캡션)이라던지 인용구에 대해서는 특별한 스타일이 지정되어 있지 않은듯 해서요.
    저도 자주 쓰는 기능은 아니지만 가끔 쓰게 되는데 본문과 동일한 스타일로 표출이 되서 차이가 나 보이지않더라구요~

    혹시 이것도 추가할 계획이 있으실까요?^^;

    • BlogIcon toDiva 2015.08.11 13:10 신고

      안녕하세요 ppomi님.
      말씀 주신 내용은 현 toPiece스킨의 상태를 정확히 보고 계시네요. ^^;
      물론 추가 업데이트 계획에 포함되어 있습니다. 저 역시 아쉬워하며 업데이트 타이밍을 재고 있는 상태거든요.
      앞으로 진행 될 업데이트를 대략 공유하자면 큰틀의 외관부터 마무리를 짓고 내실(말씀 주신 내용들)을 다지는 순서로
      계획하고 있습니다. 같은 생각을 하는 분이 있다니 헛된 작업은 아닌가봅니다. ^^
      소중한 피드백 정말 고맙습니다.

    • BlogIcon toDiva 2015.08.17 21:58 신고

      ppomi님 ^^
      조금씩 조금씩 내실 업데이트를 진행하고 있습니다. 3.0.0을 확인해 주세요 ^^;

  • BlogIcon hanicare 2015.08.13 12:08 신고

    toDiva 님께..

    이 스킨은 정말 작품성이 뛰어납니다.
    http://hanirecipe.tistory.com/category
    이 분야는 문외한이라, 염치불구 문의드립니다.

    1. 블로그 주소에서 category 부분을 숨길수 있는지
    2. 바탕 썸네일 이미지에 제목 위에 붙어 있는 날짜를 감추는 방법을 여쭤봅니다.

    부탁드립니다

    • BlogIcon toDiva 2015.08.13 12:33 신고

      안녕하세요 hanicare님.
      toPiece 스킨 선택에 감사합니다.

      1. 질문하신 내용이 범위가 넓어서 제가 이해한 게 맞는지 모르겠지만, 일단 티스토리 스킨 구조상 자세한 URL 주소는 주소창에서 숨길 수 없습니다. 초기 주소 "http://hanirecipe.tistory.com" 를 입력하고 블로그 접속해도 toPiece 스킨은 category가 붙은 페이지로 연결 됩니다. category만 없앨 수 있는 방법을 질문하신게 아니라 판단됩니다.

      2. 관리 > HTML/CSS 편집 > CSS 편집 란을 살펴보시면 아래 문구가 있을 것입니다.
      /* 썸네일 리스트 : 작성일 숨김 */
      display:; 으로 되어 있는 부분을 display:none; 으로 변경 후 저장 하시면 됩니다.

      도움이 되셨길 바래요.

    • BlogIcon hanicare 2015.08.13 14:33 신고

      넵.. 제가 궁금해 하는 부분이 잘 해결되었습니다. 진심 감사드립니다..

  • BlogIcon 블리스포토 2015.08.13 16:46 신고

    스킨 다운받아서 정말 잘 사용하고 있어요.
    덧글이라도 달아야 할 것 같아서 왔습니당 !
    딱 제스타일 이에요 ! 정말 감사합니다 :)

    • BlogIcon 블리스포토 2015.08.13 16:50 신고

      엇? 그런데 왜 저는 프로필 사진이 왼쪽에 안뜰까요?

    • BlogIcon toDiva 2015.08.13 16:50 신고

      율라율라님 안녕하세요.
      블링블링하게 바꾸셨네요. 컬러랑 New 아이콘이 무지 인상적이에요 ㅇㅇb
      오늘 또 멋진 업데이트가 있을거에요. 수정하신 내용을 잘 간직하구 계세요! ^^

    • BlogIcon toDiva 2015.08.13 16:51 신고

      아~ 관리자에서 환경설정 > 아이콘을 등록하시면 됩니다. 64px로~

    • BlogIcon 블리스포토 2015.08.13 17:26 신고

      감사합니다 ! 업데이트도 정말 기대할게요 !
      아이콘도 잘 설정했어요 !

      추가적으로 궁금한게 있는데, 제가 가로여백은 조정하지 않았는데
      모바일에서 컨텐츠가 가로 2개씩 안나오고 1개씩 끊겨서 나오더라구요. 무슨 문제일까요 ? ㅠㅠ

    • BlogIcon toDiva 2015.08.13 17:44 신고

      허 그러네요.
      무엇이 문제인지는 좀 이따가 한 번 뜯어볼께요. 뭘 건드린거 같긴 합니다. ㅎ

  • 2015.08.13 17:05 신고

    안녕하세요! 스킨 너무 좋네요ㅠ 티스토리 한동안 안쓰다가 이거 쓰려고 만들었습니다ㅠㅠ
    그런데 수정하다가 몇 가지 막히는 부분이 있어서 질문드려요ㅠ
    1. 타이틀 스타일을 바꿀 수 있을까요?
    타이틀 배경색, 글꼴 등이 디폴트인듯한데 색상을 바꾸려면 어떻게 건드려야 하나요ㅠㅠ
    2. 본문 노출부분에서 하단에 카테고리 정보가 뜨는 박스를 없앨 수 있나요?
    살펴보니 article 태그 안에 한번에 묶여있는듯 하더라구요ㅠㅠ

    • BlogIcon toDiva 2015.08.13 17:16 신고

      안녕하세요 오님.
      모두 가능합니다. 바로 답변 드릴께요.
      1. 글꼴 부분은 http://todiva.com/3 게시글 댓글 부분에 "블라 :D"님의 댓글 확인 부탁 드립니다. 그리고 배경색은 관리 > HTML/CSS 편집 > style.css 란에 아래 한 줄 추가해 주세요.
      #header{background-color:red;}
      red부분을 원하는 컬러로 변경하시면 됩니다.

      2. 역시 관리 > HTML/CSS 편집 > style.css 란에 아래 한 줄 추가해 주세요.
      .section_1 .another_category{display:none;}

      그럼 도움이 되셨길 바래요 ^^

    • 2015.08.13 18:58 신고

      답변 감사합니다!
      몇 가지만 만 더 질문드릴게요!ㅠ
      위의 header 처럼 밑부분도 색상을 바꾸려면 어떻게 해야하나요?
      그리고 헤더색상을 수정하고 났더니 밑의 까만 선이 남는데, 이부분도 바꿔줄 수 있을까요?
      질문이 많아서 죄송해요ㅠㅠ

    • BlogIcon toDiva 2015.08.13 18:59 신고

      마찬가지로 style.css 란에 아래 한 줄 추가해 주세요.
      .footer{background-color:red;}
      잘 되어 가시는군요?

  • 언제나 러블리 2015.08.13 18:51 신고

    스킨을 테스트하다보니 핸드폰 기종에 따라 약간 문제가 있는듯 합니다.
    노트2,3에서는 상단 바가 잘 작동하는데, s3에서는 상단바가 화면 가운데에서 움직이네요...
    물론 예전 기종을 사용하는 사람이 많지는 않겠지만, 혹시 다른 기종에서 상단바가 가운데 위치한다면
    상당히 불편할 것 같아요..

    • BlogIcon toDiva 2015.08.13 18:54 신고

      언제나 러블리님 감사합니다.
      역시 공부할 게 이만저만이 아니군요. 오늘 그 부분 확인 했습니다.
      그 버그 꼭 잡아야죠!! 고맙습니다 러블리님 ^^

    • 언제나 러블리 2015.08.13 19:12 신고

      사랑합니다...

    • BlogIcon toDiva 2015.08.13 19:13 신고

      댓글이 블링블링해지네요....

  • BlogIcon 창훈선박 2016.12.14 22:14 신고

    이뻐요

티스토리 툴바