Xedition 레이아웃을 사용해 오면서 별 불만이 없는데
상단에 위치한 검색창이 마음에 들지를 않아서 바꾸어 봤습니다.
생각보다 어렵더군요 ^.^!
1. xedition/layout.html 에서 search부분을 찾아서 수정합니다.
169줄 ~ 181줄 삭제
<div cond="$layout_info->enable_intergration_search === 'Y'" class="search_wrap">
<div class="search_area">
<!-- SEARCH -->
<form action="{getUrl()}" method="get" class="search" no-error-return-url="true">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="text" name="is_keyword" value="{$is_keyword}" required="required" title="{$lang->cmd_search}" placeholder="Search" />
</form>
<!-- /SEARCH -->
<a href="#" class="btn_close" title="{$lang->cmd_xedition_search_close}" onclick="return false"><i class="xi-close"></i><span class="blind">{$lang->cmd_xedition_search_close}</span></a>
</div>
</div>
<div class="search_area">
<!-- SEARCH -->
<form action="{getUrl()}" method="get" class="search" no-error-return-url="true">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="text" name="is_keyword" value="{$is_keyword}" required="required" title="{$lang->cmd_search}" placeholder="Search" />
</form>
<!-- /SEARCH -->
<a href="#" class="btn_close" title="{$lang->cmd_xedition_search_close}" onclick="return false"><i class="xi-close"></i><span class="blind">{$lang->cmd_xedition_search_close}</span></a>
</div>
</div>
210줄 ~ 213줄
수정전
<!-- search -->
<li cond="$layout_info->enable_intergration_search === 'Y'" class="click">
<a href="#" title="{$lang->cmd_search}"><i class="xi-magnifier"></i><span class="blind">{$lang->cmd_search}</span></a>
</li>
<li cond="$layout_info->enable_intergration_search === 'Y'" class="click">
<a href="#" title="{$lang->cmd_search}"><i class="xi-magnifier"></i><span class="blind">{$lang->cmd_search}</span></a>
</li>
수정후
<!-- Search -->
<li cond="$layout_info->enable_intergration_search == 'Y'" class="click">
<load target="js/search.js" />
<div class="search-wrapper">
<form action="{getUrl()}" method="get" class="search" no-error-return-url="true">
<div class="input-holder">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="text" name="is_keyword" value="{$is_keyword}" required="required" placeholder="Search..." />
<button class="search-icon" title="{$lang->cmd_search}" onclick="searchToggle(this, event);"><i class="fas fa-search fa-2x"></i></button>
</div>
<span class="close" onclick="searchToggle(this, event);"><i class="fas fa-times fa-2x"></i></span>
</form>
</div>
</li>
<style>
.search-wrapper .input-holder .search-icon { color:#777;}
.search-wrapper.active .close { color:#777; }
.search-wrapper.active .input-holder { background:#000; }
.search-wrapper .input-holder input[type=text] { color:#fff }
input::-webkit-input-placeholder { color:#888; }
</style>
<li cond="$layout_info->enable_intergration_search == 'Y'" class="click">
<load target="js/search.js" />
<div class="search-wrapper">
<form action="{getUrl()}" method="get" class="search" no-error-return-url="true">
<div class="input-holder">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="text" name="is_keyword" value="{$is_keyword}" required="required" placeholder="Search..." />
<button class="search-icon" title="{$lang->cmd_search}" onclick="searchToggle(this, event);"><i class="fas fa-search fa-2x"></i></button>
</div>
<span class="close" onclick="searchToggle(this, event);"><i class="fas fa-times fa-2x"></i></span>
</form>
</div>
</li>
<style>
.search-wrapper .input-holder .search-icon { color:#777;}
.search-wrapper.active .close { color:#777; }
.search-wrapper.active .input-holder { background:#000; }
.search-wrapper .input-holder input[type=text] { color:#fff }
input::-webkit-input-placeholder { color:#888; }
</style>
2. xedition/css/layout.css 에서 553줄 ~ 601줄 /* Search */ 부분을 아래 코드로 교체합니다.
/* Search */
.search-wrapper { position:absolute; top:-7px; left:-25px; }
.search-wrapper.active { position:absolute; top:25px; left:-200px; z-index:2: }
.search-wrapper .input-holder { overflow:hidden; height:40px; }
.search-wrapper.active .input-holder { border-radius:50px; width:200px; }
.search-wrapper .input-holder input[type=text] { width:90%; height:20px; padding:0px 30px 0 10px; opacity:0; position:absolute; top:0px; left:10px; background:transparent; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:none; outline:none; font-size:14px; }
.search-wrapper.active .input-holder input[type=text] { opacity:1; -webkit-transform:translate(0, 10px); -moz-transform:translate(0, 10px); transform:translate(0, 10px); }
.search-wrapper .input-holder .search-icon { background:transparent; position:relative; z-index:2; float:right; cursor:pointer; margin:8px 10px 0 0}
.search-wrapper .input-holder .search-icon:focus { border:none; outline:none; color:#fff; }
.search-wrapper .close { display:none; position:absolute; z-index:2; top:7px; left:210px; cursor:pointer; }
.search-wrapper.active .close { display:block; }
.search-wrapper { position:absolute; top:-7px; left:-25px; }
.search-wrapper.active { position:absolute; top:25px; left:-200px; z-index:2: }
.search-wrapper .input-holder { overflow:hidden; height:40px; }
.search-wrapper.active .input-holder { border-radius:50px; width:200px; }
.search-wrapper .input-holder input[type=text] { width:90%; height:20px; padding:0px 30px 0 10px; opacity:0; position:absolute; top:0px; left:10px; background:transparent; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:none; outline:none; font-size:14px; }
.search-wrapper.active .input-holder input[type=text] { opacity:1; -webkit-transform:translate(0, 10px); -moz-transform:translate(0, 10px); transform:translate(0, 10px); }
.search-wrapper .input-holder .search-icon { background:transparent; position:relative; z-index:2; float:right; cursor:pointer; margin:8px 10px 0 0}
.search-wrapper .input-holder .search-icon:focus { border:none; outline:none; color:#fff; }
.search-wrapper .close { display:none; position:absolute; z-index:2; top:7px; left:210px; cursor:pointer; }
.search-wrapper.active .close { display:block; }
3. search.js 파일을 다운 받아서 xedition/js 방에 업로드 합니다.
참고로 아이콘은 폰트어썸을 사용하였으며, layout.html 안에 <style>부분은 검색창의 색상부분입니다.
자기에 맞게끔 색상 변경하시면 됩니다.