Versions Compared

Key

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


...

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 accessassistance.  
  • On-premise customers can find it by navigating to customizations/css/C:\Program Files (x86)\Connexion\XInternet\Rapidship\customizations\css\custom-styles.css from the Rapidship folder

...

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
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

...