9. 티스토리 스킨 만들기 관리자 메뉴와 검색

2014. 2. 7. 15:35
저자 : Kurien

오랜만에 다시 연재를 하네요.

오늘은 관리자 메뉴와 검색 부분을 수정하겠습니다.



이렇게 사이드바에 관리자 메뉴와 검색 부분을 넣고 저장!

이 정도는 쉽게 하실 수 있겠죠?



이렇게 전혀 손때 묻지 않은 검색과 관리자 메뉴가 나옵니다.

조금 더 색다르게 바꿔봐야겠죠?


먼저 관리자 메뉴부터 수정할께요!


      <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/ 이 링크로 들어가보시면 되겠습니다!