AutoPlay Vehicle Display Page - CSS Colour Guide

Overview

Below is a guide as to the editable colour options of the Vehicle Display Page (VDP).

1. Caution: Some of these elements below control element colours in multiple areas across the different pages, please apply carefully.
   
2. The headers below are taken directly from the CSS file options
   
3. Elements affected are highlighted in Pink through the series of screenshots.
   

Code Quick View

Overview of all Elements effected by this section of CSS Code in pink.
*Some text is not visible due to being pink text over pink background.

Search Page

Details page

Favourite page

Search Box Page

Search Page

Details page

Favourite page

Search Box Page

 CSS Title Details

Expand the below section for default colour, notes, location of colour changes and expanded descriptions as well as visual examples.

generalTextColor | Reset Filter Text | Clear Selection Button

Default Colour: #212529

Notes: 

---

Search Page

- Reset Filter text (icon)

- Clear Selection text

---

Favourite Page

- Vehicle Title Text

- Share Icon

ctaTextColor | Tick Box fill | Hide Filter logo | Advanced Seach text

Default Colour: #414042

Notes:

---

Search Page

- Hide Filter Icon

- Make & Model Show All 'Tick'

---

Search Box Page

- "try Advanced Search" Text

- Make and Model 'Show All' tick box

generalFillColor | Anchor Point Icons

Default Colour: #B11616
Notes: 

---

Details Page

- Feature ICON colour.

backgroundHoverColor | No Effect

Default Colour: #ccc
Notes: No Effect

---

borderColor | Loading Icon

Default Colour: #414042
Notes: 

---

Search Page

- Changes the element colour of one of the loading graphic spirals.

backgroundColor | Favourite Fills | Page Navigation Fill | Favourite Page Fills | Heart Fill | Remove Car Text | View Car Fill

Default Colour: #414042
Notes: 

---

Search Page

- Favourite Button Fill

- Apply Button Fill

- Heart Icon

- Pagination Button Fill

---

Details Page

- Heart Icon

Favourites Page

- 'Remove Car' text

- View Car Fill

---

Search Box Page

- Make & Model 'Apply' Fill

borderColorLight | Clear Selection Border

Default Colour: #b4b4b4
Notes: 

---

Search Page

- 'Clear Selection' Border

 

backgroundColorLight | Favourite Menu Fill | Remove Car Fill

Default Colour: #F4F4F4
Notes: 

---

Favourites Page

- Left Title Fill

- 'Remove Car' Fill

generalTextColorLight | No Effect

Default Colour: #A0A0A0
Notes: No effect

---

generalTextColorVeryLight | No Effect

Default Colour: #ccc
Notes: No Effect

---

borderColorDark | Search Box Border

Default Colour: #5C5C5C
Notes: 

---

Search Box Page

- Border

backgroundDark | No Effect

Default Colour: #5C5C5C
Notes: No Effect

---

generalTextColorDark | No Effect

Default Colour: #5C5C5C
Notes: No Effect

---

bodyColor | No Effect

Default Colour: #fff
Notes: No effect

---

saleBanner | Sale Banner Fill

Default Colour: #f60100
Notes: 

---

Search Page

- Sale Banner Fill

searchFilterLabels | Filter Title Text | Filter Chevrons | Sort By Text

Default Colour: #414042
Notes: 

---

Search Page

- Filter Title Text

- Filter Chevrons

- 'Sort By' (top right corner)

---

Search Box Page

- Filter Title text

searchFilterText | Filter Option Text | Latest Listing Text

Default Colour: #000
Notes: 

---

Search Page

- Filter box text

- Sort option / Latest Listings

searchButtonFillText | Search Button Text | Filter Selected Text

Default Colour: #ffffff
Notes: 

---

Search Page

- Search Box, action button text

- Seach box 'Selected' option text

---

Search Box Page

- Search action button text

searchButtonFill | Seach Button Fill | Filter Selected Text Fill

Default Colour: #414042
Notes: 

---

Search Page

- Search Box, action button fill

- Seach box 'Selected' option fill

---

Search Box Page

- Search action button text

searchButtonText | Search Button Text | Search Button Icon

Default Colour: #414042
Notes: 

---

Search Page

- Search bar text

- Seach bar Icon

searchButtonBorder | Search Bar Border | Filter Button (not selected) Border | Search Box Button Border

Default Colour: #414042
Notes: 

---

Search Page

- Search Bar Border

- Filter option border

---

Search Box Page 

- Search filter option borders

searchGridBorder | Seach / Filter Dividers

Default Colour: #ccc
Notes: 

---

Search Page

- Filter box Grid Border

searchResultCountColor | Car Result Counter Text

Default Colour: #5C5C5C
Notes: 

---

Search Page

- Filter result counter text

vehicleCardBorder | Vehicle Card Border | Favourite Border | Insert Card Dividers

Default Colour: #414042
Notes: 

---

Search Page

- Vehicle card border

- Favourite border

---

Details Page

- Favourite Border

- Fuel Economy Rating Card section dividers

vehicleKeywordBorder | Key Info Bubble Border

Default Colour: #414042
Notes: 

---

Search Page

- Vehicle key info bubble border

vehicleKeywordText | Key Info Bubble Text

Default Colour: #414042
Notes: 

---

Search Page

- Vehicle key info text

vehicleTitleText | Vehicle Title Text

Default Colour: #414042

Notes:

Not working on Search Page Titles

---

Search Page

- Pending

---

Details Page

- Vehicle Title text 

---

vehicleVariantText | Vehicle Variant Text

Default Colour: #414042

Notes: 

Colouring wrong text, title instead of variant

---

Search Page

- Vehicle variant text

vehiclePrice | Vehicle Sale Price Text

Default Colour: #212529
Notes: 

---

Search Page

- Vehicle card sales price text

---

Details Page

- Vehicle sales price text 

vehiclePriceSpecial | Vehicle Retail Strike Through Price Text

Default Colour: #D2042D
Notes: 

---

Search Page

- Vehicle card retail price slashed price.

---

Details Page

- Vehicle card retail price slashed price. 

---

vehiclePriceORC | No Effect

Default Colour: #414042
Notes: No Effect

---

vehicleIconColor | Vehicle Feature Icons

Default Colour: #000
Notes: 

---

Details Page

- Vehicle Icons

---

insertBackgroundColor | Vehicle Card Price Box Fill | Feature Icon Fill | Insert Card Fill

Default Colour: 
Notes: 

---

Search Page

- Vehicle card price box fill

---

Details Page

- Vehicle icon box shadow

- Insert Shadow fill / Fuel economy rating card fill

---

imageSliderControlsBackground | Slider Control Fill | Gallery Selected Image Border

Default Colour: #414042
Notes: 

---

Search Page

- Vehicle card slider button fill 

---

Details Page

- Gallery slider button fill

- Thumbnail border

enquiryButtonBackgroundColor | Enquire Now Fill

Default Colour: #414042
Notes: 

---

Search Page

- 'Enquire Now' Button fill

---

Details Page

- 'Enquire Now' Button fill

enquiryButtonText | Enquire Now Text

Default Colour: #fff
Notes: 

---

Search Page

- 'Enquire Now' Button text

---

Details Page

- 'Enquire Now' Button text

detailsButtonBorder | View Details Border | Trade In Border | Book A Text Drive Border

Default Colour: #414042
Notes: 

---

Search Page

- View Details button border 

---

Details Page

- Call to Action button border 

detailsButtonText | View Details Text | Trade In Text | Book A Text Drive Text

Default Colour: #414042
Notes: 

---

Search Page

- 'View Details' button text

---

Details Page

- Call to Action button text 

linkText | Back to Results Icon + Text + Border | Breadcrumbs Text | Anchor Point Text

Default Colour: #414042
Notes: 

---

Details Page

- Back to results button text, icon and border 

- bread crumb text

- Anchor point text

---

Favourites Page

- Back to results button text, icon and border 

vehicleDetailsHeader | Vehicle Detail Headings Text

Default Colour: #414042
Notes: 

---

Details Page

- Section Headers text | Anchor Header Text

vehicleDetailsIconHeaderText | Vehicle Details Icon Headers Text

Default Colour: #414042
Notes: 

---

Details Page

- Specifications header text 

vehicleDetailsText | Vehicle Details Text

Default Colour: #414042
Notes: 

---

Details Page

-  Specification data text

vehicleDetailsSecondaryHeader | Insert Card Heading Text

Default Colour: #414042
Notes: 

---

Details Page

- Insert card header text

vehicleDetailsTableHeader | Insert Card Table Header Text

Default Colour: #414042
Notes: 

---

Details Page

- Insert Card data table header text

vehicleDetailsTableText | Insert Card Text

Default Colour: #212529
Notes: 

---

Details Page

- Insert card text

vehicleStarRatingsColor | Insert Card Star Fill

Default Colour: #D2042D
Notes: 

---

Details Page

- Insert Card Star Fill

Below Coding has no current effect

    --altColorOne: #fff;

    --altColorTwo: #fff;

    --altColorThree: #fff;

    --altColorFour: #fff;

    --altColorFive: #fff;

• Related Articles

• AutoPlay VDP ( Vehicle Display Page) CSS Style Guide

  Overview Below is a stepped guide as to the colour editable options of the VDP Page. Some of these elements below control the colours in multiple areas across the different pages, so please apply these carefully. The headers below are taken directly ...

• AutoPlay VDP (Vehicle Display Page) Provisioning

  Overview The AutoPlay VDP Pages are the next evolution from the APSR pages that are on many AutoPlay data clients websites. The VDP pages have been refreshed and modernised to offer a much more configurable experience to complement dealership ...

• VDP Client Style Guide

  Vehicle Display Page (VDP) Client Style Guide What Is the AutoPlay Vehicle Display Page (VDP) The AutoPlay Vehicle Display Page (VDP) is a templated, plug-and-play listing solution. We provide ready-to-use scripts that display your vehicle inventory ...

• How To Customise Listing Display Rules By OEM/Distributor

  For selected Dealer Networks it is possible for AutoPlayAuto.com Listing screens to be customised to suit that dealer network requirements. This functionality can be applied either to a single AutoPlay account, or to an entire dealership network. ...

• Trade Me Export Vehicle Selection

  Overview AutoPlay has a unique export option for the Trade Me listing site that will allow a dealership to manually select which listings are being exported at any time. This can be managed directly from its own dashboard screen or from within the ...