Table of Contents
You can customize the look of Rapidship through the custom-styles.css file.
- Cloud customers must put in a support ticket to request access
- On-premise customers can find it by navigating to customizations/css/custom-styles.css from the Rapidship folder
...
CSS Variables
Info |
---|
Available in X Dispatch 18.0 or newer. |
CSS variables are available to change colors throughout Rapidship. An example like the one below is available in the customizations/css folder.
Paste code macro | ||||
---|---|---|---|---|
| ||||
/*
Copy the contents of this file into the adjacent custom-styles.css
and change the colors to match your brand.
*/
:root {
/* The brand primary color is used to accent important information, buttons, links, etc. */
--color-brand-primary: #14b464;
--color-brand-primary-lighter: #a0f4ca;
--color-brand-primary-darker: #0f864b;
--color-brand-primary-gradient: linear-gradient(to bottom right, #14b464, #0f864b);
/* The brand accent color is used sparingly, but can compliment the brand primary color. */
--color-brand-accent: #37474f;
--color-brand-accent-lighter: #9aaeb8;
--color-brand-accent-darker: #222c31;
--color-brand-accent-gradient: linear-gradient(to bottom right, #37474f, #222c31);
/* The brand success color is used for confirmation and success alerts and text. */
--color-brand-success: #14b464;
--color-brand-success-lighter: #a0f4ca;
--color-brand-success-darker: #0f864b;
--color-brand-success-gradient: linear-gradient(to bottom right, #14b464, #0f864b);
/* The brand info color is used for informational alerts and text. */
--color-brand-info: #5bc0de;
--color-brand-info-lighter: white;
--color-brand-info-darker: #31b0d5;
--color-brand-info-gradient: linear-gradient(to bottom right, #5bc0de, #31b0d5);
/* The brand warning color is used to warn the user about something on the page that may required attention. */
--color-brand-warning: #f0ad4e;
--color-brand-warning-lighter: white;
--color-brand-warning-darker: #ec971f;
--color-brand-warning-gradient: linear-gradient(to bottom right, #f0ad4e, #ec971f);
/* The brand danger color is used to alert the user about something wrong on the page that requires attention. */
--color-brand-danger: #d9534f;
--color-brand-danger-lighter: #fdf7f7;
--color-brand-danger-darker: #c9302c;
--color-brand-danger-gradient: linear-gradient(to bottom right, #d9534f, #c9302c);
/* The light grey color is used for light borders and the backgrounds of some elements. */
--color-light-grey: #eceff1;
--color-light-grey-lighter: white;
--color-light-grey-darker: #cfd6db;
/* The medium grey color is used for dark borders and some text and icons. */
--color-medium-grey: #78909c;
--color-medium-grey-lighter: #eef1f2;
--color-medium-grey-darker: #5f7682;
/* The dark grey color is used for most basic text. */
--color-dark-grey: #263238;
--color-dark-grey-lighter: #819ca9;
--color-dark-grey-darker: #11171a;
} |
List of Overridable Classes
Info |
---|
Available in X Dispatch 17.1 or newer. |
Brand Primary Color | .brand-primary-button |
Brand Secondary Color | .brand-secondary-button |
...