/
Add Media Showroom

Add Media Showroom

  1. In ICC, create a new page named “media-showroom”.

  2. Add the “VirtualTourList” macro to the page.

  3. Save and publish the page.

 

Style Example

You may utilize this example styling from Holiday World. Make sure to change the colors according to the site’s styling.

/* ========================================================================== Media Showroom ========================================================================== */ .media-showroom #virtualToursWrapper .col-md-3{margin-bottom:10px;} .media-showroom #virtualToursWrapper .col-md-3 img{height:115px;} .vt-type-nav .inputBox {padding: 10px; background: #c81f2b; border-radius: 0 0 10px 10px;} .btn-video-tour, .btn-shop, .btn-details{width:100%; background: #c81f2b; border: 1px solid #c81f2b; color: #fff; margin-top:5px;} .btn:hover{background:#E8A733 !important;} .btn-inquiry-form{width:100%; background:#E8A733; color: #000; margin-top:5px;} .btn-inquiry-form:hover{background:#2953A8 !important; color:#fff !important;} .unit-name, .unit-type{width:100%; text-align:center; display:inline-block;} .unit-name{font-weight:700; height:70px;} .unit-type{font-size:14px;} .vt-unit-types-tabs-wrapper li a{background-color: #c81f2b; color:#fff; border-radius:10px 10px 0px 0px; } .media-showroom .nav-tabs .active a{color:#fff !important; background-color:#E8A733 !important; } .media-showroom .inputBox{background-color:#E8A733; padding:10px; margin-top:-1px;} .media-showroom .nav-tabs>li>a{color:#fff !important;} .tab-pane h2{background-color:#c81f2b; color:#fff; border-radius:10px 10px 0px 0px;padding:10px; padding-left:25px;} @media (min-width: 992px){ #tab-header-mobile{display:none;} } @media (min-width: 1200px){ .media-showroom #virtualToursWrapper .col-md-3{width:24% !important; margin-left:9px; margin-bottom:10px; border:1px solid #f0f0f0; border-radius:10px; padding:10px !important;} .media-showroom #virtualToursWrapper .col-md-3 img{height:160px;} }