티스토리 실험실 테마

    티스토리 실험실 블로그에 적용 예정인 테마입니다. (아직 계획단계에 있는 블로그입니다.) 


    Fastboot의 상단바를 스크린샷에 보이는 것 처럼 상단바를 구현해줍니다.

    -로케이터와 카테고리가 최상단으로 이동.

    -상단바 배경이 투명했다가 스크롤시 배경이 나타남


    다운로드


    Tlab.css


    -(7/31)모바일에서 여백 오류를 수정했습니다.

    -(8/2)모바일 여백오류 다시 수정했습니다. 애니메이션 효과를 수정했습니다. IE8호환을 위해 상단바 고정시 border-bottom이 추가되었습니다.


    적용 방법

    1. HTML/CSS 수정 - 파일 업로드 탭에서 다운받은 css 파일을 업로드합니다.

    2. HTML/CSS 수정 - skin.html에서 </head>를 찾아 위줄을 한칸 띄운 뒤 다음 코드를 붙여넣고 저장합니다.

      <link href="./images/Tlab.css" rel="stylesheet" />



    추가로 적용하기 추천드리는 부분

     - Fastboot 데스크탑 상단바 스크롤 애니메이션을 더 부드럽게!

    여기서 추가수정 부분도 적용하셔야 전환효과가 어색하지 않습니다.





    Fastboot 스킨 알아보기

    Fastboot 스킨 커스텀 테마 제작 가이드

    Fastboot 스킨 커스텀 테마 갤러리



    저작자 표시 비영리 동일 조건 변경 허락
    신고
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 핑픵
      2014.07.21 09:26 신고

      뒷 배경은 어떻게 바꾸나요?

      • BlogIcon 뭐하라
        2014.07.21 09:43 신고

        css파일 열어보시면 background에 url이 있을텐데 수정하시면 됩니다

    • BlogIcon CRISPR
      2014.08.02 21:21 신고

      모바일에서 여백 오류가 아직 해결되지 않은것 같습니다.
      Tlab.css 파일 삭제후 다시 추가해도 그대로입니다.
      그리고 모바일에서 오른쪽 상단에 돋보기 버튼도 작동하지 않습니다!

      • BlogIcon 뭐하라
        2014.08.02 21:35 신고

        제보감사합니다^^
        다시 수정해서 올렸으니 확인해보세요.
        검색창은 제 잘못이 아닌듯하네요..ㅎㅎ

      • BlogIcon CRISPR
        2014.08.02 22:04 신고

        빠른 피드백 감사합니다! :)
        검색창은 제가 뭘 잘못 건드렸나 봅니다ㅠ

    • BlogIcon 도올돌
      2014.09.04 11:43 신고

      이번 참에 이 스킨으로 교체하면서 유용한 자료 많이 배워서 적용했습니다.
      감사합니다.

    • BlogIcon P나무
      2014.09.09 12:20 신고

      지금 이 댓글창만 따로 쓰고싶은데 어떻게 하나요??

      • BlogIcon 뭐하라
        2014.09.09 13:00 신고

        이 블로그에서 댓글 탭으로 검색해보세요~

    • BlogIcon 오렌지수박
      2014.09.18 21:31 신고

      방금 적용했는데 뭐하라님 이 블로그처럼 스크롤하여 상단바 내비가 접혀진 상태에도 흰색 부분이 투명하게 나오고 싶은데 그렇게 하려면 어떻게 해야 하나요?

      • BlogIcon 뭐하라
        2014.09.18 23:02 신고

        css에 다음을 추가하면 됩니다.
        #desktopNav {opacity: 0.8;}

      • BlogIcon 오렌지수박
        2014.09.18 23:42 신고

        감사합니다! 이 글과는 무관한 이야기인데 혹시 지금 이 블로그 상단바 내비 문구 [Life is an egg.] [삶은 달걀이다.]처럼 상단바 내비의 블로그 타이틀 밑에 아래 조그맣게 글 넣어서 펼쳐질 때만 보이고 접혀질 때는 안 보이게 하는 방법도 알 수 있을까요?^^;;

      • BlogIcon 뭐하라
        2014.09.18 23:47 신고

        조그만 글자는 따로 스킨에 넣는게 아니라 환경설정-기본정보에 설명을 쓰시면 나타나요~^^

      • BlogIcon 오렌지수박
        2014.09.18 23:49 신고

        아 그렇군요! 정말 알고 싶어서 혼자 이것저것 만지고 있었거든요ㅋㅋ 감사합니다. 좋은밤 되세요^^

    • BlogIcon 쉼표찍기
      2014.09.21 15:47 신고

      정보 너무 감사합니다. 저도 되니까 너무 기분 좋으네요..

      근데, 스크롤바를 내리면 생기는 메뉴는 그대로 있어요..제가 뭘 잘못 한걸까요? 제 블로그는 http://noulajou.tistory.com인데요.
      추가로, 배경이미지도 넣었는데 양쪽 가로로 조금 여백이 생겨요 ㅠ

      조언 좀 부탁드립니다.

      • BlogIcon 뭐하라
        2014.09.21 18:24 신고

        Fastboot 최신버전으로 다시 설치해보세요.
        스크롤내릴때 나오는 상단바는 1.6까지 적용되던것이고 1.6.1에서 없어졌거든요.
        배경화면의 경우에는 background-size:contain 되어있는 것을
        background-size:cover로 바꾸시면 됩니다만, IE8이하에서 제대로 표시가 안됩니다.
        그냥 배경 그림의 세로 크기를 좀 짧게 잘라주시면 됩니다.

    • BlogIcon 쉼표찍기
      2014.09.21 18:53 신고

      cover로 하니까 되었어요 ^^
      말씀해주신 대로 새로 설치하려고 버전을 봤더니 1.6.1이에요.
      그래도 다시 한번 설치해볼게요
      조언 고맙습니다

    • BlogIcon 쉼표찍기
      2014.09.22 11:03 신고

      뭐하라님 덕분에 문제가 모두 해결되었어요. 감사합니다.
      스킨을 자유롭게 다루셔서 한가지 궁금한 게 있는데 혹시 가능할런지 여쭤볼게요.
      전 fastfoot의 메인화면을 티에디션 사용하는 걸로 했는데 기존의 리즈님 메인화면처럼
      티에디션을 사용하는 메인화면에서만 사이드바가 안보이는게 가능할까요?
      가능하다면 꼭 그렇게 사용하고 싶어서요..

      • BlogIcon 뭐하라
        2014.09.22 11:04 신고

        안될건 없지만 좀 복잡합니다. 작동할진 모르겠지만 아래 코드를 html </body>위에 붙여보세요
        <script>
        if(url[1] == '') {
        $("#leftContent").addClass("col-md-12").removeClass("col-md-9");
        $("#sidebar").hide();
        };
        </script>

    • BlogIcon 쉼표찍기
      2014.09.22 13:24 신고

      뭐하라님 너무 감사드려요 ㅠㅠ
      아주 잘 작동되요 ^^

    • BlogIcon 쉼표찍기
      2014.09.22 15:22 신고

      문제가 있어서 다시 질문드려도 될가요? 너무 많이 물어봐서 ...죄송한데요...
      상단메뉴 title과 desc에 홈으로 가도록 수정했더니 글자가 하늘색으로 변하는데 왜 그럴까요? ㅠㅠ
      모바일에도 해줬더니 똑같이 하늘색으로 되요..


      그리고... 티에디션이 상단메뉴뒤에 가려져 있는데요.
      앞으로 나오게 할 수 없을까요?

      • BlogIcon 뭐하라
        2014.09.22 15:42 신고

        타이틀부분은 http://nubiz.tistory.com/451 참조하시고
        티에디션은 무슨말인지 잘 모르겠는데..
        티에디션 편집버튼같은거 말씀하시는거면 저한테는 안떠서 잘 모르겠네요..

      • BlogIcon Artsky
        2014.09.24 21:32 신고

        화면 설정 티에디션 베너 사용이 가린다는 말씀 같은데요.
        이거 사용 하실려면 화면 설정 가셔서 티에디션 사작히기 쓰시면 될 겁니다.
        배너 사용은 체크 해제 해주면 더 깔끔하겠죠
        자주 쓰는 것이 아니기 때문에
        관리자-화면설정-티에디션 시작하기 그럼 메인 화면에 뜰 겁니다.

    • BlogIcon 삼오삼동
      2017.11.02 19:17 신고

      fastboot 1.6.2를 사용하고 있습니다. 몇번을 재다운로드 받아보고, fastboot 스킨을 쓰시는 분께 오리지날 스킨을 받아도
      로케이터 부분이 적용이 되질 않습니다.. 뭐하라님의 상단고정을 하면 뜰까 싶어 하였지만
      상단은 고정이 되어도 여전히 로케이터는 뜨지 않더라구요.. 무엇이 문제일까요..?

      • BlogIcon 뭐하라
        2017.11.04 18:13 신고

        일단은 삼오삼동님 블로그에서 발생하는 오류를 수정해보면 될것같습니다.
        html에서
        if(!f_enableTedition && url[1] == '') {
        이 아랫줄의 document.title='~
        여기서 작은따옴표'를 큰따옴표"로 바꿔주세요. 블로그제목에 작은따옴표가 포함되어있어서 오류가 발생했습니다.

        http://blog.readiz.com/221
        여기 4번에 해당하는 내용입니다

      • BlogIcon 삼오삼동
        2017.11.05 23:01 신고

        감사합니다!! 해결되었습니다!!
        정말 골머리를 앓고 있었는데, 이렇게 되는 것이었군요. 정말 감사합니다 :D

티스토리 툴바