Skip to main content
Map Notification

Presets

Create reusable notification styles with custom icons, colors, typography, animations and sounds.

Setup overview

Integration notes

Reusable styles

Define a notification preset under a name, then call that name to reuse all of its style and sound settings.

Default preset examples​

Configuration

Default presets

Define reusable default and error notification styles.

examples
createPreset('default', {
    img = 'logo',
    iconBg = 'rgb(40, 6, 63)',
    iconColor = 'rgb(255,255,255)',
    headerStripe = true,
    bgHeader = false,
    headerFontsize = '1',
    msgFontSize = '0.8',
    leftBorder = 'rgb(255, 123, 0)',
    bgLeft = 'rgba(40, 6, 63, 0.45)',
    bgRight = 'rgba(20, 20, 20, 0.5)',
    textColor = 'rgb(255, 255, 255)',
    headerColor = 'rgb(255, 255, 0)',
    pulseAnimation = true,
    -- soundEffect = '',
    -- soundVolume = 0.015
})

createPreset('error', {
    ikon = 'fas fa-times-circle',
    iconBg = 'rgb(255, 0, 0)',
    iconColor = 'rgb(255,255,255)',
    headerStripe = true,
    bgHeader = true,
    headerFontsize = '1',
    msgFontSize = '0.8',
    leftBorder = 'rgb(255, 0, 0)',
    bgLeft = 'rgba(200, 20, 20, 0.35)',
    bgRight = 'rgba(45, 45, 45, 0.5)',
    textColor = 'rgb(255, 255, 255)',
    headerColor = 'rgb(255, 255, 255)',
    pulseAnimation = true,
    soundEffect = 'error.mp3',
    soundVolume = 0.015
})

Variables​

imgString

Uses a custom image from the html/img folder as the notification icon.

ikonString

Uses a Font Awesome icon. Set either ikon or img, not both.

iconBgString

Sets the icon background color.

iconColorString

Sets the icon color when using ikon.

bgHeaderBoolean

Enables a full background for the header.

headerStripeBoolean

Enables the gradient line below the header. This does not work when bgHeader is true.

headerFontsizeNumber

Sets the header font size.

msgFontSizeNumber

Sets the message font size.

leftBorderString

Sets the notification left border color.

bgLeftString

Sets the starting color of the notification background gradient.

bgRightString

Sets the ending color of the notification background gradient.

textColorString

Sets the message text color.

headerColorString

Sets the header text color.

pulseAnimationBoolean

Enables or disables the notification pulse animation.

soundEffectString

Sets the notification sound effect. Comment out or remove this variable to disable it; .mp3 is recommended.

soundVolumeNumber

Sets the sound effect volume.

RGB(A) colors​

Setup overview

Integration notes

Alpha channel

To add transparency to an RGB color, change rgb(255,255,255) to an RGBA value such as rgba(255,255,255, .5).