Documentation

IMPORTANT

This is the outdated SI-documentation which will be adapted soon. A huge part may be obsolete!

Styling Customization

Note: This documentation is intended for Advanced User and please do understand that this styling customization is beyond our scope of support outlined in https://creative-graphics.ch/support.

Further understanding on styling, please read through

Overriding EasyDiscuss Styling

The following are the example of custom styling that you can do to override the default EasyDiscuss styling. You can define and add the following css code into your custom css section of your template.

Link Color

body #ed .si-link {
    color: var(--si-primary);
}

Brand Color

.si-theme--light,
.si-theme--dark,
#ed.si-theme--light,
#ed.si-theme--dark {
    --si-primary: red;
}

EasyDiscuss Default Styling

The following are the default defined styling for EasyDiscuss. It is using cascading variables to assist on defining repeated value in a complex component such as EasyDiscuss. You may use the following styling as a guide in defining your custom styling. Further understanding on cascading variables, please read through at https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties.

#ed,
.select2-container--si,
.atwho-container {
  --si-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --si-root-font-size: 16px;
  --si-font-size--01: calc(var(--si-root-font-size) * .75);
  --si-font-size--02: calc(var(--si-root-font-size) * .875);
  --si-font-size--03: calc(var(--si-root-font-size) * 1);
  --si-font-size--04: calc(var(--si-root-font-size) * 1.125);
  --si-font-size--05: calc(var(--si-root-font-size) * 1.25);
  --si-font-size--06: calc(var(--si-root-font-size) * 1.5);
  --si-font-size--07: calc(var(--si-root-font-size) * 1.75);
  --si-font-size--08: calc(var(--si-root-font-size) * 2);
  --si-font-size--09: calc(var(--si-root-font-size) * 2.25);
  --si-font-size--10: calc(var(--si-root-font-size) * 2.625);
  --si-line-height--sm: calc(var(--si-root-font-size) * 1.25);
  --si-line-height: calc(var(--si-root-font-size) * 1.5);
  --si-ui-radius: calc(var(--si-root-font-size) * .25);
  --si-ui-radius--sm: calc(var(--si-root-font-size) * .125);
  --si-ui-radius--lg: calc(var(--si-root-font-size) * .5);
  --si-spacing--no: 0;
  --si-spacing: var(--si-root-font-size); }

.si-theme--light {
  --si-body: white;
  --si-basic--100: #ffffff;
  --si-basic--200: #f9f9fa;
  --si-basic--300: #f0f0f1;
  --si-basic--400: #d9d9de;
  --si-basic--500: #888888;
  --si-basic--600: #494949;
  --si-basic--700: #323232;
  --si-basic--800: #292929;
  --si-basic--900: #1d1d1d;
  --si-toolbar-bg: #ffffff;
  --si-toolbar-text: #292929;
  --si-ui-link: var(--si-primary);
  --si-primary: #4e72e2;
  --si-primary-100: #ecf0fc;
  --si-primary-200: #b8c6f3;
  --si-primary-300: #4e72e2;
  --si-primary-400: #4666ca;
  --si-info: #85c1e9;
  --si-info-100: #ebf5fb;
  --si-info-200: #aed6f1;
  --si-info-300: #85c1e9;
  --si-info-400: #5dade2;
  --si-success: #00bc65;
  --si-success-100: #e6f8ef;
  --si-success-200: #99e4c1;
  --si-success-300: #00bc65;
  --si-success-400: #00a85a;
  --si-danger: #ec6f7f;
  --si-danger-100: #fff1f2;
  --si-danger-200: #ff8a99;
  --si-danger-300: #ec6f7f;
  --si-danger-400: #d36372;
  --si-warning: #f5b041;
  --si-warning-100: #fef5e7;
  --si-warning-200: #fad7a0;
  --si-warning-300: #f5b041;
  --si-warning-400: #f39c12;
  --si-light: #f8f9fa;
  --si-dark: #343a40;
  --si-fb: #0076FB;
  --si-twitter: #1DA1F2;
  --si-linkedin: #0073b1;
  --si-default: #f0f0f1;
  --si-priority-urgent: #ec6f7f;
  --si-priority-normal: #f5b041;
  --si-priority-low: #85c1e9;
  --si-overlay: rgba(0, 0, 0, 0.125);
  --si-primary--text: #fff;
  --si-primary--bg: var(--si-primary-300);
  --si-primary--border: var(--si-primary-300);
  --si-primary--hover-text: #fff;
  --si-primary--hover-bg: var(--si-primary-400);
  --si-primary--hover-border: var(--si-primary-400);
  --si-primary--active-text: #fff;
  --si-primary--active-bg: var(--si-primary-400);
  --si-primary--active-border: var(--si-primary-400);
  --si-primary--disabled-text: #fff;
  --si-primary--disabled-bg: var(--si-primary-200);
  --si-primary--disabled-border: var(--si-primary-200);
  --si-success--text: #fff;
  --si-success--bg: var(--si-success-300);
  --si-success--border: var(--si-success-300);
  --si-success--hover-text: #fff;
  --si-success--hover-bg: var(--si-success-400);
  --si-success--hover-border: var(--si-success-400);
  --si-success--active-text: #fff;
  --si-success--active-bg: var(--si-success-400);
  --si-success--active-border: var(--si-success-400);
  --si-success--disabled-text: #fff;
  --si-success--disabled-bg: var(--si-success-200);
  --si-success--disabled-border: var(--si-success-200);
  --si-info--text: #fff;
  --si-info--bg: var(--si-info-300);
  --si-info--border: var(--si-info-300);
  --si-info--hover-text: #fff;
  --si-info--hover-bg: var(--si-info-400);
  --si-info--hover-border: var(--si-info-400);
  --si-info--active-text: #fff;
  --si-info--active-bg: var(--si-info-400);
  --si-info--active-border: var(--si-info-400);
  --si-info--disabled-text: #fff;
  --si-info--disabled-bg: var(--si-info-200);
  --si-info--disabled-border: var(--si-info-200);
  --si-warning--text: #fff;
  --si-warning--bg: var(--si-warning-300);
  --si-warning--border: var(--si-warning-300);
  --si-warning--hover-text: #fff;
  --si-warning--hover-bg: var(--si-warning-400);
  --si-warning--hover-border: var(--si-warning-400);
  --si-warning--active-text: #fff;
  --si-warning--active-bg: var(--si-warning-400);
  --si-warning--active-border: var(--si-warning-400);
  --si-warning--disabled-text: #fff;
  --si-warning--disabled-bg: var(--si-warning-200);
  --si-warning--disabled-border: var(--si-warning-200);
  --si-danger--text: #fff;
  --si-danger--bg: var(--si-danger-300);
  --si-danger--border: var(--si-danger-300);
  --si-danger--hover-text: #fff;
  --si-danger--hover-bg: var(--si-danger-400);
  --si-danger--hover-border: var(--si-danger-400);
  --si-danger--active-text: #fff;
  --si-danger--active-bg: var(--si-danger-400);
  --si-danger--active-border: var(--si-danger-400);
  --si-danger--disabled-text: #fff;
  --si-danger--disabled-bg: var(--si-danger-200);
  --si-danger--disabled-border: var(--si-danger-200);
  --si-fb--text: #fff;
  --si-fb--bg: #0076FB;
  --si-fb--border: #0076FB;
  --si-fb--hover-text: #fff;
  --si-fb--hover-bg: #166fe5;
  --si-fb--hover-border: #0076FB;
  --si-twitter--text: #fff;
  --si-twitter--bg: #1DA1F2;
  --si-twitter--border: #1DA1F2;
  --si-twitter--hover-text: #fff;
  --si-twitter--hover-bg: #1DA1F2;
  --si-twitter--hover-border: #1DA1F2;
  --si-linkedin--text: #fff;
  --si-linkedin--bg: #0073b1;
  --si-linkedin--border: #0073b1;
  --si-linkedin--hover-text: #fff;
  --si-linkedin--hover-bg: #0073b1;
  --si-linkedin--hover-border: #0073b1;
  --si-default--outline-text: var(--si-basic--700);
  --si-default--outline-bg: var(--si-basic--100);
  --si-default--outline-border: var(--si-basic--400);
  --si-default--hover-outline-text: var(--si-basic--700);
  --si-default--hover-outline-bg: var(--si-basic--100);
  --si-default--hover-outline-border: var(--si-basic--500);
  --si-default--active-outline-text: var(--si-basic--100);
  --si-default--active-outline-bg: var(--si-basic--400);
  --si-default--active-outline-border: var(--si-basic--400);
  --si-default--disabled-outline-text: var(--si-basic--400);
  --si-default--disabled-outline-bg: var(--si-basic--200);
  --si-default--disabled-outline-border: var(--si-basic--400);
  --si-primary--outline-text: #4e72e2;
  --si-primary--outline-bg: #ecf0fc;
  --si-primary--outline-border: #4e72e2;
  --si-primary--hover-outline-text: #4e72e2;
  --si-primary--hover-outline-bg: #ecf0fc;
  --si-primary--hover-outline-border: #4666ca;
  --si-success--outline-text: #00bc65;
  --si-success--outline-bg: #e6f8ef;
  --si-success--outline-border: #00bc65;
  --si-success--hover-outline-text: #00bc65;
  --si-success--hover-outline-bg: #e6f8ef;
  --si-success--hover-outline-border: #00a85a;
  --si-info--outline-text: #85c1e9;
  --si-info--outline-bg: #ebf5fb;
  --si-info--outline-border: #85c1e9;
  --si-info--hover-outline-text: #85c1e9;
  --si-info--hover-outline-bg: #ebf5fb;
  --si-info--hover-outline-border: #5dade2;
  --si-warning--outline-text: #f5b041;
  --si-warning--outline-bg: #fef5e7;
  --si-warning--outline-border: #f5b041;
  --si-warning--hover-outline-text: #f5b041;
  --si-warning--hover-outline-bg: #fef5e7;
  --si-warning--hover-outline-border: #f39c12;
  --si-danger--outline-text: #ec6f7f;
  --si-danger--outline-bg: #fff1f2;
  --si-danger--outline-border: #ec6f7f;
  --si-danger--hover-outline-text: #ec6f7f;
  --si-danger--hover-outline-bg: #fff1f2;
  --si-danger--hover-outline-border: #d36372;
  --si-answer--text: var(--si-basic--700);
  --si-answer--bg: #e6f8ef;
  --si-answer--border: #00bc65;
  --toolbar-dropdown-shadow: 0 3px 12px rgba(0,0,0,0.125);
  --dropdown-shadow: 0 3px 12px rgba(0,0,0,0.125); 
}