# XelBob-tab

**XelBob-tab** est le produit de l'association entre [Xelyos](https://xelyos.fr/discord) et [Bob's&Co](https://discord.gg/X36mxQTk5b). Cette tablette utilisable sur Fivem vous permet d'afficher le contenu de sites internet directement sur votre serveur.  
  
**XelBob-tab** is the result of the partnership between [Xelyos](https://xelyos.fr/discord) and [Bob's&Co](https://discord.gg/X36mxQTk5b). This tablet, usable on FiveM, allows you to display the content of websites directly on your server.

# FR

Le XelBob-tab est le produit de l'association entre Xelyos et Bob's&Co. Cette tablette utilisable sur Fivem vous permet d'afficher le contenu de sites internet directement sur votre serveur.

# Présentation

****XelBob-tab****<span style="white-space: pre-wrap;"> est un script conçu en collaboration avec </span>[****Bob's &amp; Co****](https://discord.gg/X36mxQTk5b), qui s'adresse aux propriétaires de serveurs FiveM. Ce script a pour objectif d'afficher des sites internet directement sur votre serveur. Vous avez la possibilité de configurer plusieurs sites web à afficher et de restreindre l'accès en fonction du métier du joueur, ajoutant ainsi une dimension réaliste à votre serveur.

<span style="white-space: pre-wrap;">De plus, </span>****XelBob-tab****<span style="white-space: pre-wrap;"> offre une fonctionnalité optionnelle : l'affichage en temps réel de la météo sur la tablette en jeu. Cette fonctionnalité est accessible uniquement si vous utilisez le script </span>[****easytime****](https://github.com/dsheedes/cd_easytime "Afficher la page du script").

[![image.png](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/scaled-1680-/iTbimage.png)](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/iTbimage.png)

# Installation

<span style="white-space: pre-wrap;">Pour télécharger le script, rendez-vous sur : </span>[Xelyos | Bobs&amp;Co | Tablet (tebex.io)](https://xelyos.fr/solution/xelbob-tab/invite "Accéder à la page de la ressource")

<span style="white-space: pre-wrap;">Dans votre répertoire </span>`<span class="editor-theme-code">ressources</span>`<span style="white-space: pre-wrap;">, glissez et déposez le fichier </span>`<span class="editor-theme-code">XelBob-tab</span>`.

<span style="white-space: pre-wrap;">Dans votre fichier </span>`<span class="editor-theme-code">server.cfg</span>`<span style="white-space: pre-wrap;">, activez la ressource en ajoutant la ligne : </span>

```ini
ensure XelBob-tab
```

<p class="callout warning">La modification du nom de la ressources provoquera un dysfonctionnement de la tablette</p>

<p class="callout success">Une fois que la tablette est correctement installée, lorsque vous lancez votre serveur, ceci devrait apparaître dans votre console :</p>

[![image.png](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/scaled-1680-/fceimage.png)](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/fceimage.png)

# Fichier de configuration

#### ESX Version

```lua
-- ESX Version
Config.versionESX = 'new' --[[
    'old' (Esx 1.1).
    'new' (Esx 1.2, v1 final, legacy or extendedmode).
]]
```

<p class="callout info">Définissez la version ESX</p>

#####   


#####   


##### Définir le langage pour le temps

```lua
Config.Locale = 'fr' -- en/fr
```

#####   


#####   


##### Lier une commande pour l'ouverture de la tablette

```lua
Config.Command = 'tablet' -- Set nil to disabled command !
Config.CommandDescription = 'Open tablet'
```

<p class="callout info"><span style="white-space: pre-wrap;">Vous pouvez définir une commande pour l'ouverture de la tablette. Si vous souhaitez désactiver l'ouverture par commande, mettez </span>`<span class="editor-theme-code">nil</span>`.</p>

#####   


##### Attacher un item à l'utilisation de la tablette

```lua
Config.Item = 'xelyos_bob_tablet' -- Set nil to disabled item !
```

<p class="callout info"><span style="white-space: pre-wrap;">Vous pouvez rattacher l'ouverture de la tablette par l'utilisation d'un item, pour ne pas lié la tablette à un item, mettez </span>`<span class="editor-theme-code">nil</span>`.</p>

# Configuration des sites

### Ajouter un site

- <span style="white-space: pre-wrap;">Pour ajouter les sites, vous devez modifier le fichier </span>`<span class="editor-theme-code">nui/assets/config.js</span>`<span style="white-space: pre-wrap;"></span>
- <span style="white-space: pre-wrap;">Ajouter une ligne dans le tableau </span>`<span class="editor-theme-code">config.sites</span>`

<u>Format de la ligne :</u>

```lua
{
  name: "Nom affiché sur la tablette", 
  icon: "img/mon_image.png", 
  href: "nom_unique", 
  url: "url vers le site internet" 
}
```

<p class="callout warning"><span style="white-space: pre-wrap;">Attention, le </span>****href****<span style="white-space: pre-wrap;"> doit être unique et ne peut pas être mis sur un autre site !</span></p>

<details id="bkmrk-exemple-avant-%3A-cons"><summary>Exemple</summary>

<u>Avant :</u>

```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
    ]
};
```

<u>Nouveau site :</u>

```lua
{
  name: "Intranet Xelyos", 
  icon: "img/intranet.png", 
  href: "intranetxelyos", 
  url: "http://intranet-rp.com" 
}
```

<u>Après :</u>

#####   


```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
        { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
    ]
};
```

<span style="white-space: pre-wrap;"></span>

</details>- <span style="white-space: pre-wrap;">L'image liée à votre site doit se situer dans le répertoire </span>`<span class="editor-theme-code">nui/img</span>`

##### Changer la couleur de fond

- <span style="white-space: pre-wrap;">Vous pouvez également changer la couleur de fond en ajoutant/modifiant le fichier </span>`<span class="editor-theme-code">nui/assets/color.css</span>`

```css
.application > #num_unique { 
    background: #37517e;
    background: linear-gradient(to right, #37517e, #142747);
}
```

### Limiter l'accès à un site pour un job

<span style="white-space: pre-wrap;">Pour restreindre l'accès à un site pour un job, vous devez modifier le fichier </span>`<span class="editor-theme-code">nui/assets/config.js</span>`.

<u>Format de la restriction :</u>

```lua
{
  job_name: "nom_du_job",
  sites: [
    { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" }
  ]
}
```

<p class="callout warning"><span style="white-space: pre-wrap;">Attention, la ligne présente dans le tableau </span>****sites****<span style="white-space: pre-wrap;"> doit être identique à celle présente dans la variable </span>`<span class="editor-theme-code">config.sites</span>`<span style="white-space: pre-wrap;"> !</span></p>

<details id="bkmrk-exemple-variable-ave"><summary>Exemple</summary>

<span style="white-space: pre-wrap;"></span>

<u>Variable avec tous les sites :</u>

```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
        { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
    ]
};
```

<u>Variable avec la restriction :</u>

```javascript
const jobSites = [
    {
        job_name: "police",
        sites: [
            { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
            { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
        ]
    },
    {
        job_name: "ambulance",
        sites: [
            { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
            { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
        ]
    }
];
```

#####   


<u>Avec cette configuration :</u>

- <span style="white-space: pre-wrap;">Le site </span>****Intranet Xelyos****<span style="white-space: pre-wrap;"> sera accessible par les jobs police et ambulance</span>
- <span style="white-space: pre-wrap;">Le site </span>****Cop App****<span style="white-space: pre-wrap;"> sera uniquement accessible par le job police</span>
- <span style="white-space: pre-wrap;">Le site </span>****Secours App****<span style="white-space: pre-wrap;"> sera uniquement accessible par le job ambulance</span>

</details>

# Configurer l'affichage de la météo easytime

La tablette permet d'afficher sur sa page d'accueil la météo actuelle.

<span style="white-space: pre-wrap;">Pour utiliser cette fonctionnalité, vous devez utiliser le script : </span>[****cd\_easytime****](https://github.com/dsheedes/cd_easytime "Accéder à la page du script")

### Configurer la fonctionnalité

#####   


##### Activer ou désactiver l'affichage

```lua
Config.easytime = true  -- true/false
```

<p class="callout info"><span style="white-space: pre-wrap;">Vous pouvez décider d'utiliser ou non cette fonctionnalité. En mettant </span>****false****, l'affichage ne se fera pas !</p>

##### Changer l'icone

```lua
Config.weatherIcons = {
    CLOUDS = 'weather-icon fas fa-cloud-sun',
    RAIN = 'weather-icon fas fa-cloud-rain',
    CLEAR = 'weather-icon fas fa-sun',
    OVERCAST = 'weather-icon fas fa-cloud-sun',
    EXTRASUNNY = 'weather-icon fas fa-sun',
    CLEARING = 'weather-icon fas fa-sun',
    NEUTRAL = 'weather-icon fas fa-sun',
    THUNDER = 'weather-icon fas fa-bolt',
    SMOG = 'weather-icon fas fa-smog',
    FOGGY = 'weather-icon fas fa-smog',
    SNOWLIGHT = 'weather-icon fas fa-snowflake',
    SNOW = 'weather-icon fas fa-snowflake',
    BLIZZARD = 'weather-icon fas fa-snowflake',
    XMAS = 'weather-icon fas fa-snowflake',
    HALLOWEEN = 'weather-icon fas fa-cloud-moon',
}
```

- <span style="white-space: pre-wrap;">Les icônes que nous utilisons sont ceux de </span>[****Font Awesome****](https://fontawesome.com/icons).
- <span style="white-space: pre-wrap;">Pour remplacer une icône, changer le texte après </span>`<span class="editor-theme-code">weather-icon</span>`<span style="white-space: pre-wrap;"> avec la nouvelle icône</span>

<p class="callout warning">Attention, certaines icônes ne fonctionnent pas !</p>

##### Changer la couleur de l'icône

- <span style="white-space: pre-wrap;">Pour modifier la couleur d'une icône, rendez-vous dans : </span>`<span class="editor-theme-code">nui/assets/color.css</span>`

```css
.icon-name, .icon-2-name {
    color:rgb(85, 85, 85);
    text-shadow: 0 0 10px black; /* Ajoute un contour noir de 2 pixels autour de l'icône */
}
```

##### Changer le gif en background

```lua
Config.weatherGif = {
    CLOUDS = "background: url('https://i.gifer.com/1427.gif') center/cover;",
    RAIN = "background: url('https://i.gifer.com/73j4.gif') center/cover;",
    CLEAR = "background: url('https://i.gifer.com/Lx0q.gif') center/cover;",
    OVERCAST = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    EXTRASUNNY = "background: url('https://stormandsky.com/gif/15.gif') center/cover;",
    CLEARING = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    NEUTRAL = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    THUNDER = "background: url('https://i.gifer.com/DMI.gif') center/cover;",
    SMOG = "background: url('https://i.gifer.com/7JyC.gif') center/cover;",
    FOGGY = "background: url('https://i.gifer.com/IJNu.gif') center/cover;",
    SNOWLIGHT = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    SNOW = "background: url(' https://i.gifer.com/3g5.gif') center/cover;",
    BLIZZARD = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    XMAS = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    HALLOWEEN = "background: url('https://i.gifer.com/AdL.gif') center/cover;",
}
```

<span style="white-space: pre-wrap;">Vous pouvez changer le gif présent en background en fonction du temps. Pour cela, il vous suffit de remplacer l'URL présent dans </span>`<span class="editor-theme-code">url()</span>`.

<span style="white-space: pre-wrap;">Lien vers des gifs disponibles : </span>[****Looping Storm gif (stormandsky.com)****](https://stormandsky.com/gifs)

# EN

# Presentation

****XelBob-tab****<span style="white-space: pre-wrap;"> is a script designed in collaboration with </span>[****Bob's &amp; Co****](https://discord.gg/X36mxQTk5b), aimed at FiveM server owners. The purpose of this script is to display websites directly on your server. You have the possibility to configure multiple websites to be displayed and restrict access based on the player's job, adding a realistic dimension to your server.

<span style="white-space: pre-wrap;">Furthermore, </span>****XelBob-tab****<span style="white-space: pre-wrap;"> offers an optional feature: real-time weather display on the in-game tablet. This feature is accessible only if you use the </span>[****easytime****](https://github.com/dsheedes/cd_easytime "Show script page")<span style="white-space: pre-wrap;"> script.</span>

[![image.png](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/scaled-1680-/6Htimage.png)](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/6Htimage.png)

# Installation

<span style="white-space: pre-wrap;">To download the script, go to: </span>[Xelyos | Bobs&amp;Co | Tablet (tebex.io)](https://xelyos.fr/solution/xelbob-tab/invite "Access the resource page")

<span style="white-space: pre-wrap;">In your </span>`<span class="editor-theme-code">resources</span>`<span style="white-space: pre-wrap;"> directory, drag and drop the </span>`<span class="editor-theme-code">XelBob-tab</span>`<span style="white-space: pre-wrap;"> file.</span>

<span style="white-space: pre-wrap;">In your </span>`<span class="editor-theme-code">server.cfg</span>`<span style="white-space: pre-wrap;"> file, activate the resource by adding the line: </span>

```ini
ensure XelBob-tab
```

<p class="callout warning">Modifying the resource name will cause the tablet to malfunction</p>

<p class="callout success">Once the tablet is correctly installed, when you start your server, this should appear in your console:</p>

[![image.png](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/scaled-1680-/B3pimage.png)](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/B3pimage.png)

# Configuration file

#### ESX Version

```lua
-- ESX Version
Config.versionESX = 'new' --[[
    'old' (Esx 1.1).
    'new' (Esx 1.2, v1 final, legacy or extendedmode).
]]
```

<p class="callout info">Set the ESX version</p>

#####   


#####   


##### Set the language for time

```lua
Config.Locale = 'en' -- en/fr
```

#####   


#####   


##### Bind a command for tablet opening

```lua
Config.Command = 'tablet' -- Set nil to disabled command!
Config.CommandDescription = 'Open tablet'
```

<p class="callout info"><span style="white-space: pre-wrap;">You can set a command for tablet opening. If you want to disable the command opening, set it to </span>`<span class="editor-theme-code">nil</span>`.</p>

#####   


##### Attach an item to tablet usage

```lua
Config.Item = 'xelyos_bob_tablet' -- Set nil to disabled item!
```

<p class="callout info"><span style="white-space: pre-wrap;">You can attach tablet opening to the usage of an item. To not bind the tablet to an item, set it to </span>`<span class="editor-theme-code">nil</span>`.</p>

# Web site configuration

### Add a Site

- <span style="white-space: pre-wrap;">To add sites, you need to modify the file </span>`<span class="editor-theme-code">nui/assets/config.js</span>`
- <span style="white-space: pre-wrap;">Add a line in the </span>`<span class="editor-theme-code">config.sites</span>`<span style="white-space: pre-wrap;"> array</span>

<u>Line Format:</u>

```lua
{
  name: "Name displayed on the tablet",
  icon: "img/your_image.png",
  href: "unique_name",
  url: "website_url"
}
```

<p class="callout warning"><span style="white-space: pre-wrap;">Warning, the </span>****href****<span style="white-space: pre-wrap;"> must be unique and cannot be used on another site!</span></p>

<details id="bkmrk-exemple-avant-%3A-cons"><summary>Example</summary>

<u>Before:</u>

```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
    ]
};
```

<u>New Site:</u>

```lua
{
  name: "Intranet Xelyos",
  icon: "img/intranet.png",
  href: "intranetxelyos",
  url: "http://intranet-rp.com"
}
```

<u>After:</u>

#####   


```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
        { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
    ]
};
```

<span style="white-space: pre-wrap;"></span>

</details>- <span style="white-space: pre-wrap;">The image linked to your site must be located in the </span>`<span class="editor-theme-code">nui/img</span>`<span style="white-space: pre-wrap;"> directory</span>

##### Change the Background Color

- <span style="white-space: pre-wrap;">You can also change the background color by adding/modifying the </span>`<span class="editor-theme-code">nui/assets/color.css</span>`<span style="white-space: pre-wrap;"> file</span>

```css
.application > #unique_number {
    background: #37517e;
    background: linear-gradient(to right, #37517e, #142747);
}
```

### Limit Access to a Site for a Job

<span style="white-space: pre-wrap;">To restrict access to a site for a job, you need to modify the file </span>`<span class="editor-theme-code">nui/assets/config.js</span>`.

<u>Restriction Format:</u>

```lua
{
  job_name: "job_name",
  sites: [
    { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" }
  ]
}
```

<p class="callout warning"><span style="white-space: pre-wrap;">Warning, the line in the </span>****sites****<span style="white-space: pre-wrap;"> array must be identical to the one in the </span>`<span class="editor-theme-code">config.sites</span>`<span style="white-space: pre-wrap;"> variable!</span></p>

<details id="bkmrk-exemple-variable-ave"><summary>Example</summary>

<span style="white-space: pre-wrap;"></span>

<u>Variable with all sites:</u>

```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
        { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
    ]
};
```

<u>Variable with the restriction:</u>

```javascript
const jobSites = [
    {
        job_name: "police",
        sites: [
            { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
            { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
        ]
    },
    {
        job_name: "ambulance",
        sites: [
            { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
            { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
        ]
    }
];
```

#####   


<u>With this configuration:</u>

- <span style="white-space: pre-wrap;">The site </span>****Intranet Xelyos****<span style="white-space: pre-wrap;"> will be accessible for the police and ambulance jobs</span>
- <span style="white-space: pre-wrap;">The site </span>****COP App****<span style="white-space: pre-wrap;"> will only be accessible for the police job</span>
- <span style="white-space: pre-wrap;">The site </span>****Secours App****<span style="white-space: pre-wrap;"> will only be accessible for the ambulance job</span>

</details>

# Configure the easytime weather display

The tablet allows displaying the current weather on its home page.

<span style="white-space: pre-wrap;">To use this feature, you need to use the script: </span>[****cd\_easytime****](https://github.com/dsheedes/cd_easytime "Accéder à la page du script")

### Configure the Feature

#####   


##### Enable or Disable Display

```lua
Config.easytime = true  -- true/false
```

<p class="callout info"><span style="white-space: pre-wrap;">You can decide whether to use this feature or not. By setting it to </span>****false****, the display will not occur!</p>

##### Change the Icon

```lua
Config.weatherIcons = {
    CLOUDS = 'weather-icon fas fa-cloud-sun',
    RAIN = 'weather-icon fas fa-cloud-rain',
    CLEAR = 'weather-icon fas fa-sun',
    OVERCAST = 'weather-icon fas fa-cloud-sun',
    EXTRASUNNY = 'weather-icon fas fa-sun',
    CLEARING = 'weather-icon fas fa-sun',
    NEUTRAL = 'weather-icon fas fa-sun',
    THUNDER = 'weather-icon fas fa-bolt',
    SMOG = 'weather-icon fas fa-smog',
    FOGGY = 'weather-icon fas fa-smog',
    SNOWLIGHT = 'weather-icon fas fa-snowflake',
    SNOW = 'weather-icon fas fa-snowflake',
    BLIZZARD = 'weather-icon fas fa-snowflake',
    XMAS = 'weather-icon fas fa-snowflake',
    HALLOWEEN = 'weather-icon fas fa-cloud-moon',
}
```

- <span style="white-space: pre-wrap;">The icons we use are from </span>[****Font Awesome****](https://fontawesome.com/icons).
- <span style="white-space: pre-wrap;">To replace an icon, change the text after </span>`<span class="editor-theme-code">weather-icon</span>`<span style="white-space: pre-wrap;"> with the new icon.</span>

<p class="callout warning">Warning, some icons do not work!</p>

##### Change the Icon Color

- <span style="white-space: pre-wrap;">To change the color of an icon, go to: </span>`<span class="editor-theme-code">nui/assets/color.css</span>`

```css
.icon-name, .icon-2-name {
    color:rgb(85, 85, 85);
    text-shadow: 0 0 10px black; /* Add a 2-pixel black outline to the icon */
}
```

##### Change the GIF in the Background

```lua
Config.weatherGif = {
    CLOUDS = "background: url('https://i.gifer.com/1427.gif') center/cover;",
    RAIN = "background: url('https://i.gifer.com/73j4.gif') center/cover;",
    CLEAR = "background: url('https://i.gifer.com/Lx0q.gif') center/cover;",
    OVERCAST = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    EXTRASUNNY = "background: url('https://stormandsky.com/gif/15.gif') center/cover;",
    CLEARING = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    NEUTRAL = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    THUNDER = "background: url('https://i.gifer.com/DMI.gif') center/cover;",
    SMOG = "background: url('https://i.gifer.com/7JyC.gif') center/cover;",
    FOGGY = "background: url('https://i.gifer.com/IJNu.gif') center/cover;",
    SNOWLIGHT = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    SNOW = "background: url(' https://i.gifer.com/3g5.gif') center/cover;",
    BLIZZARD = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    XMAS = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    HALLOWEEN = "background: url('https://i.gifer.com/AdL.gif') center/cover;",
}
```

<span style="white-space: pre-wrap;">You can change the GIF in the background according to the weather. To do this, simply replace the URL in </span>`<span class="editor-theme-code">url()</span>`.

<span style="white-space: pre-wrap;">Link to available GIFs: </span>[****Looping Storm GIFs (stormandsky.com)****](https://stormandsky.com/gifs)