Skip to content

Add support for background images in custom css docs #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DeolaJ merged 1 commit into from
May 12, 2025
Merged

Add support for background images in custom css docs #71

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions docs/journeys/custom-css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@ To avoid modifying the core layout and overall security of the journey, support

- **Certain position rules:** `position: relative;` and `position: absolute;`
- **Hiding elements completely:** `display: none;`
- **Background images:** `background: url(*);` and `background-image: url(*)`

## How to Configure Custom CSS

Expand Down Expand Up @@ -501,7 +500,7 @@ The snippet below will use a standard and custom font (uploaded) on the Journey.

- Use Supported Classes: We provide a public list of supported class names for components, blocks, steps and layouts (e.g., `Concorde-Button`, `Concorde-Link`, `Concorde-Topbar`). Please use these classes to ensure long-term compatibility - [Concorde HTML Layout Overview](/docs/ui-design/concorde-html-structure). However, feel free to write any rules you need.
- Design Tokens (CSS Variables): Leverage our design tokens (CSS variables) to keep your custom styles consistent with your global theme. (e.g., `var(--concorde-primary-color)`). The comprehensive list of design tokens can be found in the [Concorde Design tokens](/docs/ui-design/concorde-design-tokens) and contain all tokens with adequate descriptions.
- Avoid Overriding Core Layouts: For stability, avoid using properties that could break the layout (e.g., `display`, `position`, or `z-index`) or `!important`.
- Avoid Overriding Core Layouts: For stability, avoid using properties that could break the layout (e.g., `display`, `position`) or `!important`.
- Keep It Concise: This helps maintain performance and manageability.
- Test Your CSS: Always preview your changes to avoid conflicts. Errors will be highlighted so you can correct them before saving.

Expand Down
Loading