Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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
languagecss
titlecustom-colors-example.css
/*
	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-primary-link
.brand-primary-background-color
.brand-primary-text-color
.brand-primary-border-color
.brand-primary-text-on-hover
.brand-primary-background-on-hover
.brand-primary-gradient
.brand-primary-loading-spinner
Brand Secondary Color
.brand-secondary-button
.brand-secondary-link
.brand-secondary-background-color
.brand-secondary-text-color
.brand-secondary-border-color
.brand-secondary-text-on-hover
.brand-secondary-gradient
.brand-secondary-loading-spinner

...