Блок поиска нужно изменить

Помогите, пожалуйста советом, как блок поиска сместить ниже(см.картинку) и сделать в размер слайдера...
изменяла размер в stylesheet в размер слайдера, но тогда с мобильной версии поиск растягивается через чур сильно..
и где можно изменить цвет подсветки поиска?

 

Советом??
1. Почитать про сетку bootstrap это для размеров и перемещений

Вам нужно в файле header.tpl найти поиск по одноименному названию, и переместить его в конец блока header перед закрывающим тегом div

При этом поиск обернуть в

Код:

<div class="row">
   <div class="col-sm-12">
       поиск типа
   </div>
</div>

 

почитала...переделываю, но ничего не меняется(((

 

Наверно надо прочитать документацию на данном сайте, где в Начале начал, написано, что возможно у вас есть закешированные файлы и их надо обновить, нажатием кнопки в админке в разделе Модификаторы.

 

где искать ошибку, подскажите
в поиске сделала кнопку искать везде и ниже выдвигаются категории в которых необходимо осуществить поиск, но при нажатии на кнопку везде оно сразу отправляет на страничку поиска и не дает выбрать из какой категории нужно осуществить поиск
что не так??

 

Вам необходимо скопировать функционал яваскрипт со страницы поиска.

 

это часть кода из header.tpl где может быть ошибка??

Код:

<div class="col-sm-9 search-box"><div id="search" class="input-group">  
    <script>
        $(function(){
        /* выбор категории */
        $('.btn dropdown-toggle').click(function(){
        $(".dropdown-menu").slideToggle('fast');
        });
        $('ul.dropdown-menu li').click(function(){
        var tx = $(this).html();
        var tv = $(this).attr('id');
        $("#selected_category").val(tv);
        $('#change_category').html('<span class="category-name">' + tx + '&nbsp;</span>&nbsp;<span class="fa fa fa-angle-down caretalt"></span>');
        $(".dropdown-menu").slideUp('fast');
        });
        })
    </script>
    <span class="input-group-btn categories">
    <button id="change_category" type="button" class="btn dropdown-toggle" data-toggle="dropdown"><span class="category-name">Везде&nbsp;</span>&nbsp;<span class="fa fa fa-angle-down caretalt"></span></button>
        <ul class="dropdown-menu">
                        <li id="0">Везде</li>
                        <li id="66">Дополнительное оборудование и аксессуары</li>
                        <li id="59">Двигатель</li>
                        <li id="64">Кузов</li>
                        <li id="84">Питание,охлаждение,выпуск</li>
                        <li id="61">Трансмиссия</li>
                        <li id="60">Ходовая часть</li>
                        <li id="63">Механизмы управления</li>
                        <li id="62">Электрооборудование</li>
        </ul>      
    <input id="selected_category" type="hidden" name="category_id" value="0">
  </span>

 

@Natali прочитайте рекомендации

 

Спасибо, сама все исправила..была ошибка в js

 

все порадовались за вас )) Но если еще и напишите что и как, будет совсем хорошо.

 

может кому пригодится...)

в файлах common.js есть код для обработки нажатия на элемент button

Код:

$('#search input[name=\'search\']').parent().find('button').on('click', function()

Создатель шаблона дефаулт это предусмотрел, у него обработчик такой:

Код:

$('#search input[name=\'search\']').parent().find('#search-button').on('click', function()

разница в .find('#search-button')

а вот код из header.tpl

Код:

<div class="col-sm-9 search-box"><div id="search" class="input-group">  
    <span class="input-group-btn categories">
    <button id="change_category" type="button" class="btn dropdown-toggle" data-toggle="dropdown"><span class="category-name">Везде&nbsp;</span>&nbsp;<span class="fa fa fa-angle-down caretalt"></span></button>
    <ul class="dropdown-menu">
            <li><a href="#" onclick="return false;" id="">Везде</a></li>
                        <li><a href="#" onclick="return false;" id="59">Двигатель</a></li>
                        <li><a href="#" onclick="return false;" id="66">Дополнительное оборудование и аксессуары</a></li>
                        <li><a href="#" onclick="return false;" id="64">Кузов</a></li>
                        <li><a href="#" onclick="return false;" id="84">Питание,охлаждение,выпуск</a></li>
                        <li><a href="#" onclick="return false;" id="61">Трансмиссия</a></li>
                        <li><a href="#" onclick="return false;" id="60">Ходовая часть</a></li>
                        <li><a href="#" onclick="return false;" id="63">Механизмы управления</a></li>
                        <li><a href="#" onclick="return false;" id="62">Электрооборудование</a></li>
                    </ul>        <input id="selected_category" type="hidden" name="category_id" value="0">
  </span>
  <input type="text" name="search" value="" placeholder="Поиск" class="form-control">
  <span class="input-group-btn">
    <button type="button" class="btn" id="search-button">
            <i class="glyphicon glyphicon-search"></i>
        </button>
  </span>
</div>
<script type="text/javascript">
$('#search a').click(function(){
    $("#selected_category").val($(this).attr('id'));
    $('#change_category').html('<span class="category-name">' + $(this).html() + '&nbsp;</span>&nbsp;<span class="fa fa fa-angle-down caretalt"></span>');
});
</script>
     </div>

не судите строго, я только учусь всему с нуля...могу где-то быть не права..