Code Snippets

V2 Listings with Dual Images

This CSS uses the UnitListItemV2DualImages.cshtml listing template

/*-- Unit Listing Dual Images --*/

.unit-list .img2 { display: none; }
.unit-list .favorite-container { left: 12px; right: auto; }

    @media (min-width: 1600px) {
        .unit-list .listMode .unit-media {flex: 0 0 575px;}
        .unit-list .listMode .unit-media img {width: 270px;border-radius: 4px;}
        .unit-list .listMode .img2 { display: inline-block; margin-left: 15px; }
        .unit-list .listMode .unit-pricing {flex: 0 0 280px;padding: 0 0 0 30px;}
Dual Image Listings Sample

Reposition the Searchbar on Mobile Devices


    function move_searchbar() {
        if ($(window).width() <= 991) {
        } else {

Mobile Searchbar sample

Pause Jquery Elements

Use these scripts in the Chrome Dev Tools console

PAUSE FEATURED RVS:  $("#slideshowWrap").cycle("pause")

PAUSE DEAL OF THE WEEK TIMER:  $("#defaultCountdown").countdown("pause")


Automatically repeating marquee

<div class="marquee"><marquee><span>RV Parts....</span> <span>RV Accessories....</span><span>We carry propane....</span><span>We will ship globally....</span></marquee>


	var row = $('marquee span');
	for(var i = 0; i < 10; i++ ) {

Sample Marquee

Listing Page V2 Featured Units Corner Ribbon

Using an Image (Beckley's RVs)

.home-featured #slideshowWrap .photoContainer:after,
.unit-list .featured-unit .unit-media-wrapper:after,
.unit-detail-v2.featured-unit .detailMediaPhotoPlayer ul.slides > li:after { content: url(; position: absolute; top: 0; left: 0; z-index: 999; }
.unit-list .unit-media-wrapper { position: relative; overflow: hidden; }
.unit-detail-v2.featured-unit .detailMediaPhotoPlayer ul.slides > li { overflow: hidden; }
.unit-list .unit-media-wrapper:after { left: -42px; top: 18px; }
Corner Ribbon sample 1

Using only CSS (General RV)

.home-featured #slideshowWrap .photoContainer:after,
.unit-list .featured-unit .unit-media-wrapper:after,
.unit-detail-v2.featured-unit .detailMediaPhotoPlayer ul.slides > li:after { content: 'HOT DEAL'; position: absolute; display: block!important; top: 22px; left: -46px; background: #d7062b; font-family: 'Montserrat', sans-serif; color: #fff; font-weight: 700; font-style: italic; padding: 6px 45px 5px 56px; transform: rotate(-35deg); z-index: 999; }
.unit-list .unit-media-wrapper { position: relative; overflow: hidden; }
.unit-detail-v2.featured-unit .detailMediaPhotoPlayer ul.slides > li { overflow: hidden; }
.unit-list .unit-media-wrapper:after { left: -45px; top: 20px; }
Corner Ribbon sample 2

UL List with FontAwesome Checkmarks

ul.list-checks { margin: 0 0 30px 0; list-style: none; padding: 0; }
ul.list-checks li { position: relative; padding-left: 25px; }
ul.list-checks li:after { content: '\F00C'; font-family: 'fontAwesome'; position: absolute; top: 0; left: 0; color: #242817; }
FontAwesome checkmarks sample

Featured RV See Details Button


        $('#home-featured-rvs .unit').each(function(){
        $(this).find('.pricingContainer').append('<span class="btn btn-primary">SEE DETAILS</span>');

More Details button sample

Tab Menu

Shows/hide content based on which tab is selected. Reference: Stellhorn RV

<div id="t-tabs"><span class="t-tab selected" id="tab-first">First Tab</span><span class="t-tab" id="tab-second">Second Tab</span></div>
<hr /><br />
<div id="first-wrapper" class="tab-wrapper selected">
   <h2>Title One</h2>
   <p>Content goes here.</p>
<div id="second-wrapper" class="tab-wrapper">
   <h2>Title Two</h2>
   <p>Some more content goes here.</p>

    // Add or remove 'selected' class based on which tab is clicked.
    $( document ).ready(function() {
            var id = $(this).attr('id').substr(4);
            $('#' + id + '-wrapper').addClass('selected');

.t-tab { border: 1px solid #ddd; border-radius: 8px 8px 0 0; padding: 10px 30px; position: relative; border-bottom: 1px; top: 14px; margin-right: 20px; background: #ebebeb; z-index: 9; }
.t-tab.selected { background: #fff; border-bottom: 0; }
.t-tab:hover { cursor: pointer; }
.tab-wrapper { display: none; }
.tab-wrapper.selected { display: block; }
First tab     Second tab

Call Today phone link on listing pages
Call Today phone link on detail pages