Reliance Network Featured Properties Widget

General Use
To use the Reliance Network Featured Properties Widget on your web site simply add the following script tag to your web page:
<script type="text/javascript" src="https://www.reliancenetwork.com/widgets?file=featuredproperties &amp;token=[Token] &amp;qty=[Quantity] &amp;carousel=[Carousel] &amp;theme=[Theme] &amp;settings=[Settings] &amp;w=[Maximum Photo Width] &amp;h=[Maximum Photo Height] &amp;mx=[Maximum Price] &amp;mn=[Minimum Price] &amp;p=[Property Types] &amp;viewall=[View All Link] &amp;disclaimer=[Disclaimer] &amp;newwindow=[New Window] &amp;s=[Marketing Source Code]"></script>

Tip: for a more reliable display accross multiple browsers add a DOCTYPE declaration to the top of your web page.

QueryString Parameters
Parameter Required Description
[Token] Yes Replace with the the token found on the Widgets tab under Site Builder in your Reliance Network intranet.
[Quantity] No Replace with the number of featured properties you would like to display. If not specified one featured property will be displayed by default.
[Carousel] No Replace with true or false to control whether user can navigate back and forth through the featured properties, or if all are displayed at once. Works in conjunction with Quantity setting.
[Theme] No Replace with the name of a supported color theme to change the basic colors of the widget. If not specified the default theme will be used. Supported color theme names are: aqua, cornflower, grass, inverse, lilac, rose, sand, sherbert, and sky.
[Settings] No Replace with the name of a supported setting to change which featured properties settings for your account to use. If not specified the featured properties main page settings for your account will be used. Supported settings are: main, thumb, and list.
[Maximum Photo Width] No Replace with the maximum width, in pixels, the photos should display at.
[Maximum Photo Height] No Replace with the maximum height, in pixels, the photos should display at.
[Maximum Price] No Replace with the maximum price of featured properties you would like to display.
[Minimum Price] No Replace with the minimum price of featured properties you would like to display.
[Property Types] No Replace with a pipe (|) delimited list of property types of featured properties you would like to display. Use the Widgets tab under Site Builder in your Reliance Network intranet to specify this feature.
[View All Link] No To display the "View All" link, replace with either true or the text you would like to display on the link (e.g. My Featured Listings). If not specified the "View All" link will not be displayed by default.
[Disclaimer] No The disclaimer displays below the set of featured properties by default. To hide the disclaimer, replace with none.
[New Window] No Replace with true or false so all links clicked by the user will open your Reliance Network website in a new window or in the same window respectively. If not specified your Reliance Network website will open in the same window by default.
[Marketing Source Code] No Replace with a marketing source code for tracking where a site visit originated from.

Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>My Web Site</title>
    </head>
    <body>

        <div>
            <script type="text/javascript" src="https://www.reliancenetwork.com/widgets?file=featuredproperties&amp;token=ABCDEF"></script>
        </div>

    </body>
</html>
.


Advanced Topics
You can alter the style/layout of the widget by adding a stylesheet with the supported classes to your web page.
Class Description
rn-fp Applies to the div element that contains the featured properties.
rn-fp-c Applies to the div element(s) that contains each photo/info group.
rn-fp-photo Applies to the div element(s) that contains the photo and acts as the border around the photo.
rn-fp-info Applies to the div element(s) that contains the property's basic information.
rn-fp-info-label Applies to labels of the property's basic information.
rn-fp-info-value Applies to values of the property's basic information.
rn-fp-info-num Applies to the line of information for a property's MLS number. Hidden by default.
rn-fp-info-city Applies to the line of information for a property's city.
rn-fp-info-type Applies to the line of information for a property's type.
rn-fp-info-price Applies to the line of information for a property's price.
rn-fp-info-bed Applies to the line of information for a property's number of bedrooms.
rn-fp-info-bath Applies to the line of information for a property's number of bathrooms.
rn-fp-extras Applies to the div element(s) that contains the extra features available for the property (e.g. Additional Photos, Virtual Tour, etc.).
rn-fp-viewdetails Applies to the div element(s) that contains the link to view the property's listing details page.
rn-fp-viewall Applies to the div element that contains the link to view the featured properties page on your Reliance Network website.
rn-fp-disclaimer Applies to the div element that contains the disclaimer copy when all the listings are from the same listing office.
rn-fp-lo Applies to the div element that contains the disclaimer copy for each listing when the listings are from different listing offices.

Default Style Definitions
You can copy and paste these style definitions into your web page and use them as a starting point.
.rn-fp { font-family:Arial, Sans-Serif;}
.rn-fp-loading { background-color:black; font-weight: bold; filter: alpha(opacity=60); opacity:0.6; -moz-opacity:0.6; position:absolute; }
.rn-fp-loadingText {font-weight: bold; position:absolute; }
.rn-fp-c, .rn-fp-extras, .rn-fp-disclaimer, .rn-fp-viewall, .rn-fp-photo img { margin:5px }
.rn-fp-c { float:left; border-bottom:#999999 1px solid; font-size:9pt }
.rn-fp-photo { border:#999999 1px solid; background:#ffffff }
.rn-fp-info { line-height:1.1em; clear:both; padding:3px 5px }
.rn-fp-info-label { font-weight:bold; width:90px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rn-fp-info-value { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rn-fp-info-num { display:none }
.rn-fp-extras { padding-top:2px; left:3px; bottom:3px }
.rn-fp-viewdetails { float:none; text-align:center; padding:3px; border-top:#bfbfbf 1px solid; white-space:nowrap }
.rn-fp-viewall { padding:6px 3px; text-align:center; border:#bfbfbf 1px solid; white-space:normal; margin-top:0 }
.rn-fp-nav {cursor:pointer; height:100%; position:absolute; top:0px; overflow:hidden; right:0px; z-index:999999; width:20px; background:no-repeat; background-position:center }
.rn-fp-nav-next { border-left:#bfbfbf 1px solid; background-image:url(/widgets/FeaturedProperties/caroselnavnext.png); }
.rn-fp-nav-prev { border-right:#bfbfbf 1px solid; background-image:url(/widgets/FeaturedProperties/caroselnavprev.png); }
.