XF 2.2 Перенос и изменение внешнего вида формы поиска

[Asmodeus]

Ув. знатоки,подскажите пожалуйста как перенести и визуально изменить форму поиска как на скриншоте.
Сейчас вот так:


Нужно вот так:


Заранее спасибо.
P.S дизайн дефолтный.

 

[Sidd]

История продолжается =) Давно бы договорился с админами того стиля о покупке, раз все равно хочешь как там.

 

[Asmodeus]

История продолжается =) Давно бы договорился с админами того стиля о покупке, раз все равно хочешь как там.

OFFTOP

я за пару часиков и банку пива сделал себе копию один в один,не понял только пару моментов)
1. это перенос поиска
2 там мелочи жизни)
Да и покупать там по сути нечего, десяток строчек в экстре.
А цену придумает космическую.
(но я интереса ради потом спрошу)

 

[Sidd]

Внешний вид - модификации шаблонов
шаблон
PAGE_CONTAINER
Найти

<div class="p-nav-opposite">

Заменить

<div class="sw-block">
        <form action="/search/search" method="post" data-xf-init="quick-search">
        <input type="text" class="input" name="keywords" placeholder="Поиск..." aria-label="Поиск" data-menu-autofocus="true" />
        <span class="sw-buttons">
            <button type="submit" class="button--primary button button--icon button--icon--search"><span class="button-text">Поиск</span></button>
            <a href="/search/" class="button" rel="nofollow"><span class="button-text">Расширенный поиск...</span></a>
        </span>

    <input type="hidden" name="_xfToken" value="1616963515,3ffbda6fc91753d5fdfc74c0be7b76f7" />
</form>
    </div>

<div class="p-nav-opposite">

В extra:

/* поиск */

.sw-block .input {
    margin-bottom: 4px;
    border-radius: 100px;
    padding: 6px 6px 6px 6px;
    background: #2d2d2d url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png) no-repeat 5px 37%;
    background-size: auto 70%;
    padding-left: 28px;
    font-size: 13px;
}
.sw-buttons {
    display: none;
}
/* поиск */

Если что это их код, дальше думаю сами справитесь.

 

[Asmodeus]

Внешний вид - модификации шаблонов
шаблон
PAGE_CONTAINER
Найти

<div class="p-nav-opposite">

Заменить

<div class="sw-block">
        <form action="/search/search" method="post" data-xf-init="quick-search">
        <input type="text" class="input" name="keywords" placeholder="Поиск..." aria-label="Поиск" data-menu-autofocus="true" />
        <span class="sw-buttons">
            <button type="submit" class="button--primary button button--icon button--icon--search"><span class="button-text">Поиск</span></button>
            <a href="/search/" class="button" rel="nofollow"><span class="button-text">Расширенный поиск...</span></a>
        </span>

    <input type="hidden" name="_xfToken" value="1616963515,3ffbda6fc91753d5fdfc74c0be7b76f7" />
</form>
    </div>

<div class="p-nav-opposite">

В extra:

/* поиск */

.sw-block .input {
    margin-bottom: 4px;
    border-radius: 100px;
    padding: 6px 6px 6px 6px;
    background: #2d2d2d url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png) no-repeat 5px 37%;
    background-size: auto 70%;
    padding-left: 28px;
    font-size: 13px;
}
.sw-buttons {
    display: none;
}
/* поиск */

Если что это их код, дальше думаю сами справитесь.

Мое почтение.

 

[Sidd]

Только там еще что-то с _xfToken связано, я не знаю как оно должно работать, может нужно токен своего форума вставлять

 

[Atikin]

Это не токен форума, а токен CSRF, который вставляется тегом <xf:csrf />. Да и вообще, копировать в модификацию содержимое кода элемента — такая себе идея.

 

[Asmodeus]

Это не токен форума, а токен CSRF, который вставляется тегом <xf:csrf />. Да и вообще, копировать в модификацию содержимое кода элемента — такая себе идея.

Подскажи как сделать это без костылей)

 

[Atikin]

Вариант на коленке:

                    <xf:if is="$xf.visitor.canSearch()">
                        <form action="{{ link('search/search') }}" method="post"
                              data-xf-init="quick-search">
                            <xf:if is="$searchConstraints">
                                <div class="inputGroup inputGroup--joined">
                                    <xf:textbox name="keywords"
                                                placeholder="{{ phrase('search...') }}"
                                                aria-label="{{ phrase('search') }}"
                                                data-xf-click="menu"
                                                data-xf-key="{{ phrase('shortcut.search_menu')|for_attr }}"
                                                aria-label="{{ phrase('search')|for_attr }}"
                                                aria-expanded="false"
                                                aria-haspopup="true"/>
                                    <xf:select name="constraints"
                                               class="js-quickSearch-constraint"
                                               aria-label="{{ phrase('search_within') }}">

                                        <xf:option value="">{{ phrase('everywhere') }}</xf:option>
                                        <xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
                                            <xf:option value="{$constraint|json}">{$constraintName}</xf:option>
                                        </xf:foreach>
                                    </xf:select>
                                </div>
                                <xf:else />
                                <xf:textbox name="keywords"
                                            placeholder="{{ phrase('search...') }}"
                                            aria-label="{{ phrase('search') }}"
                                            data-xf-click="menu"
                                            data-xf-key="{{ phrase('shortcut.search_menu')|for_attr }}"
                                            aria-label="{{ phrase('search')|for_attr }}"
                                            aria-expanded="false"
                                            aria-haspopup="true"/>
                            </xf:if>
                            <xf:csrf />
                        </form>
                    </xf:if>

UPD #100500: выпили меню, ибо лень его прикручивать к полю поиска. И так сойдет ?