주말에 이웃분이 티스토리 Life in Mono 스킨 사이드바를 수정해달라는 부탁을 받았습니다. 이웃의 스킨을 수정해주면서 그동안 미뤄왔던 사이드바 테두리를 이번 기회에 수정하고 그 내용을 간단하게 포스팅해봤습니다. 

  
변경하는 부위

 제가 수정한 부분은 카테고리에 이미지 메뉴를 넣은뒤 테두리가 자연스럽지 못했던 부분을 수정해줬습니다. 이 내용을 참고하시면 Life in Mono 기본 스킨의 사이드바 메뉴부분을 마음대로 수정하실수 있습니다.  

 
수정전 알아야될 것 

 둥근 테두리 태그는 사이드바, 본문, 본문검색리스트, 방명록창 공동 사용 

 Life in Mono 스킨에서는 테두리를 둥글게 하기 위해 복잡한 <div> 태그를 사용하고 있습니다. 그태그를 사이드바와 본문, 본문검색리스트, 방명록창에 공동으로 사용하고 있습니다. 사이드바 이미지 수정방법은 위쪽의 둥근 이미지 부분의 <div>를 삭제하고 사이드바 이미지가 들어갈수 있는 공간을 만들어 주시면 됩니다. 
사이드바 카테고리 태그 분해

사이드바, 본문, 본문 검색목록 중 오늘 수정해야 될 사이드바에 대해 조금더 자세히 알아보면,

카테고리 윗뚜껑

<div class="boxTop">
<div class="boxTop-left"></div>
<div class="boxTop-mid"></div>
<div class="boxTop-right"></div>
</div>

카테고리 내용



     

카테고리 아랫받침대

<div class="boxBtm">
<div class="boxBtm-left"></div>
<div class="boxBtm-mid"></div>
<div class="boxBtm-right"></div>
</div>


Life in Mono 스킨 사이드바 수정하기 

사이드바 메뉴 수정해주기 

Html/css편집에서 Html에 해당하는 부분을 아래의 텍스트 파일로 수정해주시면 됩니다.

공지사항 



CSS 수정하기 수정하기

Html/css편집에서 css에 / * Box * / 부분의 내용을 아래의 텍스트 파일로 수정해주시면 됩니다.






그밖에 카테고리 모듈 수정



카테고리


최신글


태그목록


최근 댓글


블로그 설명 모듈


최근 달력 모듈




분문, 본문 검색리스트 수정하기 

 사이드바를 수정하면서 CSS를 변경하게 되면 본문과 본문검색 테두리도 연결되어 있어 위쪽이 두줄로 겹쳐보이게 됩니다. 그때 HTML/CSS편집 HTML에서 테두리를 둥글게 보이기 위해 필요했던 위뚜껑인 <div class="boxTop"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div>라는 부분을 삭제해주시면 됩니다.  


본문 검색 리스트 테두리 수정 


 
본문 테두리 수정


방명록 위쪽 테두리 수정



후기 

 카테고리 다른 부분들은 업데이트중에 있습니다. 수정하시다가 막히는 부분이 있으시면 댓글 주시면 바로 답변 드리겠습니다. 설보라님 잊어버린것 아니예요. ㅠ;




신고

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 늦은시간에 티스토리 만지다가 티비님의 스킨으로 열심히 작업중에 사이드바에 있는 메뉴이미지를 다바꾸었는데
    티비님이 바구지않으신 stitle_recenttrackback 아이콘과 stitle_archive아이콘을 바꿔보니 제블로그처럼 아이콘이
    제대로 위치하지못하고 구석에 박혀버리네요. 어떻게 해결하는지 방법좀 살포시 알려주실수있나요? ㅠㅠ
    소스수정에 잼뱅이라 머리아포요. 오늘도 열심히 배우고 있는 1人입니다.

    2011.04.21 01:28 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 잘은 모르지만 하나씩, 하나씩 공부중입니다~ ㅋ

    2011.04.25 00:46 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 아직은 함부로 손 못대겠어요... 공지사항시도해봤는데 미리보기 화면에 공지사항이 2개가 떠버렸어요..ㅡㅡ;;;
    그래서 다시 포기..ㅡㅡㅋ

    2011.05.13 15:11 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 왜계속 밑으로가져;;;]
    제대로 된게 공지사항 한개 ㅎㅎ

    2011.06.09 19:25 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. ㅎㅎㅎ

    2011.10.09 09:46 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 여기에 귀하의 사이트에 멋진 정보입니다. 귀하의 블로그에서 유용한 정보를 얻을 수 있기 때문에 나는이 게시물을 사랑 해요. 난 너희들에서 더 많은 게시물을 기대합니다

    2011.11.16 10:49 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 느껴지

    2011.12.01 15:12 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 못 설정하면

    2011.12.01 15:12 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 터 다시 설

    2011.12.01 15:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 가로폭

    2011.12.01 15:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 창이 다시

    2011.12.01 15:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. 그것은 너무 영리하다고 아니라, 내가 더 이상 문제가 같이있을한다는거야.

    2011.12.20 05:12 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. 감사합니다 ㅎ
    이팁을 적용하고나서 http://nextgoal.tistory.com/508 직각 모퉁이 방법이 먹히지가 않는것 같습니다 ㅠㅠ

    2012.02.02 22:45 신고 [ ADDR : EDIT/ DEL : REPLY ]
  15. 아.. 정말 그동안 참고했던 내용중에 가장 도움이 되었던것 같습니다~ ^^
    좋은 정보 넘넘 잘 얻어갑니다~~~

    2012.02.13 18:41 신고 [ ADDR : EDIT/ DEL : REPLY ]
  16. What a great stuff you shared here, the way you shared your knowledge here is amazing. Thanks for sharing!

    2012.04.26 20:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 상위 웹사이트가 더 나중에 돌아오겠합니다

    2012.08.12 18:29 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 이 게시물을 작성하는 시간을내어 주셔서 감사합니다, 난 당신이 내 친구들과 함께 작성한 내용을 여러 사람과 공유해야합니다.

    2012.11.01 16:47 신고 [ ADDR : EDIT/ DEL : REPLY ]
  19. 진짜 너무너무 찾고 있었는데 감사합니다ㅠㅠ
    바로 적용해봐야겠어요ㅎㅎ

    2012.12.29 23:48 신고 [ ADDR : EDIT/ DEL : REPLY ]
  20. I am impressed. I don't think Ive met anyone who knows as much about this subject as you do. You are truly well informed and very intelligent. You wrote something that people could understand and made the subject intriguing for everyone. Really, great blog you have got here.

    2013.07.30 13:22 신고 [ ADDR : EDIT/ DEL : REPLY ]
  21. 설명하신대로 따라 했더니 쉽게 고쳐지네요.
    잘 배웠습니다. 좋은 글 잘 보고 있습니다~^ ^

    2015.09.21 01:29 신고 [ ADDR : EDIT/ DEL : REPLY ]

티스토리 툴바