Craze ox_inventory redesign

OX Inventory Redesign Documentation

OX Inventory Redesign is a standalone FiveM UI overhaul for ox_inventory that adds a GTA-style radial menu, modern blue design theme, and smooth animations. It works with ESX, QBCore, and Standalone – no framework dependency required (only ox_inventory and ox_lib).

Overview

GTA-style radial menu for quick hotbar access (slots 1-5) with mouse-based selection
Simple flow: Press TAB → radial menu opens → hover/click item → item equips
Modern blue design unified across all UI elements (buttons, inputs, tooltips, menus)
Persistent styles with automatic CSS injection system
Framework independent – works with any FiveM server setup

Key Features

✔ ESX / QBCore / Standalone compatible – Works with any framework or standalone setup

✔ GTA-style radial menu – Interactive circular menu for hotbar items (slots 1-5)

✔ Hold-to-use system – Hold TAB to open, release on item to equip, or click to use

✔ ESC support – Press ESC to close radial menu at any time

✔ Modern blue theme – Unified professional blue color scheme (#50A0FF) for all UI elements

✔ Smooth animations – Fluid transitions and hover effects throughout the interface

✔ Fully redesigned UI – All buttons, inputs, tooltips, context menus, and weight bars overhauled

✔ Style injection system – Automatic CSS injection ensures styles apply even if files don't load properly

✔ Fully configurable – Easy to customize colors, sizes, and animations via CSS

✔ Optimized – Lightweight and production-ready, minimal performance impact

Quick Start

Installation

Create a backup of your current ox_inventory folder

# Windows (PowerShell)
Copy-Item -Path "resources\[ox_inventory]\ox_inventory" -Destination "resources\[ox_inventory]\ox_inventory_backup" -Recurse

# Linux/Mac
cp -r resources/[ox_inventory]/ox_inventory resources/[ox_inventory]/ox_inventory_backup

Copy files to your ox_inventory directory:
- Copy web/radial-menu-standalone.html → ox_inventory/web/
- Copy web/inventory-redesign.css → ox_inventory/web/
- Copy web/inventory-redesign-inject.js → ox_inventory/web/
- Replace web/build/index.html → ox_inventory/web/build/index.html
Patch client.lua:
- Open ox_inventory/client.lua
- Find the line: local invHotkeys = false
- Insert the complete code from client_patch.lua after that line

Update fxmanifest.lua:

Open ox_inventory/fxmanifest.lua
Add to files {} section:

files {
    -- ... existing files ...
    
    -- Redesign files
    'web/radial-menu-standalone.html',
    'web/inventory-redesign.css',
    'web/inventory-redesign-inject.js',
}

Restart resource:
```
restart ox_inventory
```

Installation Time: ~5 minutes

Basic Usage

Radial Menu (Hotbar):

Press TAB to open radial menu with first 5 inventory slots
Mouse hover over items to select
Click or release TAB on item to equip/use
Press ESC or TAB again to close menu

Main Inventory:

Press F2 to open redesigned inventory with blue theme
All buttons, inputs, and menus use the new design

Configuration

Edit CSS files to customize all visual settings.

Colors

Edit web/inventory-redesign.css to change color scheme:

/* Main blue color */
.slot-item:hover {
    background: rgba(80, 160, 255, 0.3);  /* Change this value */
}

/* Hover state color */
.slot-item:hover {
    box-shadow: 0 0 10px rgba(80, 160, 255, 0.5);  /* Glow effect */
}

/* Button colors */
button {
    background: rgba(80, 160, 255, 0.9);  /* Primary button color */
}

/* Exit button (red) */
.exit-button {
    background: rgba(255, 100, 100, 0.9);  /* Red for exit */
}

Edit web/radial-menu-standalone.html to change menu dimensions:

#radialMenu {
    width: 400px;   /* Change menu width */
    height: 400px;  /* Change menu height */
}

Animation Speed

Edit web/inventory-redesign.css to adjust transitions:

.slot-item {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);  /* Change 0.25s */
}

Border Radius

Edit web/inventory-redesign.css to change corner rounding:

.slot-item, button, input {
    border-radius: 8px;  /* Change border radius */
}

How It Works

Player presses TAB key
Script checks if player has items in slots 1-5
If items exist → radial menu opens via NUI
Player hovers mouse over items to select
On click or TAB release → item is equipped via useSlot() function
Menu closes automatically after item usage

Style System

CSS File: inventory-redesign.css contains all style definitions
HTML Integration: index.html loads CSS via <link> tag
JavaScript Injection: inventory-redesign-inject.js ensures styles apply even if CSS file fails to load
Iframe System: Radial menu runs in separate iframe for isolation
NUI Communication: Lua ↔ JavaScript message passing for menu control

Persistence

Styles persist across inventory opens/closes
Radial menu state resets on each open
Player settings (if any) could be saved via KVP (future feature)

File Structure

ox_inventory-redesign/
├── README.md                          ← Overview and features
├── INSTALLATION.md                    ← Detailed installation guide
├── DOCUMENTATION.md                   ← This file
├── client_patch.lua                   ← Radial menu Lua code (OPEN)
├── fxmanifest_example.lua             ← Manifest example (OPEN)
└── web/
    ├── radial-menu-standalone.html    ← Radial menu UI (OPEN)
    ├── inventory-redesign.css         ← Main stylesheet (OPEN)
    ├── inventory-redesign-inject.js   ← Style injection (OPEN)
    └── build/
        └── index.html                 ← Modified main UI (OPEN)

After Installation in ox_inventory:

ox_inventory/
├── client.lua                         ← Patched with radial menu code
├── fxmanifest.lua                     ← Updated with new files
└── web/
    ├── radial-menu-standalone.html    ← NEW
    ├── inventory-redesign.css         ← NEW
    ├── inventory-redesign-inject.js   ← NEW
    └── build/
        └── index.html                 ← REPLACED

Open Source Version

File

Status

All files

✅ Fully open and editable

All files included:

client_patch.lua – Radial menu Lua code
radial-menu-standalone.html – Radial menu HTML/JS
inventory-redesign.css – Main stylesheet
inventory-redesign-inject.js – Style injection script
index.html – Modified main UI
fxmanifest_example.lua – Manifest example
Complete documentation

Troubleshooting

Styles are not applied

Solution:

Check if all files are listed in fxmanifest.lua files {} section
Clear browser cache (Ctrl+F5 in-game)
Check browser console (F12) for errors
Verify files are in correct locations
Restart resource completely

Solution:

Check if client_patch.lua code is correctly inserted in client.lua
Verify code is placed after local invHotkeys = false
Check F8 console for Lua errors
Verify keybind is configured (default: TAB)
Ensure radial-menu-standalone.html is in files {} section
Check if items are in slots 1-5 (menu only shows if items exist)

Solution:

Check F8 console for useSlot errors
Verify NUI callbacks are registered correctly
Check if hotkeys 1-5 are blocked by other scripts
Ensure RegisterNUICallback('radialMenu:useItem') is in code

Double styles or conflicts

Solution:

Ensure only ONE CSS file is loaded
Check if other addons override styles
Use browser DevTools (F12) to find conflicts
Verify CSS file path in index.html is correct

Solution:

This is normal during drag & drop (intended behavior)
Icons should be visible in normal inventory (F2)
If not, check browser console for image loading errors
Verify background-image CSS is not overridden

Solution:

Check if closeRadialMenu() is called after useSlot()
Verify ESC/TAB close handlers are working
Check NUI callback closeRadialMenu is registered
Restart resource to reset state

Requirements

ox_inventory (v2.43.5 or higher) – Required
ox_lib – Required dependency
FiveM Server – Latest build recommended

Design Features

Blue Color Palette – Unified blue design (#50A0FF)
Glow Effects – Subtle glow effects for interactive elements
Smooth Transitions – Fluid animations (0.25s cubic-bezier)
Modern Borders – Rounded corners (8px border-radius)
Hover States – All interactive elements have hover effects
Responsive Design – Works on all screen resolutions

Displays first 5 inventory slots
Mouse-based selection with visual feedback
Click or release to use items
Smooth open/close animations
Transparent background with centered menu
Item icons and labels displayed
Real-time slot updates

Support

Discord: [Discord]

Tebex: https://codecraze-development.tebex.io

For Support:

Check this documentation first
Check browser console (F12) for errors
Check F8 console for Lua errors
Provide ox_inventory version
Provide FiveM server version
Include error messages and screenshots

Note: This is a UI redesign for ox_inventory. You must own ox_inventory to use this product. This product only includes the redesign files, not ox_inventory itself.

PreviousCZ Manual Brake NextCodeCraze Notes

Last updated 1 month ago

Craze ox_inventory redesign

OX Inventory Redesign Documentation

Overview

Key Features

Quick Start

Installation

Basic Usage

Configuration

Colors

Radial Menu Size

Animation Speed

Border Radius

How It Works

Radial Menu Logic

Style System

Persistence

File Structure

Open Source Version

Troubleshooting

Styles are not applied

Radial menu does not open

Menu opens but items don't equip

Double styles or conflicts

Icons not displaying in radial menu

Menu stays open after item usage

Requirements

Design Features

Radial Menu Features

Support

hashtagOX Inventory Redesign Documentation

hashtagOverview

hashtagKey Features

hashtagQuick Start

hashtagInstallation

hashtagBasic Usage

hashtagConfiguration

hashtagColors

hashtagRadial Menu Size

hashtagAnimation Speed

hashtagBorder Radius

hashtagHow It Works

hashtagRadial Menu Logic

hashtagStyle System

hashtagPersistence

hashtagFile Structure

hashtagOpen Source Version

hashtagTroubleshooting

hashtagStyles are not applied

hashtagRadial menu does not open

hashtagMenu opens but items don't equip

hashtagDouble styles or conflicts

hashtagIcons not displaying in radial menu

hashtagMenu stays open after item usage

hashtagRequirements

hashtagDesign Features

hashtagRadial Menu Features

hashtagSupport

OX Inventory Redesign Documentation

Overview

Key Features

Quick Start

Installation

Basic Usage

Configuration

Colors

Radial Menu Size

Animation Speed

Border Radius

How It Works

Radial Menu Logic

Style System

Persistence

File Structure

Open Source Version

Troubleshooting

Styles are not applied

Radial menu does not open

Menu opens but items don't equip

Double styles or conflicts

Icons not displaying in radial menu

Menu stays open after item usage

Requirements

Design Features

Radial Menu Features

Support