How to change the color of the hud?
good night everyone, I gave a modified the hud js and did the animation of the jobs tab, follows an example video. @Poggu, can I post this modification to github 
Remember, this modification was made to 1920 x 1080, to change where the animation ends, you must change .css container2.
If @Poggu authorizes it, I will post this modification with a tutorial on how to change the position.
Thanks poggu for creating this wonderful hud!!!
1 Like
Sure, you can post it
updated github with the insertion of the jobs tab animation 
thanks @Poggu for authorizing me to post this modification!
Look at this [Release | Utility] Minimap Anchor Script. You can find the position of minimap and put the job box next to it
Your version did not work for me. I can’t make jobs work. Only hud money worked for me.
Nice but can the right bar be always open if yes please say how thanks <3
How would I go about moving the whole HUD down just a tad I find its to close to the FiveM logo, thanks for any responses.
Hi hey please go off the minimap down in the left? Please reply thanks.
Hello, is it possible to move texts by coordinates?
Its possible keep alwais active the 2 hud (job and money)
Hello, how do i move the job bit to the top middle of the screen, i have tried messing about with the main.css but still doesnt move
hey man, it looks so good, i have a question, r u from CZE or SVK?
sorry im new and i dont know much i download poggu_hud and put it in resources and not working it says loading why is that
How to do the white paymant
?
How would i make it so the hud is already expanded and you don’t need to push F9
Edited Main CSS To Have It In The Top Right Of The Screen With Pop Down Animation For Job Title
.container {
display: block;
max-width: 15%;
position: fixed;
right: -109px;
top:70px;
}
.container2 {
display: block;
min-width: 225px!important;
width: auto!important;
position: fixed;
right: 0px;
top:-105px;
}
.item {
margin-top: -6px;
background-color: #ffffff77;
width: 140px;
height: 31px;
border-bottom: 1px solid #cc153d;
}
.item-job {
display: inline-block!important;
margin-top: 10px!important;
min-width: 136px!important;
width: auto!important;
}
.item-alert {
display: inline-block!important;
margin-top: 10px!important;
min-width: 136px!important;
width: auto!important;
border-top: 3px solid #cc153d!important;
border-bottom: unset!important;
margin-right: -278px;
opacity: 0;
}
.alerts .item-alert .bar {
background-color: #3377a4;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.06) 75%, transparent 75%, transparent);
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
-o-background-size: 40px 40px;
background-size: 40px 40px;
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
height: 31px;
width: 0px;
opacity: 0.7
}
.alerts {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
position: absolute;
right: 10px;
bottom: 150px;
}
.alert-text {
font-size: unset!important;
text-align: center;
padding-left:20px!important;
padding-right:20px;
margin-top: -29px!important;
opacity: 0.99;
}
.job-text {
padding-top: 6px!important;
margin-top: 0px!important;
padding-right: 8px!important;
font-size: unset!important;
}
.ammo-text {
margin-top: 1px!important;
}
.item-ammo {
top: 35px;
position: fixed;
right: 0px;
padding-right: 15px!important;
width: auto;
}
.dark.item-ammo {
border-top: 4px solid #cc153d!important;
}
.text {
padding-top: 4px;
padding-left: 34px;
text-transform: capitalize;
font-size: 18px;
}
.dark .item {
background-color: rgba(0, 0, 0, 0.432)!important;
border-bottom: unset!important;
border-top: 2px solid #cc153d;
margin-top: 6px!important;
}
.dark .text {
color: white;
}
.dark .text-right {
margin-top: 0px!important;
}
.dark img{
filter: brightness(1) invert(0.8);
}
img {
width: 24px;
position: fixed;
padding-top: 3px;
padding-left: 4px;
}
body {
font-family: 'Calibri', sans-serif;
font-weight: 400;
overflow: hidden;
}
Edit Your Main JS, Find Line 61 To 68 And Copy This And Replace It…
$('.container2').animate({
top: "+=105px"
}, 600, () => {
})
setTimeout(() => {
$('.container2').animate({
top: "-=105px"
}, 600)
Anyone Free To Use…