SimplyRETS Wordpress Style Guide

The SimplyRETS Wordpress plugin generates HTML for the listings shown on your site. It uses a standard set of classes and id's that is compatible with most themes out there. It will even use most of your theme's styling like colors, font-sizes, etc. In the case that you would like to customize the plugin even more for your theme, we've made it simple for you. Use the style guide below to easily find which element for which you need to add style. These classes and id's are versioned and safe to use, so you don't need to worry about your custom styles breaking when you upgrade. Like always, you should still use a child theme or a plugin like Add Custom CSS to add styles.

simply-rets-client.css - Copyright (C) Reichert Brothers 2014 Licensed under the GNU GPL version 3 or later.

Listing Results

sr-listing is the main class wrapping each result on a page with mulitple listings (ie - search results pages).

It only contains properties for position and display - and wraps classes for more specificity.You can change height, width, and other general sizes with this class.

Result photo

sr-photo wraps the sr-listing thumbnail image shown for list results.

There's really a lot you can do here, so we'll leave it up to you get creative, but for any changes to the placement, size, animations, etc of the image, use this class.

Primary Data

sr-primary-data is that banner that displays the listing address and price. This element only contains the title area of the listing wrapper.

Utilizing this class is useful for changing colors, size, position, borders, etc for the primary listing data on results pages.

The font and size will be handled by your theme, but the background color is a light grey. This is very simply to change by setting: .sr-primary-data { background-color: #yourcolor; }

Secondary Data

sr-secondary-data contains the additional listing details beneath the primary data banner.

You can use this class to show or hide pieces of data, change the size, position or font.

Most things will be handled by the theme here as well, but a common modification is to change the margin-left property to align better in some themes.

Notice that we also provide you with sr-data-column for managing the spacing and margin between the two columns of secondary data. For example, set the .sr-data-column to display: block to make the two columns into one.

.sr-listing {
    position: relative;
    display: block;
}

.sr-photo {
    position: relative;
    display: inline-block;
    float: left;
    height: 155px;
    width: 30%;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.sr-primary-data {
    width: 70%;
    display: inline-block;
    vertical-align: top;
    background-color: #eee;
}
.sr-primary-data h4 {
    padding-left: 15px;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.sr-secondary-data {
    display: inline-block;
    vertical-align: top;
    padding-top: 10px;
    width: 70%;
}
.sr-data-column {
    display: inline-block;
    margin: 0px 0px 10px 15px !important;
}

Listing Details

sr-details is the main class wrapping each single listing details page.

Commonly, this is used in addition with a child class for specificity, but you can also set the width, height, etc for the whole page with this class.

Listing Primary Details

sr-primary-details is the section on single listing pages just below the slider. It contains property information like Bedrooms, Baths, Lot Size, and MLS status.

This area also uses flexbox, so you can hide any of the fields without affecting the overall look of the section.

Within this class you can see that we have a separate class to access the details individually. Modify these as you wish using either the class or the id, depending on what you need.

.sr-details {
    margin-top: 15px;
}

.sr-details th {
    background-color: #eee;
}

.sr-primary-details {
  display: flex;
  justify-content: space-between;
  clear: both;
  padding-top: 15px;
}

.sr-primary-details .sr-detail {
    text-align: center;
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    border-left: solid 1px #eee;
    border-right: solid 1px #eee;
    border-bottom: solid 1px #eee;
}

.sr-remarks-details {
    border-left: solid 1px #eee;
    border-right: solid 1px #eee;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
}

.sr-remarks-details p {
    line-height: 20px !important;
}

Search Form

Much like we've seen so far, your theme will handle most of the styling for this.

However you can use any classes or id's insde of the sr-search-form-wrapper class to show/hide/move/etc any of the search form fields. The backend search should still work with most search form modifications.

The search form makes use of the flexbox CSS property. So if you decide to hide any of the search options, the rest will fill the remaining space. Most of these elements also have id's for you to use specifically.

#sr-search-wrapper {
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 15px;
}

#sr-search-wrapper form {
    margin-bottom: 0px;
}

#sr-search-wrapper h3 {
    margin-top: 0px;
}

.sr-minmax-filters {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
}

#sr-search-keywords {
    width: 70%;
}
#sr-search-keywords input {
    width: 100%;
}

#sr-search-ptype {
    width: 25%;
    text-align: left;
}
#sr-search-ptype select {
    width: 90%;
    vertical-align: middle;
}

#sr-search-minprice,
#sr-search-maxprice,
#sr-search-minbaths,
#sr-search-maxbaths,
#sr-search-minbeds,
#sr-search-maxbeds {
    text-align: left;
}

#sr-search-minprice input,
#sr-search-maxprice input,
#sr-search-minbaths input,
#sr-search-maxbaths input,
#sr-search-minbeds input,
#sr-search-maxbeds input {
    width: 85%;
}
.sr-search-field {
    display: inline-block;
}

#sr-search-wrapper .submit {
    margin-top: 10px;
}

Image Slider - Listing Details

The image slider on single listing pages is powered by pure css (meaning you can style it)!

It's a bit more complicated, but it is idiomatic to the rest of the class structure used, so if you've already made changes elsewhere, this should be a breeze.

.sr-slider{
    max-width: 650px;
    width: 100%;
    position: relative;
    padding-top: 485px;
    margin: 10px auto;
    background-color: transparent;
    transition: all 0.5s;
}

.sr-slider>img{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: auto;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.75);
}

.sr-slider input[name='slide_switch'] {
    display: none;
}

.sr-slider label {
    margin: 18px 0 0 18px;
    border: 3px solid #999;
    float: left;
    cursor: pointer;
    transition: all 0.5s;
    opacity: 0.6;
    height: 65px;
    overflow: hidden;
    clear: right;
    display: none;
}

.sr-slider input[name='slide_switch']:checked+label {
    border-color: #666;
    opacity: 1;
}
.sr-slider input[name='slide_switch'] ~ img {
    opacity: 0;
    transform: scale(1.1);
}
.sr-slider input[name='slide_switch']:checked+label+img {
    opacity: 1;
    transform: scale(1);
}

.sr-details-links {
    text-align: right;
    margin-top: -15px !important;
    margin-bottom: 0px !important;
}
#sr-toggle-gallery {
    clear: both;
    cursor: pointer;
}