It's not possible to change them altogether, I believe-- however, it may be possible to get them changed only in when in your den page via CSS. I am not sure how you would do that, though, so I'd consider asking someone who's proficient with CSS about it (you can find people in here)!

You have liked this post!

To answer my own question and help others- I found it via 'inspect' function on my browser ^^
Careful, this is long!! hehe

Just copy and paste the segments into your code and don't forget to remove the * when putting it in your own CSS or it won't work!!

To change energy:
.progress-bar-warning {*
background: COLOUR HEX !important;
*}

To change hunger:
.progress-bar-danger {*
background: COLOUR HEX !important;
*}

To change EXP:
(note* this changes the PROGRESS bar as well. They have the same .tag and can't be individually changed ;c )
.progress-bar-success {*
background: COLOUR HEX !important;
*}

To change IMP:
.progress-bar {*
background: COLOUR HEX;
*}

To change the unfilled bar:
.progress {*
background: #8ca6f5;
*}


This is all just very simple stuff! Some extra code that changes appearance and makes it extra fancy (check my den for examples ssjsjsks):
gradient: background-image: linear-gradient(to right, COLOUR HEX , COLOUR HEX);
Glow: box-shadow: 0px 0px 40px 7px COLOUR HEX;
Rounded edges: border-radius: 100px;
Border: border: 1px solid COLOUR HEX;


And thats about it... if anyone needs help with anything, im happy to help as much as i can! :D

You have liked this post!