| Info |
|---|
In X Dispatch 21.0 or newer, you can customize Rapidship styles in X Dispatch. See Rapidship Customization. If you have a custom-styles.css, any changes made in the Rapidship Customization section of X Dispatch will not be applied. Framework changes were made to Rapidship version 21.0 that may cause undesired results from style customization created with older versions. |
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 assistance.
- On-premise customers can find it by navigating to C:\Program Files (x86)\Connexion\XInternet\Rapidship\customizations\css\custom-styles.css.
Transparent Logo
| Info |
|---|
Available in X Dispatch 18.0.3 or newer. |
The ideal width of the logo is 300px and the height should be equal to or less than 300px.
On-premise or Cloud customers with access
Upload an image file named logo.png to customizations\css.
Cloud customers without access
Contact Technical Support.
CSS Variables
| Info |
|---|
For 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 |