FiveM_Custom_UI
FiveM Custom UI is a public released UI to improve the UI for the ESX Framework. You may edit & change the UI to your liking.
- Note: I did NOT create the Code. I have simply edited it to get it working. I have also added a few things to make it better. Make sure you Follow the Installation below.
Screenshot preview
Requirements
Download & Installation
- Download the .zip.
- Extract the .zip or Open the .zip.
- Place
esx_customui
in your ESX Directory - Add
start esx_customui
to your server.cfg
- Disable the following line in (resources[essential]\es_extended\ui.html) Change
<div id="hud"></div>
to
<!--<div id="hud"></div>-->
- Disable the following lines in (resources\essentialmode\ui.html)
<div id="starter" style="font-family: 'roboto'; color: white; position: absolute; left: 20%; top: 5%; width: 60%; background: rgba(40, 40, 40, 0.8)"></div>
<div id="container">
<div id="money">
<div id="cash"/>
</div>
</div>
to
<!--<div id="starter" style="font-family: 'roboto'; color: white; position: absolute; left: 20%; top: 5%; width: 60%; background: rgba(40, 40, 40, 0.8)"></div>
<div id="container">
<div id="money">
<div id="cash"/>
</div>
</div>-->
- Add TriggerEvent in (resources[esx]\esx_status\client\main.lua
esx_status:load
)
TriggerEvent('esx_customui:updateStatus', GetStatusData(true))
to look like this
RegisterNetEvent('esx_status:load')
AddEventHandler('esx_status:load', function(status)
for i=1, #Status, 1 do
for j=1, #status, 1 do
if Status[i].name == status[j].name then
Status[i].set(status[j].val)
end
end
end
Citizen.CreateThread(function()
while true do
for i=1, #Status, 1 do
Status[i].onTick()
end
SendNUIMessage({
update = true,
status = GetStatusData()
})
TriggerEvent('esx_customui:updateStatus', GetStatusData(true))
Citizen.Wait(Config.TickTime)
end
end)
end)
- Disabling Basic Needs Bars (resources[esx]\esx_basicneeds\client\main.lua
esx_status:loaded
)
AddEventHandler('esx_status:loaded', function(status)
TriggerEvent('esx_status:registerStatus', 'hunger', 1000000, '#FFFF00', -- amarelo
--TriggerEvent('esx_status:registerStatus', 'hunger', 1000000, '#CFAD0F', -- GOLD
function(status)
return false -- Change to true to show hunger bar | false to hide hunger bar
end, function(status)
status.remove(100)
end
)
TriggerEvent('esx_status:registerStatus', 'thirst', 1000000, '#0099FF', -- azul
--TriggerEvent('esx_status:registerStatus', 'thirst', 1000000, '#0C98F1', -- CYAN
function(status)
return false -- Change to true to show thirst bar | false to hide thirst bar
end, function(status)
status.remove(75)
end
)
- Disabling Optional Needs Bar (resources[esx]\esx_optionalneeds\client\main.lua
esx_status:loaded
)
AddEventHandler('esx_status:loaded', function(status)
TriggerEvent('esx_status:registerStatus', 'drunk', 0, '#8F15A5',
function(status)
if status.val > 0 then
return false -- Set to true to show if you drink | false to always hide
else
return false -- Set to true to always show | false to hide if 0
end
end,
function(status)
status.remove(1500)
end
)
Editing
- esx_customui\html\style.css (Edit Lines 9 & 10 to Change Position on Screen)
- esx_customui\client.lua (Edit Line 87 to set Default Distance) & (Edit Line 88 to Allow Changing Distance)
KNOWN BUGS:
- If you are using an Aspect Ratio less then 16:9 there might be problems. Always use 16:9 or 16:10
- Icons not Showing Up. This could be a few reason like you commented it out in resource.lua or for jobs your job name is textil but the image for it is tailor or could simple be a script load order problem.