Listing Search – Horizontal Layout

Hi Martin

Glad you like the plugin.

You have a couple options on how to do that but need to edit the CSS to modify it.

You can use the [listing_search] shortcode which is what powers the search widget so it has a lot of options.

These are the options/attributes that can be used with the shortcode.

‘show_title’ => true, //To Disable title (true/false)
‘title’ => ”, // Freeform text
‘post_type’ => ‘property’, // Post type name singular
‘property_status’ => ”, // Singular: current / sold / leased or ” for any
‘search_house_category’ => ‘on’, // on or off
‘search_price’ => ‘on’, // on or off
‘search_bed’ => ‘on’, // on or off
‘search_bath’ => ‘on’, // on or off
‘search_car’ => ‘on’, // on or off
‘search_other’ => ‘on’ // on or off

so start with
[listing_search show_title=”false” post_type=”property”]

This CSS should be added to your theme’s style.css file which will give you a three column search box.

body .epl-button {
	background: transparent;
}
body .epl-button:hover {
	background: transparent;
}
body .epl-search-form .fm-label,
body .epl-search-form .check-label {
	color: #FFFFFF;
}

body .epl-search-form {
	width: 100%;
}
body .epl-search-form .fm-label,
body .epl-search-form .check-label {
	color: #FFFFFF;
}
body .epl-search-form .fm-block {
	border-bottom: none;
}
body .epl-search-form .bdr-btm {
	float: left !important;
	width: 30% !important;
	clear: none !important;
}

Hi Merv,

Thanks for coming back to me so quickly and thanks for the CSS code to tweak the listings search shortcode.

I’d already played around with this last night and come up a two row horizontal version as well but having a couple of different layouts is amazing.

Here’s my code just in case anyone wants to use, I also styled the search button and center aligned it ??

/****** Property Search Box ******/

.epl-search-form {
background: none repeat scroll 0 0 transparent;
width: 100%;
}

.epl-search-form .fm-block {
clear: both;
display: inline-block;
padding: 10px;
border-bottom:1px #fff solid;
}

.epl-search-form .fm-label {
color: #fff;
display: inline-block;
float: left;
font-size: 15px;
font-weight: 600;
margin-bottom: 5px;
}

.epl-search-form .in-field {
border: 1px solid #B7B7B7;
padding: 6px;
}
.epl-search-form .field-width {
width: 100%;
}

.epl-search-form .fm-block .top-mrgn {
margin-top: 10px;
display: block;
float: none;
}

.epl-search-form .check-label {
font-size: 13px;
color: #fff;
}

.epl-search-form .fm-block-half {
display: inline-block;
float: left;
width: 100%;
}
.epl-search-form .fm-block-half .top-mrgn {
margin-top: 0;
}

.epl-search-form .search-btn {
background: rgba(40, 49, 64, 0.5);
color: #fff;
width: 200px;
display: inline-block;
text-align: center;
max-width:none;
font-size: 1.5em;
margin-top: 3%;
padding: 10px;
border: 2px solid #fff !important;
border-radius: 3px;
box-shadow: none !important;
}

.epl-search-form .search-btn:hover {
color: #838383 !important;
background: rgba(255, 255, 255, 0.4) !important;
}

.epl-search-form .checkbox .in-field, .epl-search-form .checkbox .check-label {
float:left;
}
.epl-search-form .checkbox .check-label {
margin-top:-1px;
}

Thanks for that!

Marking as resolved

Hello Martindot.

I’m using your code to display the listing search horizontally but I have a problem with the first column not alignes.
Example here :

Example

Any idea on how I could fix this ?

Thanks a lot