Joomla 3: как оформить стили для поля поиска по сайту?

Тема в разделе "Формы", создана пользователем justquestion, 24.12.2013.

  1. Offline

    justquestion Недавно здесь

    Регистрация:
    17.12.2013
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Мужской
    Дизайнер сделал макет страницы, поле поиска на сайте должно быть в подвале на каждой странице. Поле поиска в макете оформлено с помощью CSS, с картинками по бокам. Я вставил в макет строку:

    <jdoc:include type="modules" name="search-position" />

    В настройке модулей указал позицию "search-position". В итоге на страницах появилось обычное поле <input> безо всяких стилей. А в макете поле поиска содержит код:

    <div class="search">
    <form action="/onlineorder" method="post" class="form-inline">
    <label for="mod-search-searchword" class="element-invisible">Искать...</label> <input name="searchword" id="mod-search-searchword" maxlength="20" class="inputbox search-query" type="text" size="20" value="Поиск..." onblur="if (this.value=='') this.value='Поиск...';" onfocus="if (this.value=='Поиск...') this.value='';" /> <input type="hidden" name="task" value="search" />
    <input type="hidden" name="option" value="com_search" />
    </form>
    </div>

    Вопрос: как сделать чтобы поле поиска приняло такой же вид как в макете?

    4079109.jpg
     
  2.  
  3. lev
    Offline

    lev Активист => Cпециалист <=

    Регистрация:
    21.12.2007
    Сообщения:
    687
    Симпатии:
    40
    Пол:
    Мужской
    с начало выводят поле модуля поиск, потом в свой шаблон в директории html, в директорию "mod_search", файлы и правишь их, если такой директории нет, создаёшь или же лезь в "mod_search" и вноси нужные тебе изменения ;P

    - а лучше, гони в шею Дизайнера, найми нормального разработчика, программиста шаблонов, пусть он тебе от начала до конца всё сделает сам :D
     
    Последнее редактирование: 24.12.2013
  4. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 963
    Симпатии:
    168
    Пол:
    Мужской
    Товарищ lev пишет странное.
    Для того, чтобы поле поиска стало таким, как на картинки внизу нужно просто отверстать его и в настройках модуля поиска указать:
    lev, зачем нам шаблон выводя модуля? :) Мы же функционально ничего не меняем...
    В общем логика такая:
    Код (html):
    1. .module_search {
    2.     position: relative;
    3. }
    4. .module_search input {
    5.     width: 200px;
    6.     height: 20px;
    7.     position: absolute;
    8.     top: 0;
    9.     left: 0;
    10.     color: #999;
    11.     padding: 5px;
    12.     z-index: 1;
    13. }
    14. .module_search .button {
    15.     width: 24px;   /* Ширина картинки для кнопки поиска */
    16.     height: 24px;   /* Высота картинки для кнопки поиска */
    17.     position: absolute;
    18.     right: -28px;
    19.     top: 4px;
    20.     background: url("../images/bg_button_search.png") no-repeat 0 0;   /* Адрес картинки для кнопки поиска */
    21.     border: 0;
    22.     z-index: 2;
    23. }


    P.S.: Чтобы узнать где хранится файл стилей, в Firefox - Firebug нажимаем пр.кл. мыши на странице и смотрим справа внизу ссылку на файл *.css
     
    Последнее редактирование: 24.12.2013
  5. Offline

    Similig Недавно здесь

    Регистрация:
    26.12.2013
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Мужской
    и как? получилось?
     
  6. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 311
    Симпатии:
    375
    Пол:
    Мужской
    Similig, что за флуд? Уже второе непонятное сообщение.
     

Поделиться этой страницей

Загрузка...