[square] 스킨 수정 팁 by 원작자

[square] 사이드바 크기 조절 및 그에 따른 수정법

http://wallel.tistory.com/212

style.css 파일 편집

#sidebar 를 검색 또는 65번째 줄

#sidebar { position: fixed; top: 0; left: 0; bottom: 0; padding: 0; width: 300px; height: 100%; background-color: #fff; border-right: 1px solid #ddd; cursor: default; overflow-y: auto; z-index: 100; }

이런 소스가 있습니다. width: 300px;을 원하는 값으로 변경해주세요.

이 값을 "사이드바 길이" 라고 하겠습니다.

#content 검색 또는 105번째 줄

#content { margin: 0 0 0 330px; padding: 0; }

margin: 0 0 0 330px; 에서 330을 (사이드바 길이)+30 으로 해주세요.

※ 여기서 잠깐, 본문 너비 조절은 #content 바로 밑줄에 #content-inner 안의 max-width: 1030px; 을 조절하면 됩니다.

338번째 줄

#sidebar { left: -300px; }

left: -300px; 에서 -300 이라고 되있는 부분을 설정한 사이드바 길이로 수정합니다.

* 마이너스(-)는 그대로 두고 숫자만 변경해주세요.

93번째 줄

html.sidebar-off #sidebar { left: -300px; }

이곳 또한 -300을 사이드바 길이로 수정하면 됩니다.

---

[square] 자주 묻는 질문

http://wallel.tistory.com/209

Square final 버전과 호환이 되지 않는 부분이 많습니다.

수정 전 참고해주세요 !

① 타이틀 글자 색(블로그 이름 색) 변경은 어떻게 하나요?

style.css 파일에서 #sidebar h1을 검색하거나, 70번째 줄로 이동하고,

그 바로 밑줄에 #sidebar h1 a { color: 색상값; } 을 추가하면 됩니다.

② 사이드바 배경 색을 바꾸거나 배경 이미지를 넣고싶어요.

style.css 파일에서 #sidebar를 검색하거나, 65번째 줄로 이동해주세요.

#sidebar { 생략 } 안에 background-color: #fff; 값을 조절하여 색상을 바꿀 수 있고, 

background-image: url('이미지 주소'); 를 추가해 배경 이미지를 넣을 수 있습니다.

④ 사이드바 링크 색을 변경했는데, 카테고리 화살표 색이 바뀌지 않아요.

style.css 파일에서 #sidebar .category ul li ul li ul li:before 를 검색하거나 

79번째 줄로 이동하여 padding-right: 5px; 우측에 color: #색상값; 을 추가하면 됩니다.

⑥ 타이틀 글자 대신 이미지를 넣고싶어요.

타이틀 이미지를 스킨 폴더에 올리고 이미지 주소 링크 땀(예를 들면 src="./images/mojo12_ci_125.jpg")

skin.html 파일 46번째 줄에 있는

<h1><a href="[#_blog_link_#]">[#_title_#]</a></h1>를

<div class="title_image"><a href="https://www.mojo12.com/"><img src="이미지주소" alt="mojo12.com"></a></div>

이렇게 교체하고,

style.css 파일에서 #sidebar h1 를 검색한 후 그 바로 다음줄에

#sidebar .title_image { text-align: center; }

를 추가하면 됩니다. 

⑦ 사이드바 상/하 여백을 조절하고 싶어요.

style.css 파일

#sidebar .blank { clear: both; width: 100%; height: 100px; }

height: 100px; 값을 조절하면 됩니다.

⑨ 사이드바 글씨 크기랑 글씨체를 변경하고싶어요.

#sidebar 에 font-size: 숫자px; font-family: 서체명; 을 추가하면 됩니다.

① 작성일 리본의 색상 변경은 어떻게 하나요?

style.css 파일에서 #head .date 를 검색하거나, 113번째 줄로 이동해주세요.

#head .date { position: absolute; bottom: -44px; left: -10px; padding: 10px; font-size: 13px; font-size: 1.3rem; color: #fff; background-color: #555; cursor: default; }

#head .date:before { position: absolute; top: 0; left: -6px; width: 0; height: 0; content: " "; border-top: 20px solid #555; border-left: 6px solid transparent; }

#head .date:after { position: absolute; bottom: 0; left: -6px; width: 0; height: 0; content: " "; border-bottom: 20px solid #555; border-left: 6px solid transparent; }

이런 소스가 나옵니다. 붉게 표시한 부분의 색상값을 변경하면 됩니다.

#head .date:before가 왼쪽 위 화살표,

#head .date:after가 왼쪽 아래 화살표입니다.

② 타이틀바 글자 크기 또는 두께를 조절하고싶어요.

style.css 파일에서 #head h2 를 검색하거나, 110번째 줄로 이동하면

#head h2 { display: inline-block; margin: 0 0 50px; padding: 0 5px 3px; font-size: 20px; font-size: 2.0rem; font-weight: 400; color: #444; line-height: 200%; border-bottom: 1px dashed #ddd; text-shadow: 1px 1px #dedede; word-break: break-word; }

이런 소스가 있습니다.

글자 크기는 font-size: 20px; 과 font-size: 2.0rem; 을 조절하고, 두께는 font-weight: 400; 을 600으로 바꾸면 글씨가 두꺼워집니다.

④ 본문에 보면 링크 글자가 두꺼운데 얇게 하고싶어요.

style.css 파일에서 .entry a.tx-link 를 검색하거나, 192번째 줄로 이동하면

.entry a.tx-link,

.entry a.key1 { font-weight: 600; cursor: pointer; }

이런 소스가 있습니다. font-weight: 600; 속성을 지우면 됩니다.

⑦ 타이틀바 위쪽 여백을 조절하고싶어요.

style.css 파일에서 #head 검색 또는 109번째 줄로 이동해주세요.

padding-top: 100px; 값을 원하는 값으로 조절하면 됩니다.

⑧ 작성일에 년/월/일 만 나오게 하고싶어요.

skin.html 파일에서 를 검색하고 다음 소스로 교체해주세요.

<script type="text/javascript">

datestr=''.substr(0,10);

document.write(datestr);

</script>

다음으로 를 검색하고

<script type="text/javascript">

datestr=''.substr(0,10);

document.write(datestr);

</script>

이렇게 변경하세요.

⑩ 본문 틀이 왼쪽에 붙어있는데, 가운데로 옮기고싶어요.

#content-inner 에 margin: 0 auto; 만 추가하면 됩니다.

⑪ 본문에만 다른 글씨체 적용하는 방법

style.css 파일 제일 하단에 다음 소스를 추가하면 됩니다.

.article { font-family: "나눔고딕"; }

"나눔고딕" 은 원하는 폰트명으로 바꿔서 사용하세요.

⑥ 블로그 하단의 최근 게시물을 없애고싶어요.

skin.html 파일 376번째 줄 부터 390번째 줄 까지

<s_sidebar_elements>

<div id="recent-post">

<h4><a href="/category">+ Recent posts</a></h4>

<ul>

<s_rctps_rep>

<li class="box">

<a href="[#_rctps_rep_link_#]" class="thumb">

<img src="./images/blank.png" alt="post image">

<span class="title">[#_rctps_rep_title_#]</span>

</a>

</li>

</s_rctps_rep>

</ul>

</div>

</s_sidebar_elements>

이 부분을 제거하면 됩니다.

⑧ 카테고리 클릭시 본문 위에 목록이 나오는데, 본문 아래로 옮기고싶어요.

skin.html 파일에서

<s_list>

   생략

</s_list>

부분을

<s_article_rep>

   생략

</s_article_rep>

밑으로 통채로 이동시키면 됩니다.