Header 전문가용 도움말

 

◆헤더영역 전체

//헤더영역
.header {
height:200px;
width:50px;
margin:0 auto 30px auto;
padding:35px 25px 5px 25px;
}

//헤더 스타일
.header {
color:#000;
text-align:left;
background:#fff;
border-bottom:7px solid #ccc;
}

Q&A
Q: 헤더영역 하단의 선을 없애려면?
A: border-bottom의 선두께를 지정하는 첫 번째 픽셀(px)값을 0으로 바꾸시면 됩니다.


//헤더 전체 링크 부분 스타일
.header a:link,.header a:visited {color:#fff;text-decoration:none;}
.header a:hover,.header a:active {color:#fff;text-decoration:underline;}


 

◆블로그 제목

//제목 링크부분 스타일
.header h1 a:link,.header h1 a:visited {color:#fff;text-decoration:none;}
.header h1 a:hover,.header h1 a:active {color:#fff;text-decoration:underline;}

//제목 영역
.header h1 {
margin:0;
padding:90px 0 0 40px;
text-align:left;
font:bold 40px 'Trebuchet MS',sans-serif;
letter-spacing:-1px;
}


Q&A
Q: 블로그 제목을 없애려면?
A: html 소스의 <h1>[#blog_title#]</h1> 부분을 다음과 같이 주석처리하세요.
   <!--<h1>[#blog_title#]</h1>-->

Q: 블로그 제목의 글씨체와 크기를 바꾸려면?
A: font속성의 두 번째 값인 px값을 원하는 크기로 수정하고, 그 뒷부분을 원하는 글씨체로 바꾸시면 됩니다.

 

◆블로그 URL

//블로그url부분 수정(html 소스)
[#blog_url#]부분을 다른 텍스트로 교체

//블로그url 링크부분 스타일 - 단순 색깔 변경
.header p.url a{color: #FFF;}

//블로그url 링크부분 스타일 - 마우스 오버 등 액션에 따라 다른 스타일 설정
.header p.url a:link,.header p.url a:visited {color:#52b4e1;text-decoration:none;}
.header p.url a:hover,.header p.url a:active {color:#ccc;text-decoration:underline;}

Q&A
Q: 블로그 주소를 없애려면?
A: html소스의 <div class="url">[#blog_url#]</div> 부분을 다음과 같이 주석처리하세요.
   <!--<div class="url">[#blog_url#]</div>-->

Q: 블로그 주소를 다른 텍스트로 바꾸려면?
A: html소스의 <div class="url">[#blog_url#]</div> 부분의 [#blog_url#]를 다른 텍스트로 바꾸시면됩니다.


//블로그url영역 설정
.header p.url {
margin:0;
padding:1px 0 0 0;
font-size:8pt;
font-family:verdana,sans-serif;
letter-spacing:1px;
line-height:130%;
text-align:left;
white-space:nowrap;
}


 

◆Top Menu


//top메뉴 영역
.header p.topmenu {
margin:0;
padding:0 35px 0 0;
text-align:right;
}

//top메뉴 텍스트 스타일
.header p.topmenu a {
margin:0;
color:#52b4e1;
}

Q&A
Q: 사이드바의 메뉴릿과 상관없이 탑메뉴를 없애려면?
A: html소스 중 <div class="topmenu">[#blog_topmenu#]</div> 부분을 다음과 같이 주석처리하세요.
   <!--<div class="topmenu">[#blog_topmenu#]</div>-->


Q: 탑메뉴 중 포토로그(마이가든)만 보이려면?
A: 포토로그만 남기기 
    =>html소스 중 <div class="topmenu">[#blog_topmenu#]</div> 부분의 [#blog_topmenu#]를 다음과 같이 수정하세요.
   <http://www.egloos.com/photo/">포토로그

  
    마이가든만 남기기
    =>html소스 중 <div class="topmenu">[#blog_topmenu#]</div> 부분의 [#blog_topmenu#]를 다음과 같이 수정하세요.
   <http://www.egloos.com/garden/">마이가든



*메뉴릿에 다른 메뉴를 추가한 경우 사이드바의 메뉴릿 위젯 메뉴의 링크를 참조하여 위와같이 설정하면 됩니다.




위젯테스트