Documentation
  1. Customizations
  2. Styling Customization

Styling Customization

EasyBlog 6.0 onwards uses css variables and it is extremely easy to override the styles without needing to create custom overrides. 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.

Below are the variables used in EasyBlog:

#eb,
.select2-container--si,
.com_easyblog { // Backend <body>
    --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);


    // FD
    // Manually copy from FD
    --fd-root-font-size: 16px;
    --fd-spacing: var(--fd-root-font-size);

    --fd-spacing-px: 1px;
    --fd-spacing-no: 0;
    --fd-spacing-3xs: calc(var(--fd-spacing) * .125 ); /* 2*/
    --fd-spacing-2xs: calc(var(--fd-spacing) * .25 ); /* 4*/
    --fd-spacing-xs: calc(var(--fd-spacing) * .5 ); /* 8*/
    --fd-spacing-sm: calc(var(--fd-spacing) * .75 ); /* 12*/
    --fd-spacing-md: calc(var(--fd-spacing) * 1 ); /* 16 (default)*/
    --fd-spacing-lg: calc(var(--fd-spacing) * 1.25 ); /* 20*/
    --fd-spacing-xl: calc(var(--fd-spacing) * 1.5 ); /* 24*/
    --fd-spacing-2xl: calc(var(--fd-spacing) * 2 ); /* 32*/
    --fd-spacing-3xl: calc(var(--fd-spacing) * 2.5 ); /* 40*/
    --fd-spacing-4xl: calc(var(--fd-spacing) * 3 ); /* 48*/
    --fd-spacing-5xl: calc(var(--fd-spacing) * 4 ); /* 64*/

    --fd-border-radius-no: 0; // 0
    --fd-border-radius-sm: calc(var(--fd-spacing) * .25 ); // 4
    --fd-border-radius-md: calc(var(--fd-spacing) * .5 ); // 8
    --fd-border-radius-lg: calc(var(--fd-spacing) * 1 ); // 16
    --fd-border-radius-full: calc(var(--fd-spacing) * 9999 ); // rounded/1by1 circle


    --fd-black: 16, 16, 16; // #101010
    --fd-white: 255, 255, 255; // #fff
    --fd-transparent: transparent;

    --fd-color-inverse: 255, 255, 255; // For filled background

    --fd-gray-50: 249, 249, 249; // #f9f9f9
    --fd-gray-100: 244, 244, 244; // #f4f4f4
    --fd-gray-200: 229, 229, 229; // #e5e5e5
    --fd-gray-300: 212, 212, 212; // #d4d4d4
    --fd-gray-400: 163, 163, 163; // #a3a3a3
    --fd-gray-500: 119, 119, 119; // #777777
    --fd-gray-600: 90, 90, 90; // #5a5a5a
    --fd-gray-700: 48, 48, 48; // #303030
    --fd-gray-800: 34, 34, 34; // #222222
    --fd-gray-900: 25, 25, 25; // #191919

    // Primary/ Brand
    --fd-primary-50: 246, 248, 254;  // "#F6F8FE"
    --fd-primary-100: 237, 241, 252;  // "#EDF1FC"
    --fd-primary-200: 211, 220, 248;  // "#D3DCF8"
    --fd-primary-300: 184, 199, 243;  // "#B8C7F3"
    --fd-primary-400: 131, 156, 235;  // "#839CEB"
    --fd-primary-500: 78, 114, 226;  // "#4E72E2"
    --fd-primary-600: 70, 103, 203;  // "#4667CB"
    --fd-primary-700: 59, 86, 170;  // "#3B56AA"
    --fd-primary-800: 47, 68, 136;  // "#2F4488"
    --fd-primary-900: 38, 56, 111;  // "#26386F"
    --fd-ui-link: ~"rgba(var(--fd-primary-500), 1)";


    // Stats success/info/danger/warning
    --fd-success-50: 236, 253, 245; // #ECFDF5
    --fd-success-100: 209, 250, 229; // #D1FAE5
    --fd-success-200: 167, 243, 208; // #A7F3D0
    --fd-success-300: 110, 231, 183; // #6EE7B7
    --fd-success-400: 52, 211, 153; // #34D399
    --fd-success-500: 0, 165, 118; // #00A576
    --fd-success-600: 4, 142, 99; // #048E63
    --fd-success-700: 4, 120, 87; // #047857
    --fd-success-800: 6, 95, 70; // #065F46
    --fd-success-900: 6, 78, 59; // #064E3B

    --fd-info-50: 248, 249, 251; // #F8F9FB
    --fd-info-100: 241, 244, 246; // #F1F4F6
    --fd-info-200: 220, 227, 234; // #DCE3EA
    --fd-info-300: 198, 210, 221; // #C6D2DD
    --fd-info-400: 156, 177, 195; // #9CB1C3
    --fd-info-500: 113, 143, 169; // #718FA9
    --fd-info-600: 102, 129, 152; // #668198
    --fd-info-700: 85, 107, 127; // #556B7F
    --fd-info-800: 68, 86, 101; // #445665
    --fd-info-900: 55, 70, 83; // #374653

    --fd-warning-50: 255, 250, 245; // #FFFAF5
    --fd-warning-100: 255, 244, 236; // #FFF4EC
    --fd-warning-200: 254, 228, 206; // #FEE4CE
    --fd-warning-300: 253, 211, 177; // #FDD3B1
    --fd-warning-400: 252, 179, 119; // #FCB377
    --fd-warning-500: 251, 146, 60; // #FB923C
    --fd-warning-600: 226, 131, 54; // #E28336
    --fd-warning-700: 188, 110, 45; // #BC6E2D
    --fd-warning-800: 151, 88, 36; // #975824
    --fd-warning-900: 123, 72, 29; // #7B481D

    --fd-danger-50: 255, 241, 242; // #FFF1F2
    --fd-danger-100: 255, 228, 230; // #FFE4E6
    --fd-danger-200: 254, 205, 211; // #FECDD3
    --fd-danger-300: 253, 164, 175; // #FDA4AF
    --fd-danger-400: 251, 113, 133; // #FB7185
    --fd-danger-500: 244, 63, 94; // #F43F5E
    --fd-danger-600: 225, 29, 72; // #E11D48
    --fd-danger-700: 190, 18, 60; // #BE123C
    --fd-danger-800: 159, 18, 57; // #9F1239
    --fd-danger-900: 136, 19, 55; // #881337

    // Element
    // EB
    --eb-composer-block-active-bg: rgba(255,255,255, .5);
    --fd-link-color: inherit;
    --eb-divider-bg: #fff;
    --eb-divider-color: #333;

}
This article is separated into multiple sections as follow: