Added QB-Core Notify types

go into qb-core/html/css/style.css and replace everything with whats posted below

html::-webkit-scrollbar {
    display: none;
}

@media (width: 3840px) and (height: 2160px) {
    .success {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 0.5rem solid #20bb44;
        font-size: 1.5vh;
    }

    .primary {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #1c75d2;
        font-size: 1.5vh;
    }

    .error {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #c10114;
        font-size: 1.5vh;
    }

    .police {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #2197f2;
        font-size: 1.5vh;
    }

    .ambulance {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #f44236;
        font-size: 1.5vh;
    }

    .stress {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #d436f4;
        font-size: 1.5vh;
    }

    .sms {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #00ff00;
        font-size: 1.5vh;
    }

    .bank {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #ff6600;
        font-size: 1.5vh;
    }

    .hunger {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #ff0000;
        font-size: 1.5vh;
    }

    .thirst {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #00eeff;
        font-size: 1.5vh;
    }

    .email {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #ffffff;
        font-size: 1.5vh;
    }

    .warning {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #ffee00;
        font-size: 1.5vh;
    }

    .announcement {
        background-color: rgba(23, 23, 23, 90%);
        border-radius: 10px;
        box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
        border-left: 5px solid #8c00ff;
        font-size: 1.5vh;
    }
}

.success {
    background-color: #20bb44;
    border-radius: 5px;
    border: 1px solid #6ae587;
}

.primary {
    background-color: #1c75d2;
    border-radius: 5px;
    border: 1px solid #6facec;
}

.error {
    background-color: #c10114;
    border-radius: 5px;
    border: 1px solid #fe4255;
}

.police {
    background-color: #2197f2;
    border-radius: 5px;
    border: 1px solid #7ac1f7;
}

.ambulance {
    background-color: #f44236;
    border-radius: 5px;
    border: 1px solid #f88e86;
}

.stress {
    background-color: #d436f4;
    border-radius: 5px;
    border: 1px solid #e06df7;
}

.sms {
    background-color: #00ff00;
    border-radius: 5px;
    border: 1px solid #83ff83;
}

.bank {
    background-color: #ff6600;
    border-radius: 5px;
    border: 1px solid #ff9249;
}

.hunger {
    background-color: #ff0000;
    border-radius: 5px;
    border: 1px solid #ff4f4f;
}

.thirst {
    background-color: #00eeff;
    border-radius: 5px;
    border: 1px solid #69f5ff;
}

.email {
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid #777777;
}

.warning {
    background-color: #ffee00;
    border-radius: 5px;
    border: 1px solid #fff788;
}

.announcement {
    background-color: #8c00ff;
    border-radius: 5px;
    border: 1px solid #b963ff;
}

go to qb-core/config.lua and replace this section QBConfig.Notify.VariantDefinitions with mine below

QBConfig.Notify.VariantDefinitions = {
    success = {
        classes = 'success',
        icon = 'task_alt'
    },
    primary = {
        classes = 'primary',
        icon = 'notifications'
    },
    error = {
        classes = 'error',
        icon = 'warning'
    },
    police = {
        classes = 'police',
        icon = 'local_police'
    },
    ambulance = {
        classes = 'ambulance',
        icon = 'fas fa-ambulance'
    },
    stress = {
        classes = 'stress',
        icon = 'psychology'
    },
    sms = {
        classes = 'sms',
        icon = 'chat_bubble'
    },
    bank = {
        classes = 'bank',
        icon = 'account_balance'
    },
    hunger = {
        classes = 'hunger',
        icon = 'lunch_dining'
    },
    thirst = {
        classes = 'thirst',
        icon = 'water_full'
    },
    email = {
        classes = 'email',
        icon = 'mail'
    },
    warning = {
        classes = 'warning',
        icon = 'warning'
    },
    announcement = {
        classes = 'announcement',
        icon = 'campaign'
    },
}

Done now just incorporate your new notification types into your existing scripts

Heres an example of adding the stress type in qb-hud

qb-hud/server.lua

RegisterNetEvent('hud:server:GainStress', function(amount)
    if Config.DisableStress then return end
    local src = source
    local Player = QBCore.Functions.GetPlayer(src)
    local Job = Player.PlayerData.job.name
    local JobType = Player.PlayerData.job.type
    local newStress
    if not Player or Config.WhitelistedJobs[JobType] or Config.WhitelistedJobs[Job] then return end
    if not ResetStress then
        if not Player.PlayerData.metadata['stress'] then
            Player.PlayerData.metadata['stress'] = 0
        end
        newStress = Player.PlayerData.metadata['stress'] + amount
        if newStress <= 0 then newStress = 0 end
    else
        newStress = 0
    end
    if newStress > 100 then
        newStress = 100
    end
    Player.Functions.SetMetaData('stress', newStress)
    TriggerClientEvent('hud:client:UpdateStress', src, newStress)
    TriggerClientEvent('QBCore:Notify', src, Lang:t("notify.stress_gain"), 'stress', 1500) -- Notice here i changed the type from error to stress
end)

Last updated

Was this helpful?