반응형 스킨 FastBoot v1.6.1 수정

상단 메뉴 및 메인 수정

1. 글쓰기 메뉴 추가

스킨 오른쪽 상단에 기어모양(admin)과 로그인 부분이 있습니다. 저는 메인화면에 글쓰기 기능이 있는 것이 편해서 추가 했습니다. 빨간색으로 표시한 부분이 추가한 부분이며 아이콘 모양은 폰트어썸에서 원하시는 모양으로 입력하시면 됩니다. 저는 폴더 아이콘으로 적용 했습니다. 

skin.html

 <!--F 데스크탑용 네비게이션 바 시작 -->

<div id="desktopNav" class="hidden-xs">

<div class="container">

<p class="graylink pull-right"><a href="/admin/entry/post/" title="post"><i class="fa fa-folder-o fa-fw"></i></a><a href="/admin" title="Admin"><i class="fa fa-cogs"></i></a><span id="loginout_append"><a href="https://www.tistory.com/login"><i class="fa fa-lock fa-fw"></i> Login</a></span></p>

변경 전

변경 후

블로그 첫 화면 티에디션 버튼 숨기고 싶으면 style.css에 다음 코드를 추가해 주세요

#ttLinkEditMode {display: none;}

2. 상단 고정 네비바 카테고리 숫자 폰트, 크기, 괄호 추가

상단 고정 카테고리 메뉴에 표시되는 숫자가 잘 안보이는 듯 하여 크기, 폰트 조절하고 괄호를 넣어 주었습니다. 빨간색 부분이 수정한 부분입니다. #secondNav .c_cnt:before / #secondNav .c_cnt:after 이 부분이 괄호이고, #secondNav .c_cnt 여기서 font-size(글자 크기)와 font-family(글자 모양)을 수정했고, 폰트는 제가 기본 폰트 여러개 테스트해보고 tahoma로 적용했습니다. 

style.css

#secondNav{padding:0 10px;}

#secondNav>ul {float:right; height:32px;}

#secondNav>ul>li {height:32px;color:#434A54;background-color:transparent;}

#secondNav>ul>li>ul>li>a>span.c_cnt{display:none;}

#secondNav .c_cnt:before {content: "(";}

#secondNav .c_cnt:after {content: ") ";}

#secondNav .c_cnt{font-size:11.5px; font-family: tahoma,'굴림',arial black,'돋움','Malgun Gothic'}

#secondNav>ul>li>a{display:none}

변경 전

변경 후

3. 티스토리 메인 카테고리 리스트로 수정

아직 스킨 수정은 처음 해보는거라 메인은 뭐가 좋은지 모르겠고, 어려워서 보기 편한 리스트형으로 수정했습니다.

skin.html

var f_enableTedition = false; /* 이 부분이 false로 되어 있어야 합니다 */

</script>

<script>

/* FastBoot Index by Readiz */

var urlAddr = decodeURIComponent(location.href);urlAddr = urlAddr.replace('http://','').replace('https://','');urlAddr = urlAddr.split('#')[0]; urlAddr = urlAddr.split('?')[0];

var url = urlAddr.split('/');

var rssLogFlag;

if(!f_enableTedition && url[1] == '') {

document.title='상상은 현실이 된다';

rssLogFlag=0; /* 1를 0으로 수정 */

        location.href = '/category'; /* 추가 */

document.write('<style>#sidebar,#content{display:none}#coverDiv{min-height:100%;margin-bottom:50px;display:block;}#coverDiv img{float:right; padding-left:10px; max-width:100%}#coverDiv .info p{margin-bottom:50px;}#coverDiv .col-md-12,#coverDiv .col-md-6{padding:10px}#coverDiv .col-md-3 img{float:none;display:block;margin:auto;padding:0;}#coverDiv .col-md-12 img{max-height:200px;}#coverDiv .col-md-6 img{max-height:150px;}#coverDiv p.des{font-size:12px;}#coverDiv .col-md-12 img{float:left;padding-left:0;padding-right:10px;}#coverDiv div.thumbImages{margin:30px 10px;height:185px;overflow:hidden;text-align:center;}#coverDiv 

변경 전

변경 후

사이드 바 메뉴 수정

1. 사이드바 제목 배경색, 선택 반응색, 댓글 배경색 수정

사이드바 제목 배경색을 좀 진한색으로 수정하고, 사이드바 메뉴 리스트에 마우스 올렸을때 나타나는 배경색을 뭐라고 하는지 잘 모르겠어서 그냥 선택 반응색이라고 했습니다. 이 색도 제가 원하는 색으로 수정했습니다. background-color(배경색)이고, 배경색 바뀔때 리스트 사이에 실선이 보기 싫으신 분은 border-color:#fff(흰색)으로 하시면 됩니다.

현재 블로그 적용색

사이드바 제목 배경색 #d3d3d3 (lightgrey)

사이드바 선택 배경색 #00fa9a (mediumspringgreen)

최근 포스트 댓글 배경색 #9370db (mediumpurple)

style.css

/* 사이드바 제목 부분 */

#sidebar .panel-heading{margin: 0; font-size:16px;padding:5px 10px;font-weight:700;font-family: Malgun Gothic ,'맑은 고딕',Arial, "돋움", Dotum, AppleGothic, sans-serif !important; background: 원하는 색 코드;}

/* 사이드바 선택 배경색 */

#sidebar .list-group-item:hover, #sidebar .list-group-item:focus{background-color: 원하는 색 코드; border-color: #fff}

/* 최근 포스트 부분 */

#recentPost span.name>span {

  display: inline-block;

  min-width: 10px;

  padding: 3px 7px;

  font-size: 12px;

  font-weight: bold !important;

  line-height: 1;

  color: #fff !important;

  text-align: center;

  white-space: nowrap;

  vertical-align: baseline;

  background-color: 원하는 색 코드;

  border-color: #da4453;

  border-radius: 10px;

  padding-left:11px;

변경 전

변경 후

2. 사이드바 카테고리 댓글 수정 및 선택 배경색 적용

사이드바 카테고리 리스트 부분 선택될 때 배경색이 바뀌는 것이 적용이 안되서 한참 애먹었었네요. 카테고리는 다른 메뉴들하고 다른 것을 수정해야 적용이 되더라구요. 그리고 댓글은 평범한 것으로 수정해 보았습니다. 빨간색 부분을 추가해 주시면 됩니다.

style.css (카테고리 선택 배경색)

/* category */

#sidebar .category .panel-body {padding:0}

#sidebar .category .panel-heading {border-bottom: none;}

#sidebar .category.panel ul li a:hover, #sidebar .category.panel ul li a:focus{background-color: 원하는 색 코드; border-color:#fff}

#sidebar .category.panel li{border-top: 1px solid #ddd;}

#sidebar .category.panel ul{list-style:none;margin:0;padding:0;}

#sidebar .category li{padding: 0;}

style.css (카테고리 댓글 수정 전)

#sidebar .c_cnt { /* 카테고리 옆 개수 */

  display: inline-block;

  min-width: 10px;

  padding: 2px 6px;

  font-weight: bold !important;

  color: #fff !important;

  text-align: center;

  white-space: nowrap;

  vertical-align: baseline;

  background-color: #aab2bd;

  margin-top: -2px;

  border-radius: 10px;

  float:right;

}

style.css (카테고리 댓글 수정 후 빨간색 괄호 추가)

#sidebar .c_cnt:before {content: "(";}

#sidebar .c_cnt:after {content: ") ";}

#sidebar .c_cnt { /* 카테고리 옆 개수 */

  display: inline-block;

  min-width: 10px;

  padding: 2px 6px;

  font-size : 13px !important;

  color: #708090 !important;

  text-align: center;

  white-space: nowrap;

  vertical-align: baseline;

  margin-top: -2px;

  border-radius: 10px;

  float:right;

}

댓글이 오른쪽 정렬되지 않게 하시려면 float:right; 이 부분을 float: auto; 로 바꾸시면 됩니다.

변경 전

변경 후

3. 고정 상단 메뉴바 해제 하기

블로그 글을 읽다보니 상단 메뉴바가 스크롤하면 같이 내려와서 본문이 가려지는 것 같아 고정되는 부분을 해제하도록 해보겠습니다. HTML/CSS 편집에서 CTRL + F 누르고 navFixed를 검색하면 다음과 같이 나옵니다. 여기서 Fixed에 해당하는 부분을 주석처리 해주거나 삭제해 주시면 상단 메뉴바가 고정되지 않게 됩니다. 수정할 부분을 파란색으로 표시하였고 주석처리는 수정할 부분 앞에 /* 끝에 */를 붙여 주시면 됩니다. 

style.css (주석처리)

/* body.navFixed {

  padding-top:177px;

}

@media screen and (max-width: 767px) {

  body.navFixed {

    padding-top:50px;

  }

}

#desktopNav.fixed {

  position: fixed;

  top: -40px;

  height: 90px;

  z-index: 100;

  width: 100%;

}

#desktopNav.fixed h3, #desktopNav.fixed a {

  -webkit-transition-duration: .3s;

  -moz-transition-duration: .3s;

  -o-transition-duration: .3s;

  transition-duration: .3s;

}

#desktopNav.fixed h3 {

  float: left;

  margin-top: 10px;

}

#desktopNav.fixed p.text-muted {display:none;}

#desktopNav.fixed p.rightMenus a {

  font-size: 15px;

  padding-left: 8px;

} */

.navbar-inverse {

    border: none;

}

.navbar-inverse .nav li a {

  color:#fff;

}

.navbar-inverse .nav li a:hover {

  background-color:#000;

}

#secondNavWrap{background-color:#434A54;height:31.5px;margin-bottom:15px;}

/* #secondNavWrap.fixed {

  position: fixed;

  width: 100%;

  z-index: 1030;

  top: 50px;

} */

style.css (삭제)

.navbar-inverse {

    border: none;

}

.navbar-inverse .nav li a {

  color:#fff;

}

.navbar-inverse .nav li a:hover {

  background-color:#000;

}

#secondNavWrap{background-color:#434A54;height:31.5px;margin-bottom:15px;}