묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
검색창 선택버튼 변색하는 기능 수정에 대하여
2009.01.04 22:05
레이아웃 검색창 선택버튼 누를때 CSS의 적용칼라가 마우스의 이동에 따라 변색하는 기능에서 버그 수정을 해보았습니다.많은 xe의 레이아웃 제작자들의 사이트에 에러가 있은것으로 보였으므로 제가 선배들의 도움으로 수정을 했어요.
검색창 선택버튼 버그 있는 레이아웃 수정 하실분은 아래 코드를 이용하여 참조로 수정하시면 됩니다.짐작하건대 혹시라도 제가 수정이 오류가 있으면 많은 삼가 가르침을 바랍니다.
만약 친구분들께 도움이 되신다면 저에겐 영광이 될것이고 더욱더 노력의 힘으로 될것입니다.
09년 행복하시고 항상 건강하시길 , 새해에 복 많이 받으세요.
수정후의 사이트 미리 보기: http://www.kimym.net/
아래는 수정 방법을 참고하여 수정후 사용하세요.
css 부분:
/* Site Layout - Search ---------------------------------------------------------------------------------*/ #isSearch {position:absolute;top:102px;right:20px;width:190px;text-align:right;} #isSearch .searchOrder { display:none;} #isSearch .checked {position:absolute;left:-48px;top:18px;text-align:left;display:block;padding:4px 0px 0px 7px;width:85px;height:16px;background:url (../images/default/bgSearchTerm.gif) no-repeat; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#5c5c5c;line-height:normal;} *:first-child+html #isSearch .checked { top:1px; } #isSearch ul { display:none; position:absolute; left:-48px; top:19px; padding:2px 0 3px 0; text-align:left; border:1px solid #b2b2b2; background:#ffffff;} #isSearch ul li { width:83px; height:16px; list-style:none; } #isSearch ul li input { display:none;} #isSearch ul li label { display:block; padding:4px 0 0 4px; width:79px; height:15px; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#000000;} #isSearch ul li label.on { background:#CCCCCC; } #isSearch ul li label:hover, #isSearch ul li label:focus { background:#CCCCCC;} #isSearch .inputText { vertical-align:middle; position:relative; top:0; _top:-1px; left:1px; padding:3px 3px 1px 3px; width:95px; height:13px; color:#000000; border:1px solid #B0B0AF; background-color:#ffffff; } #isSearch .inputText:hover { background:#ededed; } #isSearch .inputText:focus { border:1px solid #8E8E8D; background-color:#ededed; } *:first-child+html body#default #isSearch .inputText { position:relative; top:-1px;} #isSearch .submit { vertical-align:middle; _position:relative; _top:-1px;} *:first-child+html body#default #isSearch .submit { position:relative; top:-1px;}
layout.html 수정부분:
<!-- Site Layout - Search --> <form action="{getUrl()}" method="post" id="isSearch"> <input type="hidden" name="mid" value="{$mid}" /> <input type="hidden" name="act" value="IS" /> <input name="search_target" type="radio" value="title_content" id="search_target" class="searchOrder" checked="checked" title="search option" /> <label for="search_target" class="checked" id="search_target_label" onclick="showHide('selectOrder'); return false" onmouseover="this.className='checked'" >{$lang->title}</label> <ul id="selectOrder"> <li> <input type="radio" name="search_target" value="title" id="search_target1" /> <label for="search_target1" onclick="chkIsKind(1, '{$lang->title}'); return false;" onmouseover="this.className='on'" onmouseout="this.className='off'">{$lang->title}</label> </li> <li> <input type="radio" name="search_target" value="content" id="search_target2" /> <label for="search_target2" onclick="chkIsKind(2, '{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.className='off'">{$lang->content}</label> </li> <li> <input type="radio" name="search_target" value="title_content" id="search_target3" /> <label for="search_target3" onclick="chkIsKind(3, '{$lang->title}+{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.className='off'">{$lang->title}+{$lang->content}</label> </li> <li> <input type="radio" name="search_target" value="comment" id="search_target4" /> <label for="search_target4" onclick="chkIsKind(4, '{$lang->comment}'); return false;" onmouseover="this.className='on'" onmouseout="this.className='off'">{$lang->comment}</label> </li> <li> <input type="radio" name="search_target" value="tag" id="search_target5" /> <label for="search_target5" onclick="chkIsKind(5, '{$lang->tag}'); return false;" onmouseover="this.className='on'" onmouseout="this.className='off'">{$lang->tag}</label> </li> </ul> <input name="is_keyword" type="text" class="inputText" title="输入站内搜索关键词" /> <input type="image" src="./images/{$layout_info->colorset}/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" /> </form> <!-- Site Layout - Search -->
태그 연관 글
- [2011/02/15] 묻고답하기 관리자만 검색창이 보이게 하고 싶습니다 *1
- [2010/08/20] 묻고답하기 홈페이지에 검색창을 달고 싶습니다.
- [2008/12/21] 묻고답하기 제로보드 xe홈페이지에 검색창 달기 *5
- [2008/12/19] 묻고답하기 검색창 기본을 제목+게시글로 지정하고 크기 줄이는 법 *2