Documentation
  1. Templating
  2. Styling Customization

Styling Customization

 Last modified on 4th May 2021 ·EasyDiscuss v5.0
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://stackideas.com/support.

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.

Font Size

body #ed,
body .select2-container--si,
body .atwho-container {
    --si-root-font-size: 20px;
}

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); 
}
← Previous
This article is separated into multiple sections as follow: