😎 » DARYA DLE » Готовые дизайны » Дизайн поиска и шаблона search.tpl
430 0  

Дизайн поиска и шаблона search.tpl

Оформление шаблона search.tpl

<h1>Поиск по сайту</h1>
<div class="clear str-40"></div>
[simple-search]
	<div class="knop-search">
   		 {searchfield}
   		 <div class="clear str-5"></div>
   		 <input type="button" name="dosearch" id="dosearch" value="Найти" onclick="jаvascript:list_submit(-1); return false;">
   		 <input type="button" name="dofullsearch" id="dofullsearch" value="Расширенный поиск" onclick="jаvascript:full_submit(1); return false;">
	</div><hr />
	<h3><s class="flaticon-search"></s> РЕЗУЛЬТАТЫ:</h3>
[/simple-search]
[extended-search]
<div class="search-extend">
	<div>
		<fieldset class="noramfild">
			<legend>ИСКАТЬ:</legend>            	
			{searchfield}				
		</fieldset>
        <fieldset>
			<legend>Временной период:</legend>
				<u>{date-option}{date-beforeafter}</u>
		</fieldset>
		<fieldset>
			<legend>Поиск по разделам:</legend>
				<u>{category-option}</u>
		</fieldset>
    </div>
    <div>
        <fieldset class="search-user">
			<legend>Имя пользователя:</legend>
				{userfield}
                <label>{user-option}Точное совпадение</label>
		</fieldset>
		<fieldset>
            <legend>Искать статьи с:</legend>
        <span class="minrozd2">
            <span>{word-option}</span>
			<span>{search-area}</span>	
            <span>{comments-num} комментариями</span>
            <span>{news-option}</span>            
        </span>
		</fieldset>		
		<fieldset>
			<legend>Сортировка результатов:</legend>
				<u>{sort-option}{order-option}</u>
		</fieldset>
		<fieldset class="vidsercrz">
			<legend>Показывать результаты как:</legend>
            	{view-option}
		</fieldset>		
	</div>	
</div>
    <div class="searcknopki">
		<input type="button" class="knopka-v2" name="dosearch" id="dosearch" value="Искать" onclick="jаvascript:list_submit(-1); return false;">
		<input type="button" class="knopka-v2" name="doclear" id="doclear" value="Сбросить" onclick="jаvascript:clearform('fullsearch'); return false;">
		<input type="reset" class="knopka-v2" name="doreset" id="doreset" value="Вернуть">
    </div>
[/extended-search]
[searchmsg]
	<div class="search_result">{searchmsg}</div>
	<h3><s class="flaticon-search"></s> РЕЗУЛЬТАТЫ:</h3>
[/searchmsg]
<div class="clear str-40"></div>


Стили CSS для поиска:

/*--- Страница поиска и searchresult.tpl ---*/
#fullsearch, #searchuser {width:100%;}
#searchinput {width:100%; padding:2px 10px;}
.knop-search {overflow:hidden; padding: 0 0 5px 0;margin:10px 0;}
.search_result {width:100%;margin:10px 0; padding:5px 0; font-weight:500;color:var(--red);}
#dosearch, #dofullsearch, #doclear, #doreset {float:left; margin:0 40px 10px 0; border-radius:5px; font-size:16px; color:var(--white);  background:var(--suniy); border-color:var(--suniy); display:inline-block; padding:0.5rem 1.5rem;  box-shadow:1px 3px 4px 1px rgba(27, 32, 50, 0.7); transition: all 0.2s ease-in-out;}
#dosearch:hover, #dofullsearch:hover, #doclear:hover, #doreset:hover { box-shadow:2px 3px 4px 2px rgba(255, 255, 255, 0.7);transform: translateY(-3px);}
#dofullsearch, #doclear {background:var(--orange);}
#doreset {background:var(--red);}
.search-extend, .minrozd2 {display: flex; flex-flow: row wrap; justify-content: space-between;}
.search-extend label, .search-extend option {font-size:12px; color:var(--gray);}
.search-extend > div {width:48%;}
.search-extend input[type="checkbox"], .vidsercrz input {display:block; width:15px; height:15px; margin: 1px 5px 0 0; float:left; padding:0;}
.search-extend select {padding:1px 5px;}
.search-extend fieldset{padding:5px 20px 20px 20px; margin:20px 0; border:1px solid var(lightgray);}
#replylimit {float:left; padding:2px 5px; width:25px; height:17px; margin:0 5px 0 0;}
.vidsercrz label {display:block; width:100%; margin:3px 0;}
.searcknopki {overflow:hidden; padding:2px 0;}
@media (max-width: 1020px) {
.search-extend > div {width:100%;}
}

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023