Customization Guide

Cornerstone Notify is fully extensible. You can create your own themes, layouts, animations, stacking modes, and notification types.

File Structure

web/
├── audio/                    # Notification sound files
│   └── README.txt            # Audio format guidelines
├── styles/
│   ├── base.css              # Core styles and stacking modes
│   ├── themes/               # Theme CSS files
│   │   ├── dark.css
│   │   ├── neon.css
│   │   └── ...
│   ├── layouts/              # Layout CSS files
│   │   ├── card.css
│   │   ├── compact.css
│   │   └── minimal.css
│   └── animations/           # Animation CSS files
│       ├── slide.css
│       ├── glitch.css
│       └── ...
├── notificationTypes.js      # Notification type definitions
├── app.js                    # Core JavaScript
└── index.html                # Main HTML file

Creating a Custom Theme

Step 1: Create a new CSS file in web/styles/themes/

/* web/styles/themes/mytheme.css */

.theme-mytheme {
    /* Background gradient for the notification body */
    --notification-background: linear-gradient(135deg, rgba(40, 20, 60, 0.95) 0%, rgba(20, 10, 35, 0.98) 100%);

    /* Primary text color (title) */
    --text-primary: #ffffff;

    /* Secondary text color (message) - can be tinted to match theme */
    --text-secondary: rgba(220, 180, 255, 0.9);

    /* Accent gradient used for icons, titles, and progress bar */
    --brand-gradient: linear-gradient(135deg, #9b59b6 0%, #e74c3c 100%);
}

.theme-mytheme .notification {
    background: var(--notification-background);

    /* Border color - use accent color with transparency */
    border: 1px solid rgba(155, 89, 182, 0.25);

    /* Shadow - can include glow effects */
    box-shadow: 0 8px 32px rgba(155, 89, 182, 0.2), inset 0 1px 0 rgba(155, 89, 182, 0.1);
}

/* Progress bar background track */
.theme-mytheme .progressbg {
    background: rgba(155, 89, 182, 0.2);
}

/* Optional: Custom message text color */
.theme-mytheme .message p {
    color: rgba(220, 180, 255, 0.8);
}

Step 2: Add the CSS import to web/index.html

<link rel="stylesheet" href="styles/themes/mytheme.css" />

Step 3: Add to settings dropdown in web/index.html (around line 70)

<option value="mytheme">My Theme</option>

Step 4: Add to web/test.html (both the settings panel dropdown and test panel dropdown)

Step 5: Update web/app.js - add to the theme class removal list (search for theme-dark):

'theme-dark','theme-light',...,'theme-mytheme',

Creating a Custom Layout

Layouts control the structure and arrangement of notification elements.

Step 1: Create a new CSS file in web/styles/layouts/

/* web/styles/layouts/mylayout.css */

/* Target notifications with this layout */
.layout-mylayout .notification {
    /* Grid layout for element positioning */
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    padding: 16px;
    border-radius: 12px;
}

/* Icon styling */
.layout-mylayout .icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* Title styling */
.layout-mylayout .title {
    grid-row: 1;
    grid-column: 2;
}

.layout-mylayout .title h1 {
    font-size: 14px;
    font-weight: 600;
}

/* Message styling */
.layout-mylayout .message {
    grid-row: 2;
    grid-column: 2;
}

.layout-mylayout .message p {
    font-size: 13px;
}

/* Progress bar styling */
.layout-mylayout .progressbar {
    grid-row: 1 / span 2;
    grid-column: 3;
    width: 4px;
}

.layout-mylayout .progressbg {
    height: 100%;
    width: 100%;
    border-radius: 2px;
}

/* Responsive adjustments */
@media (max-width: 400px) {
    .layout-mylayout .notification {
        padding: 12px;
    }
}

Step 2: Add CSS import to web/index.html

<link rel="stylesheet" href="styles/layouts/mylayout.css" />

Step 3: Add to layout dropdowns in both HTML files

<option value="mylayout">My Layout</option>

Step 4: Update web/app.js - add to the layout class removal list:

'layout-card','layout-compact','layout-minimal','layout-mylayout',

Creating a Custom Animation

Animations require both "show" (entry) and "hide" (exit) variants for left and right positions.

Step 1: Create a new CSS file in web/styles/animations/

/* web/styles/animations/myanimation.css */

/* Entry animation from right side */
.showMyanimationRight {
    animation: myanimationInRight 0.6s ease-out forwards;
}

/* Exit animation to right side */
.hideMyanimationRight {
    animation: myanimationOutRight 0.4s ease-in forwards;
}

/* Entry animation from left side */
.showMyanimationLeft {
    animation: myanimationInLeft 0.6s ease-out forwards;
}

/* Exit animation to left side */
.hideMyanimationLeft {
    animation: myanimationOutLeft 0.4s ease-in forwards;
}

/* Define the keyframes */
@keyframes myanimationInRight {
    0% {
        transform: translateX(100%) rotate(10deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0);
        opacity: 1;
    }
}

@keyframes myanimationOutRight {
    0% {
        transform: translateX(0) rotate(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%) rotate(-10deg);
        opacity: 0;
    }
}

@keyframes myanimationInLeft {
    0% {
        transform: translateX(-100%) rotate(-10deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0);
        opacity: 1;
    }
}

@keyframes myanimationOutLeft {
    0% {
        transform: translateX(0) rotate(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%) rotate(10deg);
        opacity: 0;
    }
}

Important: The class names must follow this pattern:

show[AnimationName]Right and hide[AnimationName]Right
show[AnimationName]Left and hide[AnimationName]Left
The animation name must be capitalized (e.g., Myanimation not myanimation)

Step 2: Add CSS import to web/index.html

<link rel="stylesheet" href="styles/animations/myanimation.css" />

Step 3: Add to animation dropdowns (use lowercase value)

<option value="myanimation">My Animation</option>

Step 4: Update web/app.js - add to animation class removal list:

'animation-slide',...,'animation-myanimation',

Creating a Custom Stacking Mode

Stacking modes are defined in web/styles/base.css.

Step 1: Add your stacking styles to web/styles/base.css

/* My Custom Stacking Mode */
.stack-mystack .notification-container {
    transition: all 0.3s ease;
}

/* First notification (newest) */
.stack-mystack .notification-container:nth-child(1) {
    transform: translateX(0);
    opacity: 1;
    z-index: 10;
}

/* Second notification */
.stack-mystack .notification-container:nth-child(2) {
    transform: translateX(10px) translateY(5px);
    opacity: 0.8;
    z-index: 9;
}

/* Third notification */
.stack-mystack .notification-container:nth-child(3) {
    transform: translateX(20px) translateY(10px);
    opacity: 0.6;
    z-index: 8;
}

/* Fourth and beyond */
.stack-mystack .notification-container:nth-child(n+4) {
    transform: translateX(30px) translateY(15px);
    opacity: 0.4;
    z-index: 7;
}

/* Adjust for left-side positions */
.left.stack-mystack .notification-container:nth-child(2),
.top-left.stack-mystack .notification-container:nth-child(2),
.bottom-left.stack-mystack .notification-container:nth-child(2) {
    transform: translateX(-10px) translateY(5px);
}
/* ... repeat for other nth-child selectors */

Step 2: Add to stacking dropdowns

<option value="mystack">My Stack</option>

Step 3: Update web/app.js - add to stacking class removal list:

'stack-cascade','stack-stack','stack-overlay','stack-list','stack-fan','stack-mystack',

Creating a Custom Notification Type

Notification types define the icon and color scheme for different notification categories.

Step 1: Edit web/notificationTypes.js

const types = {
    // ... existing types ...

    mytype: {
        icon: 'rocket',                    // Material Icons name
        color: 'linear-gradient(135deg, #e74c3c 0%, #9b59b6 100%)',  // Gradient for icon/title
        gradient: 'linear-gradient(135deg, rgba(231, 76, 60, 0.3) 0%, rgba(155, 89, 182, 0.3) 100%)'  // Border gradient
    },

    // Example: Custom faction type
    mafia: {
        icon: 'groups',
        color: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
        gradient: 'linear-gradient(135deg, rgba(44, 62, 80, 0.3) 0%, rgba(52, 73, 94, 0.3) 100%)'
    }
}

Step 2: Use your custom type

exports['cornerstone_notify']:sendNotification('Mafia', 'You joined the family', 'mafia')

Integration Checklist

When adding any custom element, make sure to update all these locations:

Element

CSS File

index.html Import

index.html Dropdown

test.html Dropdown

app.js Class List

Theme

themes/

Yes

Yes (x2)

Yes

Layout

layouts/

Yes

Yes (x2)

Yes

Animation

animations/

Yes

Yes (x2)

Yes

Stacking

base.css

Yes

Yes (x2)

Yes

Type

notificationTypes.js

PreviousAudio File NextSell Shops (Ox Inventory)

Last updated 25 days ago