> ## Documentation Index
> Fetch the complete documentation index at: https://docs.markz3d.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to create a new hotel website

> This guide explains, step by step, how to create and activate a new hotel website.

## Overview

Creating a new website requires you to:

1. [Create a new website folder](#step-1-create-the-website-folder)
2. [Add the required images](#step-2-add-required-images)
3. [(Optional) Copy an existing website as a starting template](#step-3-optional-copy-an-existing-website-as-a-template)
4. [Connect the website to the hotel screen ui](#step-4-connect-the-website-to-the-hotel-screen-ui)
5. [Changing the website colors](#step-5-changing-the-website-colors)

***

## Step 1: Create the Website Folder

You need to create a new folder for your website.

### Folder Location

The folder must be created inside:

```
nui/websites/
```

### Folder Naming Format

The folder name must follow this format:

```
www.<website-name>.com
```

### Example

If your hotel is called **Opium Nights Hotel**, the folder name should be:

```
www.opium-nights-hotel.com
```

So the final path will look like:

```
nui/websites/www.opium-nights-hotel.com
```

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/website-folder.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=a6d4cb0e44c0e2eee19eb066f4abfcc9" alt="Image" height="300" className="rounded-md" data-path="images/website-folder.png" />

***

## Step 2: Add Required Images

Inside your new website folder, you must add all required image files.

These usually include:

* Background image
* Hotel logo
* Pattern image
* Room image

Make sure:

* Image names match what the website expects
* Images are placed directly inside the website folder

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/website-images.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=0ee004f8b8126d63325f636b7e5cf8f9" alt="Image" height="300" className="rounded-md" data-path="images/website-images.png" />

***

## Step 3: (Optional) Copy an Existing Website as a Template

To make things easier, you can copy an existing hotel website folder and use it as a starting point.

### How to do it:

1. Go to `nui/websites/`
2. Copy an existing folder
3. Rename it to your new website name (example: `www.opium-nights-hotel.com`)
4. Replace the images with your own

This method is **recommended** because:

* The structure is already correct
* You only need to change the images

***

## Step 4: Connect the Website to the Hotel Screen UI

After creating the website folder, you must configure the hotel screen UI to use it.

### What to do:

1. Open the `config.lua` file
2. Navigate to the hotel that you want to use the new website
3. Locate the `screens` section
4. Be sure that the `action` field is set to `ui`
5. Inside the `ui` section, locate the **url** field and set it to your website folder name

Example:

If your folder is:

```
www.opium-nights-hotel.com
```

Set the URL to:

```
www.opium-nights-hotel.com
```

Save the configuration file.

<br />

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/website-folder.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=a6d4cb0e44c0e2eee19eb066f4abfcc9" alt="Image" height="300" className="rounded-md" data-path="images/website-folder.png" />

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/website-config.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=3703a938a45231a2103865421af1b6c7" alt="Image" height="300" className="rounded-md" data-path="images/website-config.png" />

***

## Step 5: Changing the Website Colors

You can customize the website colors directly from the **screen UI configuration**.

This allows you to adapt the look of the website to match your hotel branding while keeping the original layout and structure.

### Available Color Settings

Inside the screen UI configuration, you will find these color properties:

**`backgroundColor`**
This controls the main background color of the website.

**`accentColor`**
This is the primary accent color. It is mainly used for:

* Buttons
* Highlights
* Important UI elements
* Decorative details

**`accentColor2`**
This is the secondary accent color. It is used for:

* Button shadows
* Depth effects
* Secondary decorative elements

To keep the **GTA-style visual design intact**, we strongly recommend setting:

👉 `accentColor2` to a **darker variant of `accentColor`**

This preserves proper contrast and maintains the intended visual depth of the interface.

***

### Using FiveM NUI DevTools to Test Colors in Real Time (Recommended)

To speed up the setup process, you can modify colors **live at runtime** using the FiveM **NUI DevTools**.

This allows you to experiment with different color combinations instantly, without restarting the resource or editing files repeatedly.

#### 1. Preparation

To be able to use the FiveM NUI DevTools, the `Beta` channel must be selected in the FiveM client settings under Game.

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-prep.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=6d7f6437d94f913aa13c9a227fe61b50" alt="Image of FiveM client settings" height="300" className="rounded-md" data-path="images/devtools-prep.png" />

#### 2. Open your selected screen UI

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-screen.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=c09ba2196fa05a070fedcfa3e5d05c65" alt="Image of selected screen UI" height="300" className="rounded-md" data-path="images/devtools-screen.png" />

#### 3. Open the FiveM Console

Press **F8** while in game to open the FiveM console.

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-open-console.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=7c3dc3598f3196f30a462fd53ea17cdc" alt="Open FiveM console" height="300" className="rounded-md" data-path="images/devtools-open-console.png" />

***

#### 4. Enable NUI DevTools

Now navigate to **Tools > NUI > Open DevTools** in the FiveM console.\
This will open the Chromium Developer Tools for the current UI.

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-open.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=f678e8e82599d82b2bc8a32149cf3b20" alt="Open NUI DevTools by clicking Tools > NUI > Open DevTools" height="300" className="rounded-md" data-og-width="857" data-og-height="429" data-path="images/devtools-open.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-open.png?w=280&fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=369141fc021f09ec08e1b43056e9c397 280w, https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-open.png?w=560&fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=03efa4c7ec8c12464d54d7f0915c0003 560w, https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-open.png?w=840&fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=5870b53c8d56a91c7ea56bdcb9b9c8ca 840w, https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-open.png?w=1100&fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=88a5c64d9e90428ce38e142fa64dbaa5 1100w, https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-open.png?w=1650&fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=8fc9e042a387917aa817109b02561004 1650w, https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-open.png?w=2500&fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=12116858286143e26cece125d2fc3cca 2500w" />

***

#### 5. Find the element to change the colors

Inside DevTools:

1. Open the **Elements** tab
2. Scroll down until you find the `<iframe>` element named `utility_hotel`

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-elements-tab.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=358da55579a993ee416f2273ccbe7e0d" alt="Locate Iframe element named utility_hotel" height="300" className="rounded-md" data-path="images/devtools-elements-tab.png" />

3. Now right click on the `<iframe>` element and select **Expand Recursively**

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-expand.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=e88b5e0710932b91a5fad38d0d5a104b" alt="Expand UI container div" height="300" className="rounded-md" data-path="images/devtools-expand.png" />

4. Scroll down until you find and click the first `<div>` element inside the `<div id="root">` element

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-colors-element.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=0cb4d3cb952ec90e4877a12b029413cb" alt="Locate UI container div" height="300" className="rounded-md" data-path="images/devtools-colors-element.png" />

***

#### 6. Modify the Colors

Once you locate the correct element:

1. On your right you will find the **Styles** tab, there you can see the current color values

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-colors-change.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=965cede0b91d8b5660e47478b4418330" alt="On the right you will find the Styles tab with the current color values" height="300" className="rounded-md" data-path="images/devtools-colors-change.png" />

2. To change the color values, click on the small rectangle next to the color you want to modify and see the color change in real time

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-colors-changing.gif?s=d39b3cc2d84d82781ebaa4ef3fe81e8d" alt="On the right you will find the Styles tab with the current color values" height="300" className="rounded-md" data-path="images/devtools-colors-changing.gif" />

***

#### 7. Apply Final Values to Config

After finding the colors you like:

1. Copy the final color values
2. Paste them into your screen UI configuration
3. Save the config file

<img src="https://mintcdn.com/mxc/0oL2c-0L-gHTzze4/images/devtools-colors-save.png?fit=max&auto=format&n=0oL2c-0L-gHTzze4&q=85&s=e8e95028a8e64110428a6682617f1d58" alt="On the right you will find the Styles tab with the current color values" height="300" className="rounded-md" data-path="images/devtools-colors-save.png" />

Your website will now use the selected colors permanently.

***

### Why This Method Is Recommended

Using NUI DevTools lets you:

* Preview changes instantly
* Avoid repeated restarts
* Fine-tune GTA-style color balance
* Find the perfect accent contrast

This significantly reduces setup time when designing a new hotel website.

***

## Final Checklist

Before testing the website, make sure:

* The folder is inside `nui/websites/`
* The folder name follows the format `www.<name>.com`
* All required images are added
* The screen UI configuration URL matches the folder name exactly

If everything is correct, your new hotel website should now be available on the hotel screen.