Search custom Refinement

Question

I watched Matthew McDermott's video (SharePoint Conference) and I really like those custom refiners:

How is it possible to get the refinement items next to each other (horizonally) instead of vertically? Are the files anywhere available?

I have by now the following (my refiners, but all vertically):

The files would be great how this is done, or at least the way how to get the refiners next to each other.

Answer 1

It's just CSS. Here is the snippet showing the inline style. I use inline-block rather than float as it gave me the organization and flow I needed for the wrapper divs. Let me know if you want the whole file and I'll post it for you.

<div id='Value' name='Item' style="width:25px;height:25px;border-radius:3px;display:inline-block;">
  <a id='FilterLink' class='_#= $htmlEncode(aClass) =#_' onclick="_#= aOnClick =#_" href='javascript:{}' title='_#= $htmlEncode(String.format(Srch.U.loadResource("rf_RefineBy"), refinementName)) =#_'>
    <!--#_
    if (refinementName == 'All')
    {
    _#-->
    <div id='RefinementName' style="background-color:aquamarine;width:75px;height:25px;border-radius:3px;display:inline-block;padding:0px 4px;text-align:center;">Clear Filter</div>
    <!--#_
    } 
    else 
    {
    _#-->
    <div id='RefinementName' style="display:inline-block;">
        <img src="_#= iconFile =#_" alt="refine by: _#= refinementName =#_"/>
    </div>

Answer 2

I'm not sure that I understood you correctly. But this loos like a simple CSS issue in your refinement file (normaly at '/Display Templates/Filters'). Look at the CSS float property: http://www.w3schools.com/cssref/pr_class_float.asp

<div style="float: left;">
    <optgroup label="Selected Refiners" id="_#= refinement1 =#_">
        //your refinement stuff here
    </optgroup>
</div>

<div>
    <optgroup label="Other Refiners" id="_#= refinement2 =#_">
        //your other refinement stuff here
    </optgroup>
<div>

Answer 3

There is a "control" template for refiners that specifies how they are laid out. The "out of the box" one is control_refinement.html and is in /_catalogs/masterpage/DisplayTemplates/Filters. If you look at it you'll notice it's title is "Vertical".

To get the refiners displayed horizontally, you should create your own control template (possibly copying the existing one as a starting point), and then edit the HTML to display the refiners as you need.

Then in the refiner web part's properties, you'll see there's a "Control" dropdown which has the "Vertical" template selected by default, just change this to your new template.