CSS And HTML Reference

Full List of Custom Styles

Here we provide a reference of all CSS classes provided for you to customize, and a detail of the HTML generated by list and detail shortcodes.

List Page CSS Classes

simpleotis-list-item-container  
simpleotis-flex-container  
simpleotis-post-thumbnail-background  
simpleotis-entry-container  
simpleotis-list-description  
simpleotis-pagination-number  
simpleotis-pagination  
simpleotis-pagination-link  
simpleotis-pagination-text  
simpleotis-error-message  
simpleotis-empty-search-message  
simpleotis-map-container  

Detail Page CSS Classes

simpleotis-additional-info-container  
simpleotis-additional-info-header  
simpleotis-additional-info-key  
simpleotis-additional-info-section  
simpleotis-additional-info-value  
simpleotis-description  
simpleotis-detail-not-found  
simpleotis-error-message  
simpleotis-gallery-photo  
simpleotis-hero-photo  
simpleotis-photo  
simpleotis-gallery-container  
simpleotis-gallery-section  
simpleotis-info-container  
simpleotis-info-key  
simpleotis-info-section  
simpleotis-info-value  
simpleotis-link-a  
simpleotis-link-p  
simpleotis-links-header  
simpleotis-listing-container  
simpleotis-listing-header  
simpleotis-listing-link  
simpleotis-map-container  
simpleotis-photo-container  
simpleotis-photos-header  
simpleotis-primary-info-container  
simpleotis-primary-info-header  
simpleotis-primary-info-key  
simpleotis-primary-info-section  
simpleotis-primary-info-value  
simpleotis-rel-a  
simpleotis-rel-p  
simpleotis-related-header  
simpleotis-section  
simpleotis-section-header  

HTML Snippets

The following snippets are generated by the SimpleOTIS plugin in order to display information inside of WordPress pages. The highlighted class names give website developers the ability to further customize the look and feel of the displayed information.

The shotcode snippets work with most WP themes without any need to use the custom CSS.

Detail Page HTML

<div class="simpleotis-listing-container">
 <a href="javascript:history.go(-1)">Back</a>
 <h1 class="simpleotis-listing-header">*** LISTING NAME ***</h1>
 <h4>*** LISTING CITY ***</h4>
 <img
   decoding="async"
   class="simpleotis-photo simpleotis-hero-photo"
   src="*** LISTING MAIN PHOTO URL ***"
   alt="*** LISTING MAIN PHOTO ALT TEXT ***"
/>
 <section class="simpleotis-section simpleotis-description">
   *** LISTING DESCRIPTION (contains <p> within OTIS description content) ***
 </section>
 <section class="simpleotis-section simpleotis-info-section simpleotis-primary-info-section">
   <h2 class="simpleotis-section-header simpleotis-primary-info-header">
     Listing Info
   </h2>
   <div class="simpleotis-primary-info-container simpleotis-info-container">
     <p class="simpleotis-primary-info-key simpleotis-info-key">
       Primary Address:
     </p>
     <p class="simpleotis-info-value simpleotis-primary-info-value">
       *** LISTING ADDRESS1, CITY, ZIP , STATE ***
     </p>
   </div>
   <div class="simpleotis-primary-info-container simpleotis-info-container">
     <p class="simpleotis-primary-info-key simpleotis-info-key">
       Primary Phone:
     </p>
     <p class="simpleotis-info-value simpleotis-primary-info-value">
       *** LISTING PHONE ***
     </p>
   </div>
 </section>
 <section class="simpleotis-section simpleotis-gallery-section">
   <h2 class="simpleotis-photos-header simpleotis-section-header">Photos</h2>
   <div class="simpleotis-gallery-container">
     <div class="simpleotis-photo-container">
       <img
         decoding="async"
         class="simpleotis-photo simpleotis-gallery-photo"
         src="*** LISTING PHOTO ***"
         alt="*** LISTING PHOTO ALT TEXT ***"
      />
     </div>
   </div>
 </section>
 <section class="simpleotis-section">
   <h2 class="simpleotis-links-header simpleotis-section-header">Links</h2>
   <p class="simpleotis-link-p">
     <a class="simpleotis-link-a" 
        href="*** LISTING LINK URL ***">
        *** LISTING LINK NAME ***
     </a>
   </p>
 </section>
 <section class="simpleotis-section simpleotis-additional-info-section">
   <h2 class="simpleotis-section-header simpleotis-additional-info-header">
     Additional Info
   </h2>
   <div class="simpleotis-additional-info-container simpleotis-info-container">
     <p class="simpleotis-additional-info-key simpleotis-info-key">
       *** LISTING ATTRIBUTE NAME ***
     </p>
     <p class="simpleotis-info-value simpleotis-additional-info-value">
       *** LISTING ATTRIBUTE VALUE ***
     </p>
   </div>
 </section>
 *** OPTIONAL MAP DISPLAY ***
 <div class="simpleotis-map-container">
   *** LEAFLETJS MAP W/ LISTING DATA ***
 </div>
</div>

List Page HTML

<div class="simpleotis-listings-container">
 <article class="simpleotis-list-item-container post type-post status-publish format-standard has-post-thumbnail">
   <div class="post-wrapper simpleotis-flex-container">
     <div class="simpleotis-post-thumbnail-background post-thumbnail-background"
          style="background-image: url(*** LISTING PHOTO URL ***)">
       <a class="cover-link simpleotis-cover-link" href="*** LISTING DETAIL LINK ***"></a>
     </div>
     <div class="simpleotis-entry-container entry-container">
       <header class="entry-header">
         <div class="entry-meta"><span>*** LISTING DESCRIPTION ***</span></div>
         <h2 class="entry-title">
           <a href="*** LISTING DETAIL LINK ***" rel="bookmark">
             *** LISTING NAME ***
           </a>
         </h2>
         <p class="simpleotis-list-description">*** LISTING DESCRIPTION ***</p>
       </header>
     </div>
   </div>
 </article>
 *** OPTIONAL LEAFLETJS MAP COMPONENET **
 <div class="simpleotis-map-container"></div>
 <div class="simpleotis-pagination pagination">
   <a class="simpleotis-pagination-link" href="./?listings_page=1">First</a>
   <a class="simpleotis-pagination-link" ref="./?listings_page=1">Previous</a>
   <span class="simpleotis-pagination-text">Page 1 of 5</span>
   <a class="simpleotis-pagination-link" href="./?listings_page=2">Next</a>
   <a class="simpleotis-pagination-link" href="./?listings_page=5">Last</a>
 </div>
</div>