테스트가 부족했던 관계로 미흡한 부분이 발견되고 있으며, 이를 보완하고 패치내역을 공개하고 있습니다. 불편하시더라도 패치내역을 둘러 보시길 권합니다.
모든 패치내용을 반드시 수정할 필요는 없습니다. 패치내역을 살펴보시고 적용하길 원한다면 새 파일을 다운로드 하거나 직접 수정할 수 있도록 설명을 보태고 있습니다(오래된 패치내용 부터 최신순으로 수정하세요).
[2016.01.24]] 패치 내용의 전달을 수월하게 진행하기 위해 GitHub의 변경이력을 살펴볼 수 있도록 변경되었습니다.
댓글과 방명록 폼버그 수정
증상 : 댓글과 방명록에 댓글이나 답글을 작성한 후, 신규 댓글이나 답글을 작성하기 위해 입력폼을 선택해도 동작하지 않는 버그
해결 : main.js 파일의 //폼액션 부분을 찾아 삭제하고 아래의 코드로 대체한다.
//폼액션
$(document).on('focus', '.focus-target', function(){
$(this).closest('.focus-wrap').addClass('focus');
});
$(document).on('focusout', '.focus-target', function(){
$(this).closest('.focus-wrap').removeClass('focus');
});
$(document).on('focus','.textboxs textarea', function(){
$('.write-form').addClass('active');
$(this).siblings('label').fadeOut('fast');
});
$(document).on('focusout','.textboxs textarea', function(){
if($(this).val() == ''){
$(this).siblings('label').fadeIn('fast');
}
});
//goToTop
.....
더보기 스타일 수정
증상 : 더보기의 접힌 상태의 과도한 줄높이 및 여백, 더보기 콘텐츠의 여백 수정
해결 : style.css 파일의 더보기 스타일을 아래의 지시에 따라 수정한다.
.moreless_top,.moreless_content{border-bottom:0;} 와 .moreless_bottom,.moreless_content{border-top:0;} 을 삭제하고 아래 스타일을 추가가한다.
.moreless_top {border-bottom: 0;}
.moreless_bottom {border-top: 0;}
.moreless_content {
padding: 1.5em 15px;
border-top-style: dashed;
border-bottom-style: dashed;
}
.moreless_fold,.moreless_top,.moreless_bottom {...} 스타일을 아래와 같이 수정한다.
.moreless_fold,
.moreless_top,
.moreless_bottom {
display: table-cell;
width: 10000px;
height: 80px;
vertical-align: middle;
color: #72787f;
font-weight: bold;
border-top-width: 3px;
}
old.css 파일의 .moreless_fold,.moreless_top,.moreless_bottom {...} 부분을 아래와 같이 수정한다.
.moreless_fold,
.moreless_top,
.moreless_bottom {
*display: block;
*width: auto;
*height: auto;
*padding-left: 15px;
*line-height: 40px;
*zoom: 1;
}
사이드바 카테고리 카운트 수정
증상 : 구형 IE에서 카테고리 카운트 부분의 위치가 부정확하다.
해결 : style.css 파일의 .module-category .c_cnt 부분에 위치제어를 추가한다.
.module-category .c_cnt {
position: absolute;
top: 0;
right: 5px;
font-size: .8em;
}
사이드바 카테고리 NEW 아이콘 FOUC 처리
증상 : 기존의 NEW 아이콘 이미지가 노출된 체로 새로운 NEW 아이콘으로 변경된다.
해결 : reset.css 파일의 FOUC 처리 부분에 NEW 아이콘을 추가한다.
.loading .fouc,
.loading .tt-cate img[alt="N"] {
opacity: 0 !important;
}
.fouc,
.tt-cate img[alt="N"] {
opacity: 1 !important;
-webkit-transition-property: opacity;
-webkit-transition-delay: .6s;
-webkit-transition-duration: .6s;
transition-property: opacity;transition-delay: .6s;
transition-duration: .6s;
}
.no-csstransitions .loading .fouc,
.no-csstransitions .loading .tt-cate img[alt="N"] {
visibility: hidden;
}
.no-csstransitions .fouc,
.no-csstransitions .tt-cate img[alt="N"] {
visibility: visible;
}
사이트 헤더와 푸터에 최소너비 지정
증상 : 구형 IE에서 사이트 헤더와 푸터의 최소너비를 지정하여 창의 크기를 줄여도 디자인이 깨지지 않도록 한다.
해결 : old.css 파일의 레이아웃부분에 최소너비를 아래와 같이 지정한다.
#site-header,
#site-footer {
min-width: 1000px;
}
테이블 관련 서식 업데이트
증상 : 소스의 원본은 부트스트랩에서 차용해서 쓰고 있으며, 업데이트 내용을 적용한다.
해결 : reset.css 파일의 table 관련 스타일을 삭제하고 이를 아래의 내용으로 대체한다.
/* table */
table{background-color:transparent;}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left;}th{text-align:left;}.table{width:100%;max-width:100%;margin-bottom:20px}.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.42857143;vertical-align:middle;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd;}.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>th,.table>caption+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>td,.table>thead:first-child>tr:first-child>td{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>thead>tr>th,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>tbody>tr>td,.table-condensed>tfoot>tr>td{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px}.table-striped>tbody>tr:nth-child(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}table col[class*="col-"]{position:static;display:table-column;float:none;}table td[class*="col-"],table th[class*="col-"]{position:static;display:table-cell;float:none;}.table>thead>tr>td.active,.table>tbody>tr>td.active,.table>tfoot>tr>td.active,.table>thead>tr>th.active,.table>tbody>tr>th.active,.table>tfoot>tr>th.active,.table>thead>tr.active >td,.table>tbody>tr.active>td,.table>tfoot>tr.active>td,.table>thead>tr.active>th,.table>tbody>tr.active>th,.table>tfoot>tr.active>th{background-color:#f5f5f5;}.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover,.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr.active:hover>th{background-color:#e8e8e8}.table>thead>tr>td.success,.table>tbody>tr>td.success,.table>tfoot>tr>td.success,.table>thead>tr>th.success,.table>tbody>tr>th.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>tbody>tr.success>td,.table>tfoot>tr.success>td,.table>thead>tr.success>th,.table>tbody>tr.success>th,.table>tfoot>tr.success>th{background-color:#dff0d8}.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover,.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr.success:hover>th{background-color:#d0e9c6}.table>thead>tr>td.info,.table>tbody>tr>td.info,.table>tfoot>tr>td.info,.table>thead>tr>th.info,.table>tbody>tr>th.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>tbody>tr.info>td,.table>tfoot>tr.info>td,.table>thead>tr.info>th,.table>tbody>tr.info>th,.table>tfoot>tr.info>th{background-color:#d9edf7}.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover,.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr.info:hover>th{background-color:#c4e3f3}.table>thead>tr>td.warning,.table>tbody>tr>td.warning,.table>tfoot>tr>td.warning,.table>thead>tr>th.warning,.table>tbody>tr>th.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>tbody>tr.warning>td,.table>tfoot>tr.warning>td,.table>thead>tr.warning>th,.table>tbody>tr.warning>th,.table>tfoot>tr.warning>th{background-color:#fcf8e3}.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover,.table-hover>tbody>tr.warning:hover>td,.table-hover > tbody > tr:hover > .warning,.table-hover>tbody>tr.warning:hover>th{background-color:#faf2cc}.table>thead>tr>td.danger,.table>tbody>tr>td.danger,.table>tfoot>tr>td.danger,.table>thead>tr>th.danger,.table>tbody>tr>th.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>tbody>tr.danger>td,.table>tfoot>tr.danger>td,.table>thead>tr.danger>th,.table>tbody>tr.danger>th,.table>tfoot>tr.danger>th{background-color:#f2dede}.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover,.table-hover>tbody>tr.danger:hover>td,.table-hover > tbody > tr:hover > .danger,.table-hover>tbody>tr.danger:hover>th{background-color:#ebcccc}.table-responsive{min-height:.01%;overflow-x:auto;}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd;}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>thead>tr>th,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tfoot>tr>td{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>thead>tr>th:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child{border-left:0}.table-responsive>.table-bordered>thead>tr>th:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>th,.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>td{border-bottom:0}}
홈화면 및 카테고리 목록 스타일 수정
증상 : 홈화면 및 카테고리 목록의 메타정보(카테고리명과 날짜) 부분의 콘텐츠가 길어지면 썸네일 위로 오버랩된다.
해결 : style.css 파일의 .list-meta 을 아래와 같이 수정한다.
.list-meta {margin-top: 5px; font-size: .85em; white-space: normal;}
더보기 스타일 수정
증상 : 더보기를 확장했을때 잘못 설정된 여백값으로 인해 콘텐츠가 위로 움직인다.
해결 : style.css 파일의 .moreless_top, .moreless_bottom {margin:0;} 을 삭제하고 아래의 스타일을 추가한다.
.moreless_top {margin-bottom: 0}
.moreless_bottom {margin-top: 0;}
다음맵 반응형 스타일 추가
증상 : 에디터로 삽입하는 다음 지도가 반응형으로 작동하지 않는다.
해결 : style.css 파일의 Tistory Plugins 영역에 아래의 내용을 추가한다.
/* 다음맵 */
iframe[id^="emap"]{max-width: 100%;}
경보 스타일 수정
증상 : 경보의 콘텐츠가 한 줄일때, 세로 가운데 정렬이 되지 못한다.
해결 : reset.css 파일의 .alert 의 반응형 부분을 아래와 같이 수정하고 업로드한다.
@media (min-width: 768px) {
.alert {
display: table-cell;
position: relative;
width: 10000px;
height: 108px;
vertical-align: middle;
padding: 30px 30px 30px 100px;
color: #666;
background-color: #fafafa;
}
}
old.css 파일의 .alert 부분도 아래와 같이 수정하고 업로드한다.
.alert {
display: table-cell;
position: relative;
height: 108px;
width: 10000px;
vertical-align: middle;
padding: 30px 30px 30px 100px;
color: #666;
font-size: 12px;
background-color: #fafafa;
*display: block;
*width: auto;
*height: auto;
*min-height: 50px;
*zoom:expression(this.runtimeStyle['zoom'] = '1',this.insertBefore(document.createElement("i"), this.firstChild).className="ie-before");
}
'티스토리 > 스킨배포' 카테고리의 다른 글
| CCZ-CROSS 스킨 배포 (701) | 2015.12.26 |
|---|
