[티스토리 반응형 스킨] FastBoot v1.1 배포 / 다운로드
PC Size
FastBoot v1.1
반응형 / 모바일, PC, 태블릿 겸용
수정사항
1. 다른글 보기 영역 표시 수정
2. 기타 잡 버그 수정
v1.0
Test Blog
Download
'반응형 티스토리 > FastBoot' 카테고리의 다른 글
반응형 스킨 FastBoot v1.3.5 공개 / 배포 (IE8 지원) (117) | 2014.03.12 |
---|---|
우측 배찌 색깔 바꾸기 (6) | 2014.03.12 |
[임시패치] FastBoot IE8 동작 개선 (18) | 2014.03.10 |
FastBoot스킨 IE8 속도 빠르게 하기 / 플러그인 호환 문제 (10) | 2014.03.10 |
FastBoot v1.3 반응형 스킨 블로그에 적용하기 (62) | 2014.03.08 |
티스토리 반응형 스킨 FastBoot v1.3 작업현황 (8) | 2014.03.06 |
[티스토리 반응형 스킨] FastBoot v1.2 Specification / 배포 (19) | 2014.02.26 |
[티스토리 반응형 스킨] FastBoot v1.1 배포 / 다운로드 (16) | 2014.02.19 |
[티스토리 반응형스킨 배포] FastBoot v1.0 다운로드 (Bootstrap) (14) | 2014.02.15 |
[티스토리 스킨] FastBoot Alpha 버전 완성 (16) | 2013.11.19 |
[티스토리 스킨] 반응형 스킨 FastBoot(패스트부트) 제작 30% 완료 (0) | 2013.11.18 |
믹스업의 경우는 모바일에서 도저히 이쁘게 나오게 할 수 없어서 그렇게라도 했습니다.
다름이 아니라 본문이랑.사이드바 수정은 어디서 잡아줘야하나여?^^
스킨이 달라서 어디를 수정해야할지가 모르겠습니다...
<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의 특성상 처음부터 유동형으로 제작하지 않았기 때문에 수정한다면 저 위의 두가지 경우의 정도로 수정이 가능하겠네요. 좀 더 와이드한 화면을 바라신 것 같은데 도움이 못되어 죄송합니다.
덕분에 수정이 잘되가고 있네여 마지막으로 질문점 하겠습니다 ㅠㅠ
사이드바 줄을 없애는 방법은 어떻게 하면될가여 ?
그리고 님 처럼 카운터를 하고싶은데 마지막조언점 부탁드릴게염
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;
}
이렇게 추가하심 없어질 겁니다.
설명해주시기도 힘들실텐데... 고생이 많으십니다
스킨 잘스도록 하겠습니다 꾸벅~~
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컴퓨터님 블로그에서 해보니까 없어지는데요 ㅎㅎ..