Опубликовано: 11 декабря 2015

Как заменить блок "адрес" в шапке сайта на форму поиска


В файле "index.html"

1. замените строку:

{include file="search.form.html" assign="header2" inline}

на строку:

{*include file="search.form.html" assign="header2" inline*}


2. замените строку:

{include file="offline.html" assign="header6" inline}

на строку:

{include file="search.form.html" assign="header6" inline}

3. в блок пользовательских стилей добавьте правило:

@media only screen and (min-width: 993px) {
    .search-wrapper {   
        display: inline-block;
    }
}

Комментарии (8)

  • Николай Трифонов 12 декабря 2015 23:47 #

    А как правильно сделать чтобы поиск был по центру, а телефоны справа?

    1
  • Колмаков Игорь 14 декабря 2015 15:17 #

    в файле "index.html" участок кода

    {include file="logo.html" assign="header4" inline}
    {include file="phones.top.html" assign="header5" inline}
    {include file="offline.html" assign="header6" inline}


    эти блоки отвечают за вывод содержимого в шапке

    1-й выводит логотип

    2-й телефоны

    3-й адрес

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

    {include file="logo.html" assign="header4" inline}
    {include file="search.form.html" assign="header5" inline}
    {include file="phones.top.html" assign="header6" inline}

    1
  • Алексей 15 декабря 2015 00:45 #

    И еще не забудьте добавить в @media only screen and (min-width: 993px) условие:

    .header-line.alfa-background .row-grid .table-grid .col-grid { width: 33.33333%;}

    Иначе при разрешении экрана в 1000, блок с логотипом (если Вы прописывали название магазина) или если у вас широкий логотип картинка - блок с телефоном поплывет, часть цифр и описание под ними переползут ниже, что выглядит некрасиво.

    1
    • Тирон Александр Тирон Александр 15 декабря 2015 10:57 #

      Это решение неверное. Попробуйте лучше ограничивать ширину изображения вашего логотипа:

      a#logo img {

      max-width: 200px;

      }

      1
  • Евгений 26 января 2016 23:57 #

    Сделал все, как указано в описании, но изменения произошли только для приложения Магазин. Сделал тоже самое для приложения Сайт, но в результате поиск не отобразился, то есть я закоментировал его отображение, но он не отобразился там, куда должен был перенестись. Подскажите пожалуйста в чем может быть проблема.

    1
    • Тирон Александр Тирон Александр 27 января 2016 09:45 #

      эта рекомендация работает для всех приложений, но в приложении Сайт нет функции поиска, можно ее добавить установив соответствующий плагин, так же можно включить поиск из приложения Магазин. Посмотрите файл "searchform.html" в приложении Сайт, вы сможете разобраться как4 включить поиск приложения Магазин или посмотрите эту инструкцию:

      http://wm-site.ru/profitbuy/237/forma-poiska/

      1
  • Виктор 1 сентября 2016 16:29 #

    Добрый день!

    Перенес строку поиска между блоками с логотипом и номером телефона. Но возник один вопрос, как уменьшить расстояние между строкой поиска и блоком телефонами?? Когда указан только один номер телефона еще более менее нормально смотрится, но тоже желательно уменьшить

    а когда добавляешь второй номер телефона, то это расстояние заметно увеличивается, что приводит к изменению блока с логотипом - текст перемещается вниз под картинку

    С уважением, Виктор.

    1
    • Тирон Александр Тирон Александр 5 сентября 2016 11:23 #

      Адрес вашего сайта укажите

      1
      • Виктор Виктор 5 сентября 2016 20:41 #

        в тестовом режиме настраиваю тему тут: https://www.hobbydelux.com/test123/

        1
        • Тирон Александр Тирон Александр 6 сентября 2016 10:33 #

          В файле index.html замените строку:

          {if !empty($header6)}<div class="col-grid hide-on-med-and-down align-right">{$header6}</div>{/if}

          строкой:

          {if !empty($header6)}<div class="col-grid hide-on-med-and-down align-right" style="width: 1%;">{$header6}</div>{/if}

          вставленному вами блоку:

          <div class="col-grid min-width hide-on-med-and-down">

          добавьте класс align-right:

          <div class="col-grid min-width hide-on-med-and-down align-right">

          в блок пользовательских стилей добавьте правило:

          @media only screen and (min-width: 601px) {
          	.col-grid ul.phones-wrapper li {
          		white-space: nowrap;
          	}
          }
          1
  • Виктор 6 сентября 2016 11:23 #

    Все просто отлично! Большое спасибо!

    1
  • Виктор 5 ноября 2016 14:49 #

    Добрый день.

    Подскажите пожалуйста, а как сделать замену с точностью до наоборот :)) т.е. на место строки поиска в верхнем меню поместить блок с адресом и временем работы.
    Тут понятно в index.html, заменяем один блок на другой:

    {include file="links.pages.top.html" assign="header1" inline}
    {*include file="search.form.html" assign="header2" inline*}
    {include file="offline.html" assign="header2" inline}
    {include file="links.auth.html" assign="header3" inline}

    Что еще нужно сделать / дописать?


    1
    • Тирон Александр Тирон Александр 7 ноября 2016 11:29 #

      Описанные изменения уже сделаны на вашем сайте? Данные адреса и режима работы заполнены? Проверьте наличие содержимого у файла offline.html(Сайт-Дизайн-Шаблоны).

      1
      • Виктор Виктор 7 ноября 2016 14:49 #

        Добрый день.

        Сейчас вышеописанные изменения убрал, т.к. при переносе блока адреса на место строки поиска происходит следующее:

        Меню, Личный кабинет - все съезжает вниз и сам блок адреса вытягивается вниз

        1
  • Колмаков Игорь 7 ноября 2016 15:17 #

    адрес в верхнюю панель не уместится

    его высота больше чем высота верхней панели

    1

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите

Услуги

Контакты

Дорогие друзья!

К сожалению, Ваш браузер не поддерживает современные технологии используемые на нашем сайте.

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

Internet Explorer

от Microsoft

Chrome

от Google

Safari

от Apple

Opera

от Opera Software

Firefox

от Mozilla

Вверх