[simple gray 4.0] 서브타이틀 수정법
2015. 12. 26. 12:10,
티스토리/simple gray,
붉게 표시한 부분의 수정법입니다.
관련 질문이 들어오면 이 글에 내용 추가 또는 새 글 작성을 하겠습니다.
4.0의 서브타이틀을 3.0 처럼 돌리는 방법
4.0으로 버전업 되며 서브타이틀의 디자인이 조금 바뀌었습니다.
회색 배경이 적용되고, 스킨위자드에서 블로그 배경색과 동일하게 변경됩니다.
이 서브타이틀을 3.0처럼 글자만 나오게 변경해보겠습니다.
style.css 파일에서 #header .desc
를 검색하거나 79번째 줄에 다음 소스가 있습니다.
#header .desc { position: relative; display: inline-block; margin: 20px auto 0; padding: 8px 15px 10px; letter-spacing: 1px; } #header .desc a { position: relative; font-size: 11px; color:/*@title-color*/#bbb/*@*/; opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; z-index: 2; } #header .desc span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; z-index: 1; } #header .desc span { background-color:/*@background-color*/#222/*@*/; } #header .desc:hover a, #header .desc:hover span { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
우선 눈에 띄는 배경색을 제거하기 위해
#header .desc span { background-color:/*@background-color*/#222/*@*/; }
이 속성을 통채로 지워주세요.
그리고 타이틀과의 높이 간격을 줄이기 위해
#header .desc { position: relative; display: inline-block; margin: 20px auto 0; padding: 8px 15px 10px; letter-spacing: 1px; }
에서 margin: 20px auto 0;
을 margin: 5px auto 0;
으로 변경해주세요.
이렇게 수정하면 기존 3.0과 비슷한 디자인이 완성됩니다. (완전 같지 않습니다)
글자 색은 스킨 위자드에서 타이틀 글자색과 동일하게 바뀌고, 투명도로 조절됩니다.