9. 티스토리 스킨 만들기 관리자 메뉴와 검색
오랜만에 다시 연재를 하네요.
오늘은 관리자 메뉴와 검색 부분을 수정하겠습니다.
이렇게 사이드바에 관리자 메뉴와 검색 부분을 넣고 저장!
이 정도는 쉽게 하실 수 있겠죠?
이렇게 전혀 손때 묻지 않은 검색과 관리자 메뉴가 나옵니다.
조금 더 색다르게 바꿔봐야겠죠?
먼저 관리자 메뉴부터 수정할께요!
<s_sidebar_element>
<!-- 관리자 메뉴 -->
<div class="adminMenu">
<ul>
<li class="tab_admin"><a href="[ ##_owner_url_##]">Admin</a></li>
<li class="tab_write"><a href="[ ##_owner_url_##]/entry/post">Write</a></li>
</ul>
</div>
</s_sidebar_element>
위 코드는 HTML 부분인데 원래 관리자, 글쓰기로 되어있는걸 저는 Admin Write로 바꿔놨습니다.
이 부분은 원하시는대로 바꾸시면 됩니다.
딱히 더 이상 만질 부분은 없는 것 같아요.
바로 CSS 부분으로 가서 수정을 하겠습니다!
.adminMenu{
margin-bottom:10px;
text-align:center;
}
.adminMenu li{
display:inline-block;
}
.adminMenu li a{
font-weight:bolder;
color:#fff;
text-decoration:none;
display:inline-block;
padding:5px 10px 5px 10px;
}
.adminMenu li a:hover{
background:white;
color:black;
border-radius:5px;
}
차근차근 설명해드릴께요.
먼저 관리자 메뉴에 있는 div의 class명이 adminMenu입니다.
그래서 .adminMenu에 효과를 적용시키죠.
먼저 margin-bottom으로 이것보다 아래 위치할 모듈과의 거리를 띄어주시구요.
text-align으로 가운데 정렬을 해줍니다.
.adminMenu li는 기본적으로 display:block이기 때문에 한 줄을 전체적으로 사용하기 때문에
inline-block으로 변경해주셔야 한 줄에 admin과 write가 함께 위치할 수 있습니다.
adminMenu li a와 a:hover 의 경우는 a 태그를 통해 링크가 걸린 부분을 말하는 건데요.
이 부분은 전에 배웠던 헤더의 메뉴부분과 크게 다르지 않습니다.
그리고 a 태그 또한 display 기본값이 block이기 때문에 inline-block으로 변경했습니다.
결과는 이렇게 되었구요.
관리자 메뉴부분은 여기까지네요.
바로 검색 부분을 보죠!
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<h3>검색</h3>
<s_search>
<input type="text" name="[ ##_search_name_##]" value="[ ##_search_text_##]" onkeypress="if (event.keyCode == 13) { [ ##_search_onclick_submit_##] }"/>
</s_search>
</div>
</s_sidebar_element>
검색 부분 또한 제가 수정한게 몇 가지 있는데요.
먼저 <h3>검색</h3>로 검색이라는 제목이 나오게 해주고 input type="submit" 부분을 지워버렸습니다.
어짜피 text부분에 엔터를 치게 되면 똑같은 기능이 있기 때문이죠.
위 이미지는 아직 CSS를 적용하지 않은 모습입니다.
이상하죠?
CSS까지 적용 해보겠습니다.
.search{
margin-bottom:10px;
text-align:center;
}
.search h3 {
text-align:center;
margin-bottom:10px;
color:#fff;
text-shadow:3px 3px 5px #202d44;
}
.search input[type=text]{
border-radius:10px;
}
이 부분도 크게 어렵지 않습니다.
.search가 검색 모듈 부분의 div class 명입니다.
아래 있을 모듈과의 거리를 띄워주기 위해 margin-bottom을 사용했고 text-align으로 input을 중앙정렬 했습니다.
.search h3 부분은 공지사항에서 사용한 .notice h3과 똑같습니다.
그대로 복붙 했어요 ㅋ
.search input[type=text]의 경우에는 type="text"인 속성을 가진 input 태그를 선택하는 선택자입니다.
input을 border-radius로 둥글게 만들어줬네요.
조금은 더 나아졌을까요?
스킨 부분을 계속 적다가 다른걸 적다 오긴 했는데 여전히 디자인은 안습이네요 ㅠㅠ...
지금까지 한 부분의 결과물입니다.
앞으로 스킨 부분도 다시 적어보겠습니다.
모르시는 부분은 댓글에 남겨주시구요.
직접 저 블로그로 가서 보고싶으신 분들은 http://kreedit.tistory.com/ 이 링크로 들어가보시면 되겠습니다!
'Project > 티스토리 스킨' 카테고리의 다른 글
11. 티스토리 스킨 만들기 태그 박스, 글 보관함 (4) | 2014.02.09 |
---|---|
10. 티스토리 스킨 만들기 카테고리 (27) | 2014.02.08 |
8. 티스토리 스킨 만들기 공지사항 (6) | 2013.12.22 |
7. 티스토리 스킨 만들기 블로그 정보 (2) | 2013.12.20 |
6. 티스토리 스킨 만들기 사이드바 영역 (10) | 2013.12.18 |