Page Comparison

...

4. Identify the --ads prefixed TD properties. All TD customizable properties start with the characters --ads and the naming of the property determines where the control for it will be located in the TD App as well as the control type that will be displayed. You may also see --adx prefixed properties applied to some elements. These are not customizable in the TD App and are used by engineering to manage the base Aspenware Design System.
   
   Lets take a look at one of the properties for the Card Title Color from the screenshot above to see what it tells us.
   
   color: var(--ads-page-plp-cards-header-color)
   
   color: - This is the CSS property that the value of the custom variable will be applied to. In this example this is the text color property being configured.
   var() - This wraps any custom CSS property and tells the parser that this is a variable custom property inside the parenthesis.
   --ads - this segment tells the TD app to consume and render this property as a control in the TD App
   -page-plp-cards-header - this segment tells the TD app to render the color control within the page > plp > cards > header section in the TD app.
   -color - this tells the TD app to use a color control type in the TD UI for this setting because it is acting on the CSS text color property.
   
   Other control types include fontfamily, fontsize, backgroundimage, width, and height, just to list a few. You will find a full list of the supported control types here: https://aspenware.atlassian.net/wiki/spaces/AT/pages/2573828170/Creating+CSS+Properties+for+Theme+Designer+V2#C.-Property-Names-Determine-the-Control-Type
   
   With this information you can now identify themeable properties applied to an element, as well as where to find the control for the property in the TD App. This formula apples to all --ads properties used in a TD theme.

Lesson 2. Ensuring a site is properly

...

configured to use TD

Before starting to use the TD App on a site you will want to ensure that it is properly configured and ready to go. This will prevent discovering that there is an issue when you click Save and it will prevent accidentally overwriting other themes if the incorrect slug was applied in NOP settings.

...