Viator Partner Blog

We are happy to announce some new functionality on our partner sites. If you have changed the standard theme on your partner site, you may want to personalize this new functionality as well.

Currently tour options are listed in a drop down menu. With our new pricing calendar, your customers will easily see the availability of tour options on each day.

Current design:

New Pricing Calendar

Current Price Guide

New Price Guide

If you don’t update your CSS, the new pricing calendar will use the default colors.  It’s easy to update your CSS with your custom colors, just follow the 4 Steps below:

STEP 1:  Back-up your existing CSS

Log into your partner admin, select Edit Site>> Site Template.

•    Click the Edit Site tab.
•    Click Site template in the sub navigation
•    Select the radio button next to “My theme (Advanced)”
•    Click the “Change CSS” link.

Select the text in the pop-up, copy the text and paste it into another application such as NotePad or a CSS editor.

STEP 2:  Reset to the Default CSS

Once you have backed-up your CSS, reset to the default CSS so you the latest version of the CSS which includes the new Pricing Calendar.  (Note: the colors you changed previously will need to be changed again).

STEP 3:  Replace the default colors with your custom colors

For more information on how to replace default colors, download the Viator CSS starter Kit.

For this example we changed the Pricing Calendar colors that are in bold below.

/* 1. Price guide
————————————————————– */
.popup_priceguide table,
.popup_priceguide th,
.popup_priceguide td,
.PricingGridHeader,
.popup_priceguide th.PricingGridXSortField1,
.popup_priceguide th.PricingGridYHeader,
.popup_priceguide th.PricingGridXSortField2 { /* border-color: ; */ }
.popup_priceguide table { /* background-color: ; */ } /* background color of table body */
.PricingGridHeader { /* background-color: ; color: ; */ } /* background color of table header */
.PricingGridYHeader,
.PricingGridYSortField1 { /* background-color: ; */ } /* background color of row header*/
/* New Pricing Calendar Pages and Popups
————————————————————– */
.cal_modheader span { border-left: 1px solid #FFFFFF; }
#pricecal_popup,
#pricecal_popup .daterow .na,
.traveler_num { background-color: #F2F1EF; }
#pricecal_popup .pricecal_header,
#pricecal_popup .pricecal_header h1,
#pricecal_popup .calendardatehead span,
#pricecal_popup .daterow .selected,
#pricecal_popup .daterow .selected em,
#pricecal_popup .daterow .selected strong,
#pricecal_popup .daterow .selected:hover,
.pricedetails .closelink,
.pricing_calendar .dateheader,
.cal_modheader,
.cal_popupmod .closecross,
.cal_modfooter .btn button,
#mainContainer .cal_modfooter a { color: #FFFFFF; }
#pricecal_popup .touroptionlist ul li.selected,
#pricecal_popup .touroptiondetail,
.touroption_text { background-color: #FFFFFF; }
#pricecal_popup .touroptiondetail h3,
#pricecal_popup .touroptiondetail ul li.first span,
#pricecal_popup .daterow em { color: #00759A; }
#pricecal_popup .pricecal_header,
#pricecal_popup .calendardatehead span,
.pricing_calendar .selected,
.pricing_calendar .dateheader,
.cal_popupmod { background-color: #00759A; }
#pricecal_popup .daterow .selected,
#pricecal_popup .daterow .selected:hover,
.pricedetails,
.cal_modfooter .btn { background-color: #F58025; }
#pricecal_popup .calendarbox,
#pricecal_popup .touroptiondetail h4,
#pricecal_popup .daterow a { border-color: #e0dbd5; }
/*#pricecal_popup .calendarbox { background: #e0dbd5 url(/images/pricingcalendar/bg_calendarbox.gif) repeat-y scroll top right; }
#pricecal_popup .touroptionlist ul li { border-color: #fff; }*/
/*#pricecal_popup .touroptionlist ul li:hover { background-color: #ebebeb; }*/
/*#pricecal_popup .touroptiondetail .descrip { color: #666; }
#pricecal_popup .touroptiondetail ul li { background: transparent url(/images/pricingcalendar/blackdot.gif) no-repeat scroll 0 5px; }
#pricecal_popup .touroptiondetail ul li.first { background-image: none; }
#pricecal_popup .daterow a:hover { border-color: #e6d5ac; background-color: #f9ebc9; }*/
/* End New Pricing Calendar Pages and Popups */
/* EOF */

Customized Pricing Calendar

STEP 4:  Customize the new Highlights box

We also suggest that you customize the background color of the new Sales Points/Highlights box

/* SALES POINTS */
.salespoint {
background-color: #f9ebc9;
border: 1px solid #e6d5ac;

Note:  The arrows are graphics and cannot be changed via the CSS.