diff --git a/docs/journeys/custom-css.md b/docs/journeys/custom-css.md new file mode 100644 index 00000000..4fe8e280 --- /dev/null +++ b/docs/journeys/custom-css.md @@ -0,0 +1,287 @@ +--- +sidebar_position: 9 +--- + +# Custom CSS (BETA) + +This guide will help you understand and use Custom CSS to further personalize your journeys and branding beyond the default Design Builder settings. + +![Custom CSS](../../static/img/design-builder-custom-css.png) + +## Introduction + +Custom CSS gives you the power to: + +- **Enhance your brand’s look:** Customize buttons, links, cards, and more with your own CSS rules. +- **Apply detailed styling:** Make adjustments at a global theme level, journey level, step level, or even block level. +- **Stand out:** Create unique, visually appealing designs that resonate with your end customers. + +**Note:** This feature is part of our new Concorde design migration. Custom CSS applies only to journeys, and not the End Customer Portal. We’re continuously improving support for this feature, so please refer to the latest documentation for updates – release notes will include updates. + +**Pricing:** This feature is only available from the Professional pricing tier. + +## Styling Structure + +### HTML Structure + +The new journey design (Concorde Journey) consists of the following building blocks: + +- **Layout:** Controls how the journey looks. E.g., Stack, Two Columns, Grid (beta). +- **Steps:** E.g., New Step, New Step 1, etc. +- **Blocks:** E.g., Text Input, Number Input, Products, etc. +- **Components:** E.g., Autocomplete, Input, Switch, Radio, Checkbox, etc. + +Specific HTML Classes and IDs have been added and prefixed with `Concorde` for consistency to aid with targeting HTML elements properly through custom CSS. + +The HTML structure of the journey based on these building blocks will be maintained using this guide: _Custom CSS: Maintained HTML Classes & HTML ID format_. + +### Concorde Design Tokens + +Since custom CSS is scoped to the new design, we have created a list of design tokens (CSS variables) that can be modified to create the desired effect. + +The design tokens that are supported for the journey building blocks (mentioned above) can be found in this guide: _Concorde Design tokens: CSS variables_. This guide will be kept up to date to account for changes that could improve the usage of custom CSS. + +## How Custom CSS Works + +### CSS Structure Overview + +When you add custom CSS, the system generates a single stylesheet that’s applied to your journey. This stylesheet is built from the CSS rules you write in the custom CSS editor in the Design Builder. + +**Example of the CSS structure:** + +```css +/* Custom CSS example */ +:root { + --concorde-primary-color: #005eb4; + --concorde-secondary-color: #913997; + /* ... other concorde design tokens ... */ +} + +/* Step CSS */ +#Concorde-Step---123456789 { + background-color: #f8f8f8; + + /* Block CSS */ + .Concorde-Image-Block { + border-radius: 10px; + } + + #Concorde-Block---123456789 { + font-family: 'Helvetica, Arial, sans-serif'; + } +} +``` + +As seen above, there are some things to note: + +- The use of **Concorde design tokens** is mentioned above. To view the full list: _Concorde Design tokens: CSS variables_. +- The use of maintained **HTML classes and IDs** is also mentioned above. To view the full list: _Custom CSS: Maintained HTML Classes & HTML ID format_. +- The final CSS is inserted into your journey’s `` as a `