Rainbow Bubbles theme.

2011. 8. 9. 00:56IT/Tistory Tips

지금 사용하고 있는 블로그 스킨입니다. 알록달록 동글동글 콘셉트라서 Rainbow Bubbles이라고 이름지었는데, IE8에선 동글동글 효과를 지원하지 않아서 좀 딱딱하네요. Chrome, ChromePlus 등에서 원래 제가 의도한 것과 가장 비슷하게 보입니다. 위 그림이 ChromePlus에서 보이는 화면입니다. Firefox 4, Opera 11, Safari 5(?)에서도 웬만큼 괜찮습니다. IE8에선 동글동글이 안되지만, 나머지 기능적인 부분은 괜찮습니다. IE6 사용자는 전혀 고려하지 않아서 아마 제대로 표시도 안 될 겁니다.^^;;

1. 스킨 대강 설명          ▷ 스킨 내려받기 / 적용 방법 확인으로 바로 이동!!

위에 보이는 것처럼 h3 요소엔 테두리가 있고 p 요소는 맨 앞 들여쓰기, 문단 끝난 후 한 줄 띄우기가 자동으로 됩니다. 인용구 쓸 땐 blockquote 안에 p 요소를 쓰고 p 요소 안에 인용할 내용을 적으면 인용구 앞 뒤에 큰 따옴표가 자동으로 추가됩니다.

스킨을 적용하기 전에 사용자가 수정해야 할 부분이 몇 가지 있습니다. 일단 내려받은 압축 파일에서 skin.html 파일을 메모장이나 Notepad2 등으로 엽니다. 맨 위를 보면 다음과 같은 부분이 있습니다.

<meta name="author" content="저자(글쓴이)" />
<meta name="keywords" content="키워드" />
<meta name="description" content="블로그 설명" />

메타 정보를 입력하는 부분입니다. content에 자신의 블로그에 맞게 정보를 입력하세요.

다음은 좀 복잡한 카테고리 부분입니다. 무지개 메뉴에서 카테고리를 사용하려면 꼭 입력하셔야 할 부분입니다. 티스토리 카테고리는 2단까지 사용할 수 있습니다. 예를 들어 1단 메뉴가 '일상'이고 2단 메뉴가 '습작', '문화생활', '주절주절'이면 먼저 '일상'을 입력하고 하위 분류로 '습작', '문화생활', '주절주절'을 입력해야 합니다. 직접 파일에 입력된 내용을 보면 감이 올 겁니다. skin.html 파일 안에 주석으로 표시된 카테고리 부분을 찾아 원래 입력된 내용을 지우고 블로그에 맞게 분류 이름을 수정합니다. 해당 주소는 1차 분류는 href="/category/1차분류", 2차 분류는 href="/category/1차분류/2차분류"와 같이 수정합니다. 만약 카테고리 이름에 빈 칸이 있으면 주소를 입력할 때 빈 칸 대신 %20을 입력합니다. 예를 들어 href="/category/1차%20분류"와 같은 식으로 입력하면 됩니다.


<a href="http://www.printwhatyoulike.com/print?url=http://티스토리주소.tistory.com[##_article_rep_link_##]" title="웹페이지를 인쇄하거나 PDF/HTML로 저장합니다." target="_blank">Print/Save</a>

이제 skin.html 파일에서 [티스토리주소]를 검색합니다. 위와 같은 부분이 나오면 티스토리주소.tistory.com 대신 자신의 티스토리 주소를 입력합니다. 그러면 방문객이 블로그 글을 보다가 [Print/Save]를 눌렀을 때 바로 PrintWhatYouLike 홈페이지로 연결되어 보고 있는 글을 인쇄하거나 파일로 저장할 수 있습니다.

화면 오른쪽에 보이는 빨강색 Sidebar 단추에 마우스를 올리면 사이드바가 나타납니다. 보통 사이드바처럼 구성하면 됩니다. 맨 위에 블로그 소개 부분에 자신의 블로그 소개 문구를 입력하세요. 기본값은 '블로그 소개글, 좌우명이나 뭐 기타 등등 입력하세요.' 입니다.

태그, 엮인글, 댓글 등입니다. 글을 읽다가 어느 선 이상 아래로 내려가면 화면 오른쪽 아래에 주황색 화살표가 생깁니다. 이 녀석을 클릭하면 화면 맨 위로 올라갑니다.

댓글, 방명록 입력 칸입니다. 개고양이 그림을 다른 걸로 바꾸려면 catdog.png라는 이름으로 스킨에 업로드하면 됩니다.

참고로 strong 요소는 빨강으로 표시됩니다. 검정으로 바꾸려면 style.css에서 .article strong{color:crimson} 부분을 찾아서 삭제하세요.

아, HTML에서 주석은 <!-- 주석 내용 --> 입니다. 사이드바 부분에 카테고리, 달력은 주석 처리되어 표시되지 않습니다. 사이드바에서 사용하지 않을 항목은 <div 라고 시작하는 부분을 <!--div 로 바꾸고 해당 항목 맨 마지막 </div> 부분을 </div-->로 바꾸면 표시되지 않습니다. 반대로 주석 처리된 항목을 표시하려면 <!-- 와 -->를 삭제합니다. 사이드바 만들 때 치환자를 안써서 티스토리 센터에서 사이드바 추가 및 제거할 수 없습니다;;;;

HTML이랑 CSS를 정리하고 주석 붙이고 한다고 했는데 많이 지저분합니다. 특히 CSS는 제가 작성할 때 띄어쓰기나 줄 구분을 안해서 직접 수정하려면 좀 헷갈릴 수 있습니다. 그래도 부분별 주석 및 줄 구분 되어 있으니 괜찮을 겁니다. 필요한 부분을 삭제하지 않게 주의하세요!

HTML5 웹표준을 준수합니다.<참고 1> CSS는 동글동글 효과 때문에 border-radius, box-shadow, transform, transition 등을 남발해서 아마 표준 맞추려면 스타일시트를 거의 처음부터 새로 작성해야 할 겁니다.

Rainbow Bubble 테마는 CCL(저작자 표시-비영리-동일조건변경허락)을 따릅니다. 저작자를 밝히고 팔지만 않으면 자유롭게 수정하고 사용할 수 있습니다.

설명은 대강 된 것 같은데, 혹시 궁금한 점 있으면 댓글로 질문 남겨주세요.

2. 스킨 내려받고 적용하기

일단 혹시 모를 사태에 대비해서 티스토리 센터의 [스킨]으로 이동합니다. 지금 사용하고 있는 스킨 이름과 설명이 나오는데 그 아래의 [스킨 다운로드] 단추를 눌러 지금 사용하는 스킨을 내려받습니다. 또 [스킨 저장]을 눌러 스킨을 저장합니다. 스킨을 저장해두면 나중에 손쉽게 지금 스킨으로 복구할 수 있습니다.

일단 위 파일을 내려받아 압축을 풉니다. 그럼 images란 폴더가 있고 index.xml, preview.gif, skin.html, style.css란 파일이 있습니다. 일단 티스토리 로그인합니다.

티스토리 로그인 후 센터에서 [스킨] - [HTML/CSS 편집]으로 이동합니다. skin.html과 style.css란 칸이 있을 겁니다. 여기에 앞의 내용대로 수정한 skin.html 파일 내용과 style.css 파일 내용을 붙여넣습니다.

이제 images 폴더에 있는 모든 파일(이미지 6개, 자바스크립트 4개)과 index.xml, preview.gif 파일을 [파일 올리기]로 올립니다.

다시 [스킨]으로 이동한 다음 [스킨 저장]을 누릅니다. 그리고 [저장한 스킨] 탭으로 이동해서 방금 저장한 스킨 옆에 있는 [적용]을 누릅니다. 이제 새 스킨이 적용됩니다.

질문이나 오류 신고는 댓글로 남겨주세요.

* IE6, 7, 9 카테고리 메뉴 z-index 수정한 스타일시트

IE6, 7, 9는 겹친 항목의 상하(우선순위?)를 조정하는 z-index 속성을 적용할 때 오류가 있습니다. (position:relative 항목에 position:absolute 항목이 가림.) 상위 relative 항목 z-index 값을 조정해서 제대로 표시하는 꼼수가 있는데, 이 경우는 포함관계가 아니라 적용이 안되네요;;) 제목 오른쪽 귀퉁이에 종이 접힌 듯한 부분만 빠지고 나머지는 똑같습니다. 필요하시면 아래에 첨부된 CSS로 바꿔서 적용하세요. 카테고리 메뉴에 필요없는 스타일도 약간 정리했습니다.

  • 이전 댓글 더보기
  • 프로필사진
    Favicon of https://wt000.tistory.com BlogIcon CLARA★2012.06.06 23:54 신고

    무슨말인지 도저히 모르겠습니다...

    /* 블로그 메뉴 */
    .nav{margin:0;padding:0}
    .nav ul{padding-left:0}
    .nav .root{width:100px;text-align:center;height:24px;border-radius:10px 10px 0 0;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;margin-left:4px;text-transform:uppercase}
    .nav li{float:left;list-style-type:none;padding:8px 10px;position:relative;margin-bottom:0;margin-top:10px}
    .nav li a:link,.nav li a:visited,.nav li a:hover,.nav li a:active,.nav li a:focus{color:#fff;text-decoration:none}
    .tab_category li{clear:both;background:transparent;border:0}
    .nav_sub{position:absolute;background:#FEAC18;background:rgba(255,165,0,.9);border:1px solid #FBC700;margin-left:-99999em;line-height:1.5em;text-align:left}
    .nav_sub li{margin-top:0;margin-bottom:0}
    .tab_category:hover .nav_sub{position:absolute;width:118px;top:40px;right:0;z-index:99;box-shadow:3px 3px 5px rgba(0,0,0,.2);-moz-box-shadow:3px 3px 5px rga(0,0,0,.2);-webkit-box-shadow:3px 3px 5px rgba(0,0,0,.2)}
    .trg{display:block;width:160px}
    .nav_sub1{position:absolute;background:#FEAC18;background:rgba(255,165,0,.9);border:1px solid #FBC700;margin-left:-99999em;line-height:1.5em;text-align:left}
    .nav_sub1-1:hover .nav_sub1{position:absolute;width:125px;top:-1px;right:-65px;z-index:100;box-shadow:3px 3px 5px rgba(0,0,0,.2);-moz-box-shadow:3px 3px 5px rgba(0,0,0,.2);-webkit-box-shadow:3px 3px 5px rgba(0,0,0,.2)}
    .nav_sub2{position:absolute;background:#FEAC18;background:rgba(255,165,0,.9);border:1px solid #FBC700;margin-left:-99999em;line-height:1.5em;text-align:left}
    .nav_sub2-1:hover .nav_sub2{position:absolute;width:125px;top:-1px;right:-65px;z-index:100;box-shadow:3px 3px 5px rgba(0,0,0,.2);-moz-box-shadow:3px 3px 5px rgba(0,0,0,.2);-webkit-box-shadow:3px 3px 5px rgba(0,0,0,.2)}
    .nav_sub3{position:absolute;background:#FEAC18;background:rgba(255,165,0,.9);border:1px solid #FBC700;margin-left:-99999em;line-height:1.5em;text-align:left}
    .nav_sub3-1:hover .nav_sub3{position:absolute;width:125px;top:-1px;right:-65px;z-index:100;box-shadow:3px 3px 5px rgba(0,0,0,.2);-moz-box-shadow:3px 3px 5px rgba(0,0,0,.2);-webkit-box-shadow:3px 3px 5px rgba(0,0,0,.2)}
    .tab_search input{background:#000 url('./images/heart_mag.png') no-repeat 1px 0;border:0;border-bottom:3px double #B3B3B3;padding-left:28px;font:italic 100% Georgia,"Times New Roman",Times,serif;color:#fff;width:72px;height:20px;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
    .placeholder{color:#aaa\9}


    이부분을 카테고리가 3개가아닌 10개로 하려면 어떻게 바꿔줘야 하는건가요?

    님이 적어주신대로 해보니까 3개있던 카테고리마져도 깨져서 보이더군요..

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.06.07 12:47 신고

      음, 확인해보니 잘 되는데 이상하네요.
      제 생각엔 HTML을 입력할 때 처음 li 요소를 닫지 않은 것 같은데 아닌가요?

      <li class="nav_sub4-1"><a class="trg" href="/category/기타">기타2 ▷</a>
      <ul class="nav_sub4">
      <li><a href="/category/기타2/음식2">음식2</a></li>
      <li><a href="/category/기타2/건강%20상식2">건강 상식2</a></li>
      </ul>
      </li>

      이만큼이 한 덩어리입니다. 네 번째 범주에 두 개의 하위 범주가 있는 구조입니다.

      http://tempskintest2.tistory.com/

      위 주소 방문하시면 10개짜리 범주 확인하실 수 있습니다.


      <nav>
      <ul class="nav">
      <li class="root tab_home"><a href="/">Home</a></li>
      <li class="root tab_category"><a href="/category">Category ▽</a>
      <ul class="nav_sub">
      <li class="nav_sub1-1"><a class="trg" href="/category/일상">일상 ▷</a>
      <ul class="nav_sub1">
      <li><a href="/category/일상/습작">습작</a></li>
      <li><a href="/category/일상/문화생활">문화생활</a></li>
      <li><a href="/category/일상/주절주절">주절주절</a></li>
      </ul>
      </li>
      <li class="nav_sub2-1"><a class="trg" href="/category/컴퓨터">컴퓨터 ▷</a>
      <ul class="nav_sub2">
      <li><a href="/category/컴퓨터/컴퓨터%20팁">컴퓨터 팁</a></li>
      <li><a href="/category/컴퓨터/한글화">한글화</a></li>
      <li><a href="/category/컴퓨터/블로그">블로그</a></li>
      <li><a href="/category/컴퓨터/시스템%20유지,%20관리">시스템 유지,관리</a></li>
      <li><a href="/category/컴퓨터/인터넷">인터넷</a></li>
      <li><a href="/category/컴퓨터/멀티미디어">멀티미디어</a></li>
      <li><a href="/category/컴퓨터/파일%20관리">파일 관리</a></li>
      <li><a href="/category/컴퓨터/압축%20프로그램">압축 프로그램</a></li>
      <li><a href="/category/컴퓨터/CD/DVD">CD/DVD</a></li>
      <li><a href="/category/컴퓨터/보안">보안</a></li>
      <li><a href="/category/컴퓨터/오피스">오피스</a></li>
      <li><a href="/category/컴퓨터/기타">기타</a></li>
      </ul>
      </li>
      <li class="nav_sub3-1"><a class="trg" href="/category/기타">기타 ▷</a>
      <ul class="nav_sub3">
      <li><a href="/category/기타/음식">음식</a></li>
      <li><a href="/category/기타/건강%20상식">건강 상식</a></li>
      </ul>
      </li>
      <li class="nav_sub4-1"><a class="trg" href="/category/기타">기타2 ▷</a>
      <ul class="nav_sub4">
      <li><a href="/category/기타/음식">음식2</a></li>
      <li><a href="/category/기타/건강%20상식">건강 상식2</a></li>
      </ul>
      </li>
      <li class="nav_sub5-1"><a class="trg" href="/category/기타">기타2 ▷</a>
      <ul class="nav_sub5">
      <li><a href="/category/기타/음식">음식2</a></li>
      <li><a href="/category/기타/건강%20상식">건강 상식2</a></li>
      </ul>
      </li>
      <li class="nav_sub6-1"><a class="trg" href="/category/기타">기타2 ▷</a>
      <ul class="nav_sub6">
      <li><a href="/category/기타/음식">음식2</a></li>
      <li><a href="/category/기타/건강%20상식">건강 상식2</a></li>
      </ul>
      </li>
      <li class="nav_sub7-1"><a class="trg" href="/category/기타">기타2 ▷</a>
      <ul class="nav_sub7">
      <li><a href="/category/기타/음식">음식2</a></li>
      <li><a href="/category/기타/건강%20상식">건강 상식2</a></li>
      </ul>
      </li>
      <li class="nav_sub8-1"><a class="trg" href="/category/기타">기타2 ▷</a>
      <ul class="nav_sub8">
      <li><a href="/category/기타/음식">음식2</a></li>
      <li><a href="/category/기타/건강%20상식">건강 상식2</a></li>
      </ul>
      </li>
      <li class="nav_sub9-1"><a class="trg" href="/category/기타">기타2 ▷</a>
      <ul class="nav_sub9">
      <li><a href="/category/기타/음식">음식2</a></li>
      <li><a href="/category/기타/건강%20상식">건강 상식2</a></li>
      </ul>
      </li>
      <li class="nav_sub10-1"><a class="trg" href="/category/기타">기타2 ▷</a>
      <ul class="nav_sub10">
      <li><a href="/category/기타/음식">음식2</a></li>
      <li><a href="/category/기타/건강%20상식">건강 상식2</a></li>
      </ul>
      </li>
      </ul>
      </li>
      <li class="root tab_tag"><a href="/tag">Tag</a></li>
      <li class="root tab_medialog"><a href="/media">Media</a></li>
      <li class="root tab_localog"><a href="">Localog</a></li>
      <li class="root tab_guestbook"><a href="/guestbook">Guestbook</a></li>
      <li class="root tab_admin"><a href="/admin">Admin</a></li>
      <li class="root tab_search"><s_search>
      <input type="text" placeholder=" Search..." onfocus="this.value='';" name="{##_search_name_##}" value="{##_search_text_##}" onkeypress="if (event.keyCode == 13) { {##_search_onclick_submit_##} }" class="placeholder" /> <!-- {## 부분에서 {를 [로 바꾸세요. ##} 부분에서 }를 ]로 바꾸세요 -->
      </s_search></li>
      </ul>
      </nav>

      이게 HTML 소스구요.

      /* 블로그 메뉴 */
      .nav{margin:0;padding:0}
      .nav ul{padding-left:0}
      .nav .root{width:100px;text-align:center;height:24px;border-radius:10px 10px 0 0;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;margin-left:4px;text-transform:uppercase}
      .nav li{float:left;list-style-type:none;padding:8px 10px;position:relative;margin-bottom:0;margin-top:10px}
      .nav li a:link,.nav li a:visited,.nav li a:hover,.nav li a:active,.nav li a:focus{color:#fff;text-decoration:none}
      .tab_category li{clear:both;background:transparent;border:0}
      .nav_sub{position:absolute;background:#FEAC18;background:rgba(255,165,0,.9);border:1px solid #FBC700;margin-left:-99999em;line-height:1.5em;text-align:left}
      .nav_sub li{margin-top:0;margin-bottom:0}
      .tab_category:hover .nav_sub{position:absolute;width:118px;top:40px;right:0;z-index:99;box-shadow:3px 3px 5px rgba(0,0,0,.2);-moz-box-shadow:3px 3px 5px rga(0,0,0,.2);-webkit-box-shadow:3px 3px 5px rgba(0,0,0,.2)}
      .trg{display:block;width:160px}
      .nav_sub1,.nav_sub2,.nav_sub3,.nav_sub4,.nav_sub5,.nav_sub6,.nav_sub7,.nav_sub8,.nav_sub9,.nav_sub10{position:absolute;background:#FEAC18;background:rgba(255,165,0,.9);border:1px solid #FBC700;margin-left:-99999em;line-height:1.5em;text-align:left}
      .nav_sub1-1:hover .nav_sub1,.nav_sub2-1:hover .nav_sub2,.nav_sub3-1:hover .nav_sub3,.nav_sub4-1:hover .nav_sub4,.nav_sub5-1:hover .nav_sub5,.nav_sub6-1:hover .nav_sub6,.nav_sub7-1:hover .nav_sub7,.nav_sub8-1:hover .nav_sub8,.nav_sub9-1:hover .nav_sub9,.nav_sub10-1:hover .nav_sub10{position:absolute;width:125px;top:-1px;right:-65px;z-index:100;box-shadow:3px 3px 5px rgba(0,0,0,.2);-moz-box-shadow:3px 3px 5px rgba(0,0,0,.2);-webkit-box-shadow:3px 3px 5px rgba(0,0,0,.2)}
      .tab_search input{background:#000 url('./images/heart_mag.png') no-repeat 1px 0;border:0;border-bottom:3px double #B3B3B3;padding-left:28px;font:italic 100% Georgia,"Times New Roman",Times,serif;width:72px;height:20px;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;color:#fff}
      .placeholder{color:#aaa\9}

      이게 CSS입니다. 카테고리에 링크할 주소와 이름만 바꾸시면 됩니다.

    • 프로필사진
      Favicon of https://wt000.tistory.com BlogIcon CLARA★2012.06.07 17:40 신고

      정말 감사합니다!! 잘적용됬어요~~

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.06.08 08:43 신고

      잘됐네요~
      다음에 범주 추가하실 분들도 참고하시면 되겠군요^^
      잘 쓰세요!!

  • 프로필사진
    Favicon of https://mooksu.tistory.com BlogIcon mooksu2012.09.03 14:37 신고

    우연히 티스토리 서핑중 알게되었습니다. 함 공부할 겸 님의 스킨을 가지고 블로그를 만들어볼까 합니다. 덕분에 좋은 스킨을 만들 수 있을 거 같아 고맙습니다. ^^

  • 프로필사진
    2012.09.06 19:59

    비밀댓글입니다

  • 프로필사진
    Favicon of https://2liter.tistory.com BlogIcon 이리터2012.09.12 09:44 신고

    감사합니다. 잘 쓸게요 :)

  • 프로필사진
    Favicon of https://miscells.tistory.com BlogIcon Invictus_MJ2012.09.13 16:05 신고

    이거 너무 예쁘네요. 잘 사용하겠습니다.

  • 프로필사진
    Favicon of https://drdread.tistory.com BlogIcon 닥터드레드2012.09.15 13:26 신고

    우와 좋네요 잘쓸께요
    최고입니다~
    제가 잘몰라서 하나만 여쭐꼐요 기존 메뉴를 가테고리에 추가 방법은?

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.09.19 09:19 신고

      음, 기존 메뉴가 어떤 걸 이야기하시는거죠?
      고것만 알려주시면 소스 올려 드리겠습니다~

      아니면 스킨 받아서 위에 설명 읽어보면 카테고리 개수 늘리는 것에 대한 내용이 있는데 그 내용대로 하시면 웬만한건 다 추가할 수 있습니다~

  • 프로필사진
    Favicon of https://sonsmade.tistory.com BlogIcon 야근시러2013.02.14 11:03 신고

    스킨 받아서 너무 잘쓰고 있습니다.
    스킨이 너무 이뻐요 ㅎㅎ
    정말 감사합니다~

    근데 혹시 익스플로러9(위도우7) 사용하는 집에서는
    댓글 쓴날짜와 시간 표시되는 네모칸이 까만색으로
    보이는데(circlash 홈페이지도 동일)
    수정하는 방법이 없을까요??

    익스플로러8이랑 크롬에서는 정상적으로 보입니다.
    익스플로러9(윈도우7) 에서만 유독 그렇게 보여서요;

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2013.02.16 00:25 신고

      일단 문제는 IE에서 transform 기능을 적용하기 위해 사용한 filter가 IE9에서 구버전과 다른 방식으로 처리되면서 약간 기울어지게 표현한 부분이 IE9에서만 검게 표시됩니다. 이 filter 부분을 CSS Hack으로 IE8에서만 읽어오도록 수정했는데도 안먹히는군요. 그냥 삭제하면 해결됩니다. 단, IE8 이하에선 날짜와 댓글에 날짜 창이 기울어지지 않습니다.

      일단 스킨 수정 부분의 style.css 부분으로 이동하시고 아래 소스코드를 찾습니다.

      .date{position:absolute;left:-70px;left:-75px\9;top:5px;width:70px;text-align:left;border-radius:0 3px 20px 3px;-moz-border-radius:0 3px 20px 3px;-webkit-border-radius:0 3px 20px 3px;box-shadow:2px 2px 4px #d6ecf3;-moz-box-shadow:2px 2px 4px #d6ecf3;-webkit-box-shadow:2px 2px 4px #d6ecf3;background:#D6ECF3;background:rgba(173,216,230,.5);padding:8px 5px 8px 11px;border:1px solid #ADD8E6;font:.8em/150% verdana;color:#0292c0;-moz-transform: rotate(10deg);-o-transform: rotate(10deg);-webkit-transform: rotate(10deg);-ms-transform: rotate(10deg);transform: rotate(10deg);filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand');zoom:1}

      -moz-transform 부터가 날짜 창을 기울이는 부분입니다. -moz는 Firefox, -o는 Opera, -webkit은 Safari/Chrome 구 버전에 적용되는 것이고 -ms는 Internet Explorer, transform만 있는 것은 해당 CSS를 지원하는 모든 브라우저에 적용됩니다.

      앞서 이야기한 것처럼 filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand'); 부분을 삭제하면 되겠죠~

      똑같은 방식으로 댓글 시간 창을 수정하기 위해 아래 부분을 찾습니다!!

      .box .opt{position:absolute;right:-80px;top:-25px;width:75px;text-align:left;border-radius:0 3px 20px 3px;-moz-border-radius:0 3px 20px 3px;-webkit-border-radius:0 3px 20px 3px;box-shadow:2px 2px 4px #d6ecf3;-moz-box-shadow:2px 2px 4px #d6ecf3;-webkit-box-shadow:2px 2px 4px #d6ecf3;background:#D6ECF3;background:rgba(173,216,230,.5);padding:8px 5px 8px 11px;border:1px solid #ADD8E6;font:.8em/150% verdana;color:#0292c0;-moz-transform: rotate(-10deg);-o-transform: rotate(-10deg);-webkit-transform: rotate(-10deg);-ms-transform: rotate(-10deg);transform: rotate(-10deg); filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=0.17364817766693033, M21=-0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand') ;zoom:1;z-index:6}

      여기선 filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=0.17364817766693033, M21=-0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand') ; 부분 삭제하시구요.


      .reply_box .opt{position:absolute;left:-87px;top:-25px;width:75px;text-align:left;border-radius:0 3px 20px 3px;-moz-border-radius:0 3px 20px 3px;-webkit-border-radius:0 3px 20px 3px;box-shadow:2px 2px 4px #d6ecf3;-moz-box-shadow:2px 2px 4px #d6ecf3;-webkit-box-shadow:2px 2px 4px #d6ecf3;background:#D6ECF3;background:rgba(173,216,230,.5);padding:8px 5px 8px 11px;border:1px solid #ADD8E6;font:.8em/150% verdana;color:#0292c0;-moz-transform: rotate(10deg);-o-transform: rotate(10deg);-webkit-transform: rotate(10deg);-ms-transform: rotate(10deg);transform: rotate(10deg);filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand');zoom:1;z-index:6}

      여기서도 같은 방법으로 filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand'); 부분을 삭제합니다.

      혹시 더 좋은 방법 있으시거나 filter 부분을 CSS Hack으로 처리하는 방법을 아시는 분은 정보 공유 부탁드립니다.

      혹시 수정 후에도 계속 문제가 발생하면 다시 댓글 남겨주세요^^

  • 프로필사진
    Favicon of https://www.ibagu.co.kr BlogIcon 이바구™ -2013.02.16 15:19 신고

    좋은 소스 감사합니다.
    오른쪽 메뉴 너무 깔끔하고 좋네요.

  • 프로필사진
    Favicon of https://sonsmade.tistory.com BlogIcon 야근시러2013.02.22 00:14 신고

    감사합니다.
    혹시 몰라서 주석처리로 없앴어요.
    너무 감사합니다. ~
    까만색 사라졌다 ㅠ
    ----------------------------------------
    혹시 하나만 질문 더드려도 될까요;

    상단 위에 무지개 메뉴중에 카테고리 메뉴를
    메뉴중에 하나만 사용하게 해서 쓰고 있거든요.

    기존 태그,미디어,방명록 ..등은 다른 메뉴로 변경해서 쓰고 있는데.
    예를 들어 태그자리에 있는걸 다른 다른메뉴로 변경한다음에
    태그에서 카테고리처럼 밑으로 내려오면 메뉴를 쓸수 있을까요?

    원래 카테고리 소스를 수정만 하면 될까요??
    아니면 위치까지 수정해야 하나요;;???
    기본 지식이 없다보니 자꾸 기초적인것만 질문드리는것 같습니다ㅠㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2013.02.25 09:37 신고

      원본 카테고리 부분 소스를 그대로 수정해서 사용하시면서 두 번째 수정한 카테고리 위치를 원래 있던 자리에 있는 녀석의 위치로 수정해주시면 됩니다. 예를 들어 미디어 자리에 두 번째 카테고리를 표시하려면 일단 HTML에서 카테고리 메뉴 소스를 미디어 자리로 복사한 다음 class 이름을 바꾸고 CSS 역시 알맞게 복사해주셔야 합니다~
      이렇게 이야기드리면 이해 되실려나 모르겠네요^^;;

  • 프로필사진
    Favicon of https://sonsmade.tistory.com BlogIcon 야근시러2013.02.26 10:15 신고

    굉장히 쉽게 설명해주신거 같은데 제가 이론이 약해서요 ㅎㅎㅎㅎ
    가능하다는 말이시군요~

    이리저리 시도해서 해보고 안되면 다시 질문드릴게요ㅠ
    카테고리 밑으로 하위카테고리 색도 다른걸로 바꿔죠야 할거 같은데..

    금방 다시 질문드릴거 같아요 ㅋ
    감사합니다^^

  • 프로필사진
    Favicon of https://tmlife.tistory.com BlogIcon 樹下2013.05.01 15:32 신고

    전 우측 메뉴 맨끝으로, 댓글쓰기, 댓글보기가 적용안되네요. 어떻게 하면 되나요? 님의 글을 보니 어떤 id를 맞추라는데 그게 무엇인지요? 님의 자료에서 복사하여 제 스킨에 붙인
    입니다. home,top,rss feed는 되는데 나머진 안됩니다. 초보인지라 쉽게 풀어주심 고맙겠습니다.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2013.06.11 09:03 신고

      스킨 html 구조를 보시면
      <div class="commentWrite">란 부분이 있을겁니다. 그 부분을 다음과 같이 바꿉니다.
      <div class="commentWrite" id="commentWrite">

      그다음 오른쪽 옆의 [댓글쓰기] 부분을 아래와 같이 바꿉니다.

      <a class="side_button darkblue_button" href="#commentWrite">

      위에서 추가한

      id="commentWrite" 부분과 href="#commentWrite" 부분이 같으면 그 위치로 이동합니다.

      댓글 보기도 똑같습니다. 일단 한번 수정해보시고 다시 답글 남겨주세요^^

  • 프로필사진
    2013.07.14 00:05

    비밀댓글입니다

  • 프로필사진
    BlogIcon pangmo2013.11.02 16:10

    안녕하세요 ~
    이러저래 검색해서 돌다가 돌다가 들어오게 되어서 지금 몇시간째
    블로그 포스팅을 보고 있네요 -0-ㅋ
    다름이 아니라 스크롤바 옆 사이드바 무지개색 버튼에서
    다른분 댓글에 달린 소스?만해서 적용시키긴 했는데
    빨간색 sidebar 버튼 위에 올리면 사이드바 활성화가 되지 않네요....
    사이드바 버튼 위에 올리면 사이드바 활성화 되게끔 하려는데
    죄송하지만 소스가 어떻게 되는지 알수 있을까요

  • 프로필사진
    Favicon of https://seoul-traveler.tistory.com BlogIcon 하늘^.~2013.11.27 11:15 신고

    안녕하세요?
    이런 사이드바 달고 싶었는데 덕분에 달아보네요.
    댓글보기와 쓰기가 잠시 안됐는데 해결했네요^^
    정말 감사합니다.

  • 프로필사진
    Favicon of https://898989.tistory.com BlogIcon Hi Hello, Daily2013.12.08 21:25 신고

    우측에 있는 사이드메뉴 너무 이뻐요,

    따라서 적용은 해봤는데, 클릭이 안먹히네요....

    #부분을 div id - xxx 를 맞춰서 바꿧는데도 이동을안하네요..

    스킨에 따라 되고 안될수가 있나요?

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2013.12.18 09:05 신고

      스킨에 포함된 스크립트에 따라서 앵커 태그를 사용한 이동을 막아두는 것들이 있는데 그런 스크립트가 포함된 스킨을 사용하신다면 적용이 안될 겁니다.

  • 프로필사진
    Favicon of https://tellzzang.com BlogIcon 안태일2013.12.10 19:38 신고

    좋은글 감사합니다 ^^

  • 프로필사진
    Favicon of https://supervitamin.tistory.com BlogIcon supervitamin2014.01.04 12:08 신고

    안녕하세요^^
    제가 찾던 블로그 스킨이 여기 있었네요.. 감사히 잘 쓰겠습니다.

    그런데 스킨을 적용하고 새글을 써봤는데 글쓰기에서 분류항목이 먹통이되서
    카테고리가 의미가 없어 졌습니다. 어떻게 수정해야 하는거죠?

    그리고 admin에서 category와 같이 하위 메뉴를 사용하고 싶은데
    css에서 수정을 조금 해봤습니다만 배경색이 잘 안맞아 포기 했습니다.^^;;

    가능하시다면 팁을 좀 부탁드리겠습니다.

    감사합니다..^^ 새해 복 많이 받으세요~!!!

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2014.01.04 15:13 신고

      잠깐 가보니 티스토리 설정에서 카테고리를 안만드신것 같아요
      티스토리 관리 화면에서 먼저 카테고리를 생성해주셔야 합니다!!

  • 프로필사진
    Favicon of https://supervitamin.tistory.com BlogIcon supervitamin2014.01.04 16:30 신고

    감사합니다..^^
    카테고리는 해결이 되었습니다.
    초보라 생각도 못했네요..
    하찮은 질문에도 성의껏 답변해주셔서 감동했습니다..^^

    그럼 admin에서 하위 메뉴 사용하는건 어떻게 조치하면 되는지요?
    admin에서 하위 메뉴로 관리자와 쓰기로 나눠서 사용하고 싶습니다.
    css에서 /*블로그 메뉴*/ 네비쪽을 건드려 봤습니다만..
    생각보다 여렵네요.. 배경색두 맞추기 어렵구요..
    도움 부탁드립니다.^^;;

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2014.01.05 13:46 신고

      css 구성은 아래 글을 참고하시면 도움이 될 것 같습니다.
      http://circlash.tistory.com/608

      admin 부분에 하위 요소로 ul 요소를 만들고 그 하위요소로 [관리]와 [글쓰기] 두 개의 li 요소를 구성하면 html 쪽은 끝입니다.

      css는 좀 복잡한데 일단 /* 블로그 메뉴 */ 아래에서 .tab_category가 포함된 부분이나 .nav_sub가 포함된 부분을 읽어보시면 도움이 될 겁니다.

      실제 수정할 내용은 아래와 같습니다.

      ============================
      skin.html

      1. 수정 전
      <li class="root tab_admin"><a href="/admin">Admin</a></li>

      2. 수정 후
      <li class="root tab_admin"><a href="/admin">Admin</a>
      <ul class="nav_sub admin_sub">
      <li><a href="/admin/center/">관리</a></li>
      <li><a href="/admin/entry/post/">글쓰기</a></li>
      </ul>
      </li>

      ===========================
      style.css

      1. 추가사항

      .tab_admin li{clear:both;background:transparent;border:0}
      .tab_admin:hover .admin_sub{position:absolute;width:118px;top:40px;right:0;z-index:99;box-shadow:3px 3px 5px rgba(0,0,0,.2);-moz-box-shadow:3px 3px 5px rga(0,0,0,.2);-webkit-box-shadow:3px 3px 5px rgba(0,0,0,.2)}
      .admin_sub{background:#B44CB4;background:rgba(148,0,148,.7);border:1px solid #a800a8}

      수정 된 모습은 제 블로그 참고하시면 됩니다.

      즐거운 주말 되세요!

  • 프로필사진
    Favicon of https://supervitamin.tistory.com BlogIcon supervitamin2014.01.06 09:16 신고

    완벽하게 적용되었습니다.
    상세한 설명 정말 감사합니다.^^
    자주 들러 공부 좀 많이 해야 겠네요..
    즐거운 한주 보내세요~!!^.~

  • 프로필사진
    Favicon of http://rockchalk.tistory.com BlogIcon rockchalk2014.01.08 15:53

    안녕하세요.~

    스킨을 너무 잘 만드셔서 제 블로그에 참조하려고 하는데 질문이 있어서 댓글 남겨봅니다. ^^

    혹시 오른쪽 버튼에 다음 기능을 넣을 수 있는 방법이 있는지해서 여쭤봅니다.

    1.다음 글 / 이전 글

    2.각종 소셜(페이스북, 트위터, 다음뷰)

    감사합니다. ^^