반응형스킨 Fast Boot v1.5 변경 후 수정사항 - 1

반응형 스킨 Fast boot 1.5 에서는 

Offcanvas, Locator, RSS Image Fetch 와 IE7 에서도 작동하는 스킨 입니다.

 

배포 및 저작권자는 'Readiz'님 입니다. 스킨다운 및 세부적인 사항은 http://blog.readiz.com 에서 확인 하실 수 있습니다.

 

 

 

반응형스킨 fastboot v1.5 변경 후 제가 수정한 사항은 아래 와 같습니다

 

✓  상단 메뉴바 아이콘 추가✓  카테고리 경로 메뉴 글씨크기 수정✓  블로그 설명 모듈 수정✓ 카테고리의 다른 글 위치 변경

 

 

 

 

---

 

✓

 상단 아이콘 추가

 

<!--F 상단 네비게이션 바 시작 --> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <span class="lntoggle visible-xs"><i class="fa fa-list-ul fa-2x fa-fw"></i></span> <div id="searchButton" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><i class="fa fa-search fa-2x fa-fw"></i></div> <div class="container"> <div class="navbar-header"> <div id="blog_title" class="visible-xs" style="overflow:hidden; height:50px; line-height:2.5em; font-size: 1.4em; font-weight: bold; text-align: center; color: white;">조각모음</div> <a class="navbar-brand dropdown-toggle hidden-xs" data-toggle="dropdown" href="#">조각모음 <span class="fa fa-caret-down"></span></a>

 

위의 사진은 변경 전 skin.html 화면 입니다

 

<!--F 상단 네비게이션 바 시작 --> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <span class="lntoggle visible-xs"><i class="fa fa-list-ul fa-2x fa-fw"></i></span> <div id="searchButton" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><i class="fa fa-search fa-2x fa-fw"></i></div> <div class="container"> <div class="navbar-header"> <div id="blog_title" class="visible-xs" style="overflow:hidden; height:50px; line-height:2.5em; font-size: 1.4em; font-weight: bold; text-align: center; color: white;">조각모음</div> <a class="navbar-brand dropdown-toggle hidden-xs" data-toggle="dropdown" href="#"><img src="https://t1.daumcdn.net/cfile/tistory/277E43335333BBD31C"/> [$$_title_$$] <span class="fa fa-caret-down"></span></a>

 

skin.html 에서 <div class="navbar-header"> 검색 후 <img src="이미지URL 주소"/>를 위에 보이시는 [

$$_title_$$]앞부붙에

 넣어 주시면 되는데요 아이콘 사이즈에 따라 위치설정을 해주셔야 합니다

저의 경우는 40x40 사이즈로 했으며 style.css 에 아래 코드를 추가 하였습니다

 

.navbar-brand { padding: 0; padding-top:6px; /*상단 아이콘위치*/ padding-right:10px; /*우측 여백*/ }

 

 

---

 

✓ 

카테고리 경로 메뉴 글씨 크기

 

 

#bread_nav a { display: block; float: left; height: 20px; background: #5ac8fa; text-align: center; padding: 2.5px 10px 0 20px; position: relative; margin: 0 5px 0 0; font-size: 12px; text-decoration: none; color: #fff;

 

style.css 에서 #bread_nav a 검색 후 font-size 부분 에서 원하시는 크기로 수정 하시면 되겠습니다.

 

---

 

✓ 블로그 설명 모듈 수정

프로필 사진이 상단 중앙에 노출 되고 밑에 닉네임,설명이 노출 됩니다

 

 

 

<!-- 블로그 설명 모듈 --> <div class="panel panel-default"> <h4 class="panel-heading"><i class="fa fa-pencil"></i> Author</h4> <div class="panel-body" id="blogDesc" style="text-align:center;"> <img class="pfimg" src="https://t1.daumcdn.net/cfile/tistory/2753DF475336FCCC2A" alt="블로그 이미지" /><br/> <b>사이먼헬</b><br/> 아는만큼 쓰고 공유하는 조각모음 </div> </div>

 

onasaju님 블로그 도움을 받아 수정 하였습니다

skin.html 에서 주석 처리되어 있는 

<!-- 블로그 설명 모듈 --> 검색 후 위의 코드로 덮어 씌우시면 되는데요 

<img class="pfimg" src="이미지URL주소" 

부분 이미지URL, 블로그 이름, 설명 변경 하시기 바랍니다.

 

---

 

 ✓ 카테고리의 다른 글 위치 변경

저의 경우 애드센스 광고를 본문 상단, 하단에 1개씩 배치 중인데요 카테고리 다른 글 위치를 태그 바로 위로 변경 하였습니다.

 

<title>[$$_page_title_$$] :: [$$_title_$$]</title> <script type="text/javascript" language="javascript"> var MissFlash_Div_Num = 1; </script> <script type="text/javascript" language="javascript"> function getElementsByClass(MissFlash_Div_Num,searchClass,node,tag){ var classElements = new Array(); if(node == null) node = document; if(tag == null) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); var j = 0; var MissFlash_Check = 1; var MissFlash_ID = "MF_Reference" + MissFlash_Div_Num; for(i=0; i<elsLen; i++){ if(pattern.test(els[i].className)){ classElements[j] = els[i]; j++; if(els[i].id.indexOf("MF_Reference") == -1){ var result = els[i].innerHTML; els[i].style.display = "none"; } } } return result; } </script>

 

skin.html 에서 

<title> 검색 후 위의 코드를 넣어주세요. 

</title> 다음부터에 붙여넣으시면 됩니다.

 

<div id="MF_Reference" class="another_category another_category_color_gray"></div> <script type="text/javascript"> var MF_Reference = document.getElementById('MF_Reference'); MF_Reference.setAttribute("id", "MF_Reference" + MissFlash_Div_Num); MF_Reference.className = "another_category another_category_color_gray"; var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category"); MF_Reference.innerHTML = ref_source; MissFlash_Div_Num += 1; //]]> </script>

 

다음은 노출 하고자하는 위치에 위 코드를 붙어넣으시면 되는데요 저의 경우는 애드센스 하단 광고 끝부분에 삽입 하였습니다.

 

 

---

 

 

스킨관련 첫 포스팅이라 두서 없이 주절주절 거리느라 진땀을 뺏네요..끝까지 읽어주신 분들께 감사드리며 포스팅 마치겠습니다..ㅠ