In our template, we use CSS variables to quickly and easily change the look and feel of the website. You can find all configurations in the config.css file, which is located in the CSS folder.

Here you can see a list of all available options that you can find in the config.css file:

  • Color Scheme
    • --bringer-s-body-bg

      Used as body background and overlays

    • --bringer-s-nav

      Used as a background color for header, footer, and mobile navigation

    • --bringer-s-container-bg

      Used as a background color for block containers, sub-menus, and form inputs

    • --bringer-s-container-frosted

      The same as the previous one but with transparency for frosted glass blocks

    • --bringer-s-heading

      Used as a color for headings, page titles, button labels, and other bright text accents

    • --bringer-s-heading-fade

      It is the same as the previous one but with transparency. Used for labels, meta, and some hover effects

    • --bringer-s-text

      Used as a color for general content

    • --bringer-s-accent

      A background color for accents, like buttons, highlighted blocks, etc.

    • --bringer-button-hover-bg

      A hovered button background color

    • --bringer-s-text-accent

      Used as a color for text accents

    • --bringer-s-accented-text

      Used as a text color for accented blocks

    • --bringer-s-border

      Used as a primary border-color

    • --bringer-s-border-accent

      Used as a border color for accented blocks

    • --bringer-s-border-mute

      A default semi-transparent border color for blocks with a shining effect

    • --bringer-s-border-highlight

      A semi-transparent border shining effect color

    • --bringer-s-backlight

      Used as a color for a backlight effect

    • --bringer-s-box-shadow

      Used as a color for block shadow

    • --bringer-s-cursor-light

      The cursor-followed backlight color. It uses the primary backlight color

    • --bringer-c-border-gradient

      A horizontal side-fade gradient border color

    • --bringer-c-menu

      Main menu text color

    • --bringer-c-menu-hover

      Main menu hovered item text color

    • --bringer-c-menu-active

      Main menu current item text color

  • Typography
    • Font Groups
      • --bringer-t-heading-ff

        Headings Font Family

      • --bringer-t-heading-fw

        Headings Font Weight

      • --bringer-t-content-ff

        Content Font Family

      • --bringer-t-content-fw

        Content Font Weight

      • --bringer-t-content-ls

        Content Font Letter Spacing

    • Main Menu
      • --bringer-t-menu-ff

        Main Menu Font Family

      • --bringer-t-menu-fw

        Main Menu Font Weight

      • --bringer-t-menu-fs

        Main Menu Font Size

      • --bringer-t-menu-lh

        Main Menu Line Height

      • --bringer-t-submenu-ff

        Sub-Menu Font Family

      • --bringer-t-submenu-fw

        Main Menu Font Weight

      • --bringer-t-submenu-fs

        Main Menu Font Size

      • --bringer-t-submenu-lh

        Main Menu Line Heiight

    • Footer
      • --bringer-t-footer-fs

        Footer Font Size

      • --bringer-t-footer-lh

        Footer Text Line Height

      • --bringer-socials-size

        Social Icons Size

    • Headings
      • --bringer-t-h1-fs

        H1 Heading font size

      • --bringer-t-h1-ls

        H1 Heading letter spacing

      • --bringer-t-h1-lh

        H1 Line Height

      • --bringer-t-h1-margin

        H1 Margin

      • --bringer-t-h2-fs

        H2 Heading font size

      • --bringer-t-h2-ls

        H2 Heading letter spacing

      • --bringer-t-h2-lh

        H2 Line Height

      • --bringer-t-h2-margin

        H2 Margin

      • --bringer-t-h3-fs

        H3 Heading font size

      • --bringer-t-h3-ls

        H3 Heading letter spacing

      • --bringer-t-h3-lh

        H3 Line Height

      • --bringer-t-h3-margin

        H3 Margin

      • --bringer-t-h4-fs

        H4 Heading font size

      • --bringer-t-h4-ls

        H4 Heading letter spacing

      • --bringer-t-h4-lh

        H4 Line Height

      • --bringer-t-h4-margin

        H4 Margin

      • --bringer-t-h5-fs

        H5 Heading font size

      • --bringer-t-h5-ls

        H5 Heading letter spacing

      • --bringer-t-h5-lh

        H5 Line Height

      • --bringer-t-h5-margin

        H5 Margin

      • --bringer-t-h6-fs

        H6 Heading font size

      • --bringer-t-h6-ls

        H6 Heading letter spacing

      • --bringer-t-h6-lh

        H6 Line Height

      • --bringer-t-h6-margin

        H6 Margin

    • Content
      • --bringer-t-large-fs

        Content Large text Font Size

      • --bringer-t-content-fs

        Content text Font Size

      • --bringer-t-content-lh

        Content text Line Height

      • --bringer-t-meta-fs

        Meta Font Size

      • --bringer-t-meta-ls

        Meta Letter Spacing

      • --bringer-t-meta-fw

        Meta Font Weight

    • Forms and Fields
      • --bringer-t-button-fs

        Button Font Size

      • --bringer-t-input-fs

        Input Font Size

      • --bringer-t-input-lh

        Input Line Height

  • Dimensions and Spacings
    • --bringer-header-spacing

      Header vertical spacing

    • --bringer-menu-gap

      Main Menu items spacing

    • --bringer-sub-menu-width

      Sub-menu container width

    • --bringer-socials-gap

      Social Items list items spacing

    • --bringer-section-gap

      Section Spacing (Applies at the top and the bottom of each section)

    • --bringer-xl-br

      Extra Large border radius

    • --bringer-large-br

      Large border radius

    • --bringer-default-br

      Default border radius

    • --bringer-small-br

      Small border radius

    • --bringer-xs-br

      Extra small border radius

    • --bringer-button-spacing

      Button padding

    • --bringer-button-br

      Button border radius

    • --bringer-input-spacing

      Input field padding

    • --bringer-input-br

      Input field border radius

    • --bringer-input-gap

      Input field bottom margin

    • --stg-container-width

      Shadow Themes Grid: Container

    • --stg-gap

      Shadow Themes Grid: Default Gap

    • --stg-xs-gap

      Shadow Themes Grid: Extra Small Gap

    • --stg-small-gap

      Shadow Themes Grid: Small Gap

    • --stg-large-gap

      Shadow Themes Grid: Large Gap

    • --stg-xl-gap

      Shadow Themes Grid: Extra Large Gap

  • Responsive Values
    • Tablet: Landscape
    • Mobile Menu
    • Tablet: Portrait
    • Mobile Phones

12.a Scripts

If you need to add custom JS code, we recommend you use a dedicated custom file instead of changing template files, which can help you install template updates in the future. The same applies to the template styles.

You can add your custom JS code to the function CustomFunction in the file js/main.js. This function starts when the DOM is ready after all template scripts are triggered.