Resort OS Base Theme Configuration

Theming Locally Against a Live VSF Environment

You do not need to run a local copy of a site to theme against it. Theming can be done against a live site (awro-qa or awro-dev) with the following solution.

a. Download the overrides zip file and extract it to your desktop

b. Follow the directions in the readme.md file inside the overrides directory

c. The zip also contains a copy of a base theme file to use for theming the resort site

d. When theming is complete, place your updated copy of the storefront-theme.css file into the Resorts current NOP Theme directory at the following location: <ResortName> > Content > css > storefront-theme.css

e. The VSF store will automatically reference this file on the NOP side to load in the proper theme CSS once the Store goes live.

Storefront-theme.css

All available theme options are not included in the base storefront-theme.css file. Many elements use defaults values that may not need to be changed for most resorts. If you need additional customization, a full list of theme options that can be applied to the Resorts storefront-theme.css file are found here: ROS Prop List [OLD]archived

storefront-theme.css example:

/*
Import Resort Fonts From Font Provider Example
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,600,600i,700');
*/

:root {
  --ads-color--primary10: #0067b1;
  --ads-color--primary20: #2672b8;
  --ads-color--secondary: #fb7d26;

  --ads-nav-sidebar--banner--background-color: var(--ads-color--white);
  --ads-nav-sidebar--banner--link-color: var(--ads-color--primary10);

  --ads-header-mobile--background-color: var(--ads-color--primary10);
  --ads-header-mobile--nav-item-color: var(--ads-color--white);

  --ads-header--nav-item-color: var(--ads-color--white);
  --ads-header--nav-item-color--hover: var(--ads-color--primary20);
  --ads-header--nav-item-color--scrolled: var(--ads-color--primary10);
  --ads-header--nav-item-color--scrolled--hover: var(--ads-color--primary20);

  --ads-product-card--title-text-color: var(--ads-color--secondary);
  --ads-product-card--text-color:var(--ads-color--black);

  --ads-checkbox--border-radius: 0;
  --ads-radio--border-radius: 0;
  --ads-btn--border-radius: 0;
  --ads-date-picker--selected-date--border-radius: 0;

  --ads-font-family: roboto-slab, Helvetica, sans-serif;
  --ads-font-weight--category-header: 'bolder';
  --ads-font-size--category-header: 'bolder';

  --ads-font-weight--product-header: 400;
  --ads-font-size--product-header: 1.375rem;

  --ads-font-weight--product-body: 'normal';
  --ads-font-size--product-body: 1rem;

  --ads-header-logo--width: 180px;
  --ads-header-logo--height: auto;

  /*
  Additonal Common Options
  --ads--button--background-color:
  --ads--button--text-color:
  --ads--button--radius:
  --ads--ghost-button--border-color:
  --ads--ghost-button--text-color:
  
  Full list of available props for configuration: https://aspenware.atlassian.net/wiki/spaces/AT/pages/2536374399/Resort+OS+CSS+Custom+Prop+List
  */
}