이 블로그는 더이상 운영되지 않고 Archive 용도로 사용되고 있습니다.
새로운 블로그를 방문해주세요.

[simple gray 4.0] 서브타이틀 수정법



붉게 표시한 부분의 수정법입니다.


관련 질문이 들어오면 이 글에 내용 추가 또는 새 글 작성을 하겠습니다.



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과 비슷한 디자인이 완성됩니다. (완전 같지 않습니다)


글자 색은 스킨 위자드에서 타이틀 글자색과 동일하게 바뀌고, 투명도로 조절됩니다.

최근 댓글