[gabriel] 2.0에 있던 상단 검색바를 3.0에 다는 방법

※ 이 가이드는 gabriel 스킨 전용입니다. 다른 스킨에는 적용되지 않습니다.

Gabriel 스킨은 2.0 이던 시절엔 상단 메뉴 위쪽에 검색창이 있었습니다.

3.0 으로 패치되면서 없어졌는데요,

간단하게 다시 추가하는 방법을 소개합니다.

ski.html 파일 편집

43번째 줄에 <div class="nav">가 끝나는걸 알리는 </div> 가 있습니다. 그 바로 다음줄에 아래 소스를 추가해주세요.

<div class="search-bar">
		<input placeholder="blog search… :)" type="text" name="search" value="" onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/' + looseURIEncode(document.getElementsByName('search')[0].value);document.getElementsByName('search')[0].value = ''; return false;}catch(e){} }" />
		<button href="#" onclick="try{window.location.href='/search/' + looseURIEncode(document.getElementsByName('search')[0].value);document.getElementsByName('search')[0].value = ''; return false;}catch(e){}"><i class="fa fa-search"></i></button>
</div>

추가한 모습

style.css 파일 편집

60번째 줄에 다음 소스가 있습니다.

.header-wrap .nav ul li a:active { background-color: #fefefe; }

이 바로 다음줄에 아래 소스를 추가해주세요.

.header-wrap .search-bar { position: absolute; top: -70px; right: 0; padding: 0; width: 220px; border-bottom: 1px solid #ddd; }
.header-wrap .search-bar input { float: left; padding: 10px; width: 83%; border: none; font-size: 15px; color: #555; }
.header-wrap .search-bar button { display: block; float: left; padding: 13px 0 12px; width: 17%; border: none; background-color: transparent; font-size: 15px; color: #888; cursor: pointer; }

추가한 모습

위 소스를 넣었다는 가정 하에 163번째 줄로 이동하면 아래 소스가 있습니다.

    .footer-wrap .widget { float: none; width: 100%; }

그 바로 다음 다음줄에 아래 소스를 추가해주세요. (엔터 두번)

    .header-wrap .search-bar { position: static; padding: 5px; width: 100%; }
    .header-wrap .search-bar input { width: 90%; }
    .header-wrap .search-bar button { width: 10%; }

추가한 모습

이걸로 검색바 추가는 끝입니다.