XF 2.1 Place a search bar in the header

[djbaxter]

Not sure how to do this:

Forum uses a custom style which does have the usual search link in the navigation bar.

Owner wants to turn this into or add a WordPress style search bar located in the header to make it more prominent:



How would I go about doing this?

 

[djbaxter]

Figured it out, or at least one way.

I used the advertising position "Container header" (" Position in the header, opposite the logo block.") and this HTML (hacked from a widget - could be cleaned up a bit):

<div class="block" style="width: 400px;">
    <br />
    <div class="block-container" style="background-color: #7DC2EB;">
        <div>
    <form action="{{ link('search/search') }}" method="post" class="menu-content" data-xf-init="quick-search">
        <!--[XF:search_menu:above_input]-->
        <div class="menu-row" style="background-color: #7DC2EB;">
            <xf:if is="$searchConstraints">
                <div class="inputGroup inputGroup--joined">
                    <xf:textbox name="keywords"
                        placeholder="{{ phrase('search...') }}"
                        aria-label="{{ phrase('search') }}"
                        data-menu-autofocus="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-menu-autofocus="true" />
            </xf:if>
        </div>

        <xf:csrf />
    </form>
    </div>
    </div>
</div>

 

[Russ]

@djbaxter I know you use our styles on some sites so just as a heads up we do have an option for that: style properties -> header and navigation -> search location.

 

[djbaxter]

Thanks, @Russ. Unfortunately, this site isn't one of those using one of your styles. That would have made it easier.

 

[TBolley]

@djbaxter I know you use our styles on some sites so just as a heads up we do have an option for that: style properties -> header and navigation -> search location.

dont see any search location into header-navigation

 

[djbaxter]

dont see any search location into header-navigation

Are you using a PixelExit custom style? That's what @Russ was referring to.

 

[TBolley]

Are you using a PixelExit custom style? That's what @Russ was referring to.

nope have some XenFocus Style

 

[djbaxter]

Well then the suggestion from Russ probably won't work.

Your best bet is to contact the designer of the XenFocus style for support.