[티스토리 반응형 스킨] FastBoot v1.1 배포 / 다운로드

Posted by Readiz
2014.02.19 20:46 반응형 티스토리/FastBoot


PC Size


태블릿 / 모바일 화면




FastBoot v1.1

반응형 / 모바일, PC, 태블릿 겸용


수정사항

1. 다른글 보기 영역 표시 수정

2. 기타 잡 버그 수정



v1.0



Test Blog


Download


저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 이 블로그에 적용시킨 반응형 스킨인 경우는 믹스업 추천 위젯이 특정 크기가 되면 없어지게 했네요. 여러 블로그를 다녔지만 그런 블로그를 보지 못 했거든요. 계속 수정되면 좋은 스킨이 될 것 같습니다.
    • 자세히 보셨군요. ㅎㅎ
      믹스업의 경우는 모바일에서 도저히 이쁘게 나오게 할 수 없어서 그렇게라도 했습니다.
    • 저는 반응형 블로그를 추구한다면 없어져야 한다고 생각하거든요. 가끔 반응형 블로그에서 반응형이 안 되는 티에디션이나 위젯을 사용하는 것을 보면 그렇습니다.
    • 그렇죠. 반응형이 안될꺼면 아예 쓰질 말아야죠. 제가 믹시를 뺀것도 같은 이유구요.. 반응형을 구현하려면 완벽하게 해야한다고 생각합니다.
  2. 안녕하세여 잘쓰고 있습니다
    다름이 아니라 본문이랑.사이드바 수정은 어디서 잡아줘야하나여?^^
    • 감사합니다. 도와드리고 싶은데 어떤걸 말씀하시는거죠? 내용이라면 skin.html에서 수정하시면 되는데요
  3. 본문영역이랑.사이드바 영역 넓히는 방법요~
    스킨이 달라서 어디를 수정해야할지가 모르겠습니다...
    • 아하.. 그 부분이시라면..
      <div id="content" class="col-md-9 col-md-push-3">
      <div id="sidebar" class="sidebar col-md-3 col-md-pull-9">
      이 두 부분인데요..

      Grid System이기 때문에 둘다 동시에 늘릴 수는 없구요,
      하나가 늘어나면 다른 하나가 줄어들어야 합니다.
      아마 화면 폭이 1280이상이신 넓은 모니터를 쓰고 계신 듯 한데..
      이 스킨이 기본적으로 반응형이라서 모든 가로폭을 다 고려한 것이라서 최대값이 정해져 있습니다. 위에서 말씀드린 1280이 그 한계이고 그 이상으로 늘어나진 않습니다.

      만약 사이드바를 더 넓히고 본문을 줄이고 싶으시다면 사이드바와 본문폭의 합이 12가 되게 하시면 됩니다. 무슨말이냐면..
      <div id="content" class="col-md-9 col-md-push-3">
      <div id="sidebar" class="sidebar col-md-3 col-md-pull-9">
      에서 9+3=12죠?
      8+4 역시 12이므로
      <div id="content" class="col-md-8 col-md-push-4">
      <div id="sidebar" class="sidebar col-md-4 col-md-pull-8">
      이러면 본문이 줄어들고 사이드바가 커지구요
      10+2역시 12이므로
      <div id="content" class="col-md-10 col-md-push-2">
      <div id="sidebar" class="sidebar col-md-2 col-md-pull-10">
      이렇게 하시면 본문이 더 넓어지고 사이드바가 줄어듭니다.

      아쉽게도 Bootstrap의 특성상 처음부터 유동형으로 제작하지 않았기 때문에 수정한다면 저 위의 두가지 경우의 정도로 수정이 가능하겠네요. 좀 더 와이드한 화면을 바라신 것 같은데 도움이 못되어 죄송합니다.
  4. 아하 좋은 정보 감사합니다
    덕분에 수정이 잘되가고 있네여 마지막으로 질문점 하겠습니다 ㅠㅠ
    사이드바 줄을 없애는 방법은 어떻게 하면될가여 ?
    그리고 님 처럼 카운터를 하고싶은데 마지막조언점 부탁드릴게염
    • 카운터는 다음버전 업할때 수정해서 올려드릴려고 했지만.. 소스는 아래와 같습니다.
      1. skin.html
      <s_sidebar_element>
      <!-- 카운터 -->
      <div class="panel panel-default">
      <h4 class="panel-heading"><i class="fa fa-bar-chart-o"></i> Counter</h4>
      <ul class="list-group list-group-flush">
      <li class="list-group-item">
      <div class="row">
      <div class="col-xs-4 counter"><i class="fa fa-angle-right"></i> <span class="name">Today</span><br/><span class="count"></span></div>
      <div class="col-xs-4 counter"><i class="fa fa-angle-right"></i> <span class="name">Yesterday</span><br/><span class="count"></span></div>
      <div class="col-xs-4 counter"><i class="fa fa-angle-right"></i> <span class="name">Total</span><br/><span class="count"></span></div>
      </div>
      </li>
      </ul>
      </div>
      </s_sidebar_element>

      2. css
      #sidebar .counter .count {
      font-size:1.3em;
      }
      #sidebar .counter {
      padding: 0;
      text-align:center;
      }


      html은 카운터 부분 전체를 저렇게 덮어주시면 되구요, css는 위 부분을 추가하시면 됩니다.

      아 그리고, 사이드바 줄은..
      #sidebar .panel .list-group-flush .list-group-item {
      border: none;
      }
      이렇게 추가하심 없어질 겁니다.
  5. 고맙습니다^^
    설명해주시기도 힘들실텐데... 고생이 많으십니다
    스킨 잘스도록 하겠습니다 꾸벅~~
  6. 근데 사이드바 줄을 추가시켜도 안없어집니다 ㅠㅠ
    • 음.. 글들 사이에 줄 말씀하시는거 아닌가요?
      CSS에 이런 부분 있죠 찾아보시면요
      #sidebar .panel .list-group-flush .list-group-item {
      padding: 0px 0px;
      }

      이 부분을
      #sidebar .panel .list-group-flush .list-group-item {
      padding: 0px 0px;
      border: none;
      }
      이렇게 수정해보세요.
      D컴퓨터님 블로그에서 해보니까 없어지는데요 ㅎㅎ..
  7. 흠 제가 못하는지 적용이 안되네여 그냥 사용해야게네여^^ㅋㅋ
    • ㅎㅎ.. 해보시다가 다른거 궁금하시면 또 놀러 오세요~~
  8. 네 알겠습니다 ㅎㅎ

티스토리 툴바