Customization

Editing Templates

  • All templates are located in the WordPress main directory in /rocketrets_templates . The directory structure is clear on the contents of each directory.
  • Each template has a corresponding css file in the /css directory where the template is located. All styling is achieved using this css file.
  • Practically everything in RocketRETS is based on simple HTML templates selected when a shortcode is created by the page tool.
  • The templates you will be most concerned with customizing are the listing cards used on results pages and the property details template. Form templates are handled in another HowTo.
  • Data is added to the template using tokens. See the Tokens article for a list of available template tokens.
  • For instance this is the default “Gallery” property card template:

  • 
    <div class="idx-card" data-mls="{field=MLS}" data-canonical_link="{Canonical_Listing_Link}" data-title="{field=Title}" data-image="{Main_Image}" data-summary="{field=Remarks Length=256}">
        
    <div class="idx-card-inner">
            
          <!--Image Wrapper-->
                
    <div class="idx-card-image-wrapper"><a href='{Listing_Link}'><img class="idx-card-image" src="{Main_Image}" /></a></div>
    
            <!--Card Text Overlay-->
            <!--Title-->
            <span class="idx-title idx-over-image"><a href='{Listing_Link}'>{field=Address}
    {field=City}, {field=StateOrProvince}, {field=PostalCode}</a></span>
            
            <!--Price-->
            <span class="idx-price idx-over-image"><a href='{Listing_Link}'>{priceformat=Price}</a></span>
            
            <!--Property Details-->
            
            <span class="idx-highlights idx-over-image"><a href='{Listing_Link}'>{field=BedsTotal} Beds {field=BathsTotal} Baths {numberformat=SqFtTotal} SqFt </a></span>
            
            <!--Social and Share Buttons-->
            
            {features-card}
        </div>
    
    </div>
    
Category: Customization

Things to Remember

  • If all you want is to change some colors check out the Settings page Theme Colors tab
  • The data elements on the tabset MUST remain intact to prevent failure of social sharing and saving of properties
  • The property details templates are found in /rocketrets_templates/details
  • The css file follows a naming convention that will make the file obvious in /rocketrets_templates/details/css
  • All of the styling is found in the css file or is available on the Settings page, Theme Colors tab

The remainder will focus on the ListingDetailTabs template

The Header

  • There is nothing special to watch out for in the header section above the tabs

The Tabset

  • The tabset is based on radio buttons, their labels and an obscure css operator ~ and work with no javascript initially
  • The tabset HTML is pretty simple and shown below:
  •    <!--Tabs Containing Property Images, Maps, and Streetview-->
       <div class="csstabs">
          <div class="radio-tabs" id="radio-tabs" data-mls="{field=MLS}" data-lat="{field=Latitude}" data-lng="{field=Longitude}" data-status="{field=Status}" data-address="{field=Address} {field=City}, {field=StateOrProvince} {field=PostalCode}" data-image="{Main_Image}" data-summary="{field=Remarks Length=256}">
             <input class="state" type="radio" title="Images" name="tabs-state" id="images" checked="">
             <input class="state" type="radio" title="Map" name="tabs-state" id="map">
             <input class="state" type="radio" title="Street View" name="tabs-state" id="streetviewer">
             <div class="mbx-tabs">
                <label for="images" id="images-tab" class="mbx-tab">IMAGES</label>
                <label for="map" id="map-tab" class="mbx-tab">MAP</label>
                <label for="streetviewer" id="streetview-tab" class="mbx-tab">STREET VIEW</label>
             </div>
             <div class="mbx-panels">
                <div id="images-panel" class="mbx-panel">
                   <div class="gallery-wrapper">{Galleria}</div>
                </div>
                <div id="map-panel" class="mbx-panel">
                   <div id="HouseMap"></div>
                </div>
                <div id="streetviewer-panel" class="mbx-panel">
                   <div id="StreetView"></div>
                </div>
             </div>
          </div>
       </div>
    
  • There are some things to be aware of before editing the HTML. Most notable among these is the map and streetview are not requested until the tab is clicked the first time, so be careful

Field Groups Section

  • Display field groups however you like. The default is 2 columns with headers to match the group subject
  • Field group tokens use the format {group-GroupName}. The correct tokens can be found on the Field Groups page at the top of each column
Category: Customization

Comment on this FAQ

Your email address will not be published. Required fields are marked *

Field Tokens

  • {field-DbFieldName} – This is the most basic data token and will display the raw contents of the field
  • {field-DbFieldName Length=Integer} – The Length parameter sets the maximum length of the string returned. The data is truncated at the end of the nearest word
  • {priceformat=DbFieldName} – returns a price formatted string like $549,000
  • {numberformat=DbFieldName} – returns a number formatted string such as 599 or 12,000

   Special Field Tokens

  • {TotaledBaths-DbFullBathsField,DbHalfBathsField} – Returns total baths from full and half bath inputs if your mls does not provide a total
  • {AddFieldValues-DbFieldName1,DbFieldName2,…} – Returns an integer value for the total of the fields given

Property Details Field Groups

  • {group-FieldGroupName} – Returns field group values formatted. This token can be copied at the top of each column on the Field Groups page

Other Tokens

  • {pricemove-DbOriginalPriceField|DbCurrentPriceField} – Returns an up or down arrow and percent price change if there is one
  • {Listing_Link} – Returns a relative link to the property
  • {Canonical_Listing_Link} – Returns a full url to the property
  • {Main_Image} – Returns the full url of the first image for a property (Useful on cards)
  • {Last_Download_Time} – Returns the formatted time and date of the last RETS update
  • {Days_On_Idx} – Days since the property was listed on the mls (For use where no DOM data exists in the data
  • {Image_Alt_Tag} Returns a templated alt tag for results images (card images). The template is found on the Settings page, Images tab
  • {ReciprocityImage} – Returns the url of the image /rocketrets_templates/images/mlsrlogo.gif
  • {ListingDisclaimer} – Returns the listing disclaimer that can be entered on the Settings page main tab
  • {status_ribbon} – Returns and places a ribbon corresponding to the property status. Usage is discussed in template documentation
Category: Customization

Comment on this FAQ

Your email address will not be published. Required fields are marked *

Installation & Setup

  1. Please enter the license code provided in the email when you purchased RocketRETS, or login to RocketRETS using the credentials you create when you purchased at https://rocketrets.com/checkout/purchase-history/
  2. Click “Activate”
  3. If you want to move your license to another domain, click deactivate FIRST before attempting to reactivate on new domain

Load More