> For the complete documentation index, see [llms.txt](https://zynoxdev.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zynoxdev.gitbook.io/docs/zynox-resources/zx_nameguard/customization.md).
# Customization & Styling
Zynox Studio Documents > ZYNOX RESOURCES > 🛡️ ZX - Name Guard
## 🎨 Customization & Styling
Step-by-step guide to replacing logos, customizing themes, typography, and audio cues for ZX Name Guard
***
### 📑 Table of Contents
1. [Replacing the Server Logo](#1-replacing-the-server-logo)
2. [Changing Colors & Dynamic Themes](#2-changing-colors--dynamic-themes)
3. [Advanced CSS Customization](#3-advanced-css-customization)
4. [Customizing Typography & Fonts](#4-customizing-typography--fonts)
5. [Audio & Tactile Sound Effects](#5-audio--tactile-sound-effects)
6. [Watermark & Footer Customization](#6-watermark--footer-customization)
***
### 1. Replacing the Server Logo
The in-game warning UI displays a sleek logo in the header badge and a brand watermark at the bottom of the card.
#### How to use your own logo:
1. Prepare your logo as a **Transparent PNG** file (`.png`).
2. Recommended resolution: **180x180 px** or **256x256 px**.
3. Name the file **`logo.png`**.
4. Replace the existing file at:
```
zx_nameGuard/web/logo.png
```
5. Ensure `web/logo.png` is listed in your `fxmanifest.lua` under the `files` array:
```lua
files {
'web/index.html',
'web/style.css',
'web/script.js',
'web/logo.png'
}
```
6. Restart the resource (`ensure zx_nameGuard`) and test in-game with `/testnamecheck`.
***
### 2. Changing Colors & Dynamic Themes
#### Method 1: The Quick Config Way (Zero CSS editing required!)
You can change the primary theme color directly in `config.lua`:
```lua
Config.UI = {
ThemeColor = "#38bdf8" -- Enter any HEX color code!
}
```
The action buttons, ambient card glow, and watermark highlights will automatically calculate and adapt to this color.
#### Popular Color Presets:
* 🌐 **Cyan / Sky (Default):** `"#38bdf8"` or `"#00d2ff"`
* 🟣 **Cyber Violet:** `"#a855f7"` or `"#8b5cf6"`
* 🔵 **Indigo / Classic:** `"#6366f1"`
* 🟢 **Emerald / Lime:** `"#10b981"`
* 🔴 **Ruby / Crimson:** `"#ef4444"`
* 🟡 **Amber / Gold:** `"#f59e0b"`
***
### 3. Advanced CSS Customization
If you want to customize specific backgrounds, borders, or text colors, open `web/style.css` and edit the `:root` CSS variables:
```css
:root {
/* Primary Accent Colors */
--primary: #38bdf8; /* Button and active accent color */
--primary-glow: rgba(56, 189, 248, 0.45);
/* Background Card Styling */
--bg-card: rgba(15, 23, 42, 0.88);
--bg-card-border: rgba(255, 255, 255, 0.1);
/* Warning / Mismatch Highlights */
--warning: #f59e0b; /* Orange attention color */
--warning-bg: rgba(245, 158, 11, 0.12);
--warning-border: rgba(245, 158, 11, 0.35);
/* Success / Required Highlights */
--success: #10b981; /* Green match color */
--success-bg: rgba(16, 185, 129, 0.12);
--success-border: rgba(16, 185, 129, 0.35);
/* Error / Mismatch Box */
--error: #ef4444; /* Red error highlight */
--error-bg: rgba(239, 68, 68, 0.12);
--error-border: rgba(239, 68, 68, 0.35);
}
```
***
### 4. Customizing Typography & Fonts
By default, the UI imports Google Fonts **Outfit** and **Plus Jakarta Sans** for a modern, crisp appearance.
To use a different font (e.g. *Inter*, *Poppins*, or *Rajdhani*):
1. In `web/index.html`, update the Google Fonts `` tag in the `` section:
```html
```
2. In `web/style.css`, update the font-family definitions:
```css
:root {
--font-display: 'Poppins', sans-serif;
--font-body: 'Poppins', sans-serif;
}
```
***
### 5. Audio & Tactile Sound Effects
When the NUI window opens, buttons are clicked, or the name is copied, FiveM frontend native audio plays to give tactile feedback.
To change or disable these sounds, open `client/main.lua`:
* **Window Open Sound:**
```lua
PlaySoundFrontend(-1, "CHARACTER_SELECT", "HUD_FRONTEND_DEFAULT_SOUNDSET", true)
```
* **Button Click Sound:**
```lua
PlaySoundFrontend(-1, "SELECT", "HUD_FRONTEND_DEFAULT_SOUNDSET", true)
```
* **Copy Success Sound:**
```lua
PlaySoundFrontend(-1, "HIGHLIGHT_NAV_UP_DOWN", "HUD_FRONTEND_DEFAULT_SOUNDSET", true)
```
> \[!TIP] If you wish to disable sound effects completely, simply comment out the `PlaySoundFrontend` lines in `client/main.lua`.
***
### 6. Watermark & Footer Customization
To modify or remove the watermark at the bottom of the in-game warning card, edit `web/index.html`:
```html
Protected by Zynox Development