Mod Request: Remove the thick black border around unit flags

[m_m_x]

Could someone please help in creating a mod to remove the thick black border around unit flags? I think this would give the flags a cleaner, visually appealing look. Thank you!

 

[Elhoim]

I just played the game with the update, and the tweak to the unit banners feels so much like programmers art. Basically, made by someone technical with no artistic sensibilities. The width of the border is too much, especially compare to the size in other borders, the inconsistent positioning and big size of the hp bar, it being just pure black, it all looks bad. For example, you can tell the visual inconsistencies while playing, with the commanders having a 3px wide border, the unit 4px and the health bar 2px. It's all over the place.

Hopefully someone with some knowledge of the UI can tweak it. If you set them all to 2px, cut the height of the HP bar, remove lower border and add a bit of transparency in the background, you get a much nicer result:

 

[512]

Hi,
This new unit flags design with the 1.1.1 patch is ugly, the thick opaque black outlines and the fat life bar are so bad
I really wish I could go back to the original design, does anyone know if that's possible with a mod?
Many many thanks to anyone will want to try !

 

[m_m_x]

I'm not sure what is going on with their UI/UX team- this is yet another example of poor design decision

 

[Elhoim]

I'm not sure what is going on with their UI/UX team- this is yet another example of poor design decision

It really feels there's no UI team, this seems made by some programmer and got the green from a design lead, without anyone from art approving it. No artist would make the border size inconsistent jajaja

 

[m_m_x]

100%

 

[Elhoim]

Flag Corps

Mar 28, 2025

better banners and flags

• beezany
• civ7 ui-mod
• Civ 7 - UI Mods

It's done! Thanks beezany!

 

[512]

Hi there,
thank you very much Elhoim for this link, and beezany for the mod
Sadly this mod doesn't improve the units and districts health bars (size and transparency)
I don't know anything about coding myself, but I tried to tinker something with some help of chatGPT...

Be careful, this isn't a mod, it's a modification of the game's source files.
If anyone can turn this into an easy-to-install mod for the community, that would be great
In the meantime, don't forget to create a backup of your original files before making any changes.

Here are the before/after screenshots, followed by the tutorial:

Modifications for unit flags
(Removing the thick black outlines, thinning the health bar and adding transparency its background)

File to modify :
C:\SteamLibrary\steamapps\common\Sid Meier's Civilization VII\Base\modules\base-standard\ui\unit-flags\unit-flags.css
(you can simply open this file with your Windows text editor and use ctrl+F to find the data to change)

Here are the changes, I've highlighted in bold the elements that have been modified or added)

1/
.unit-flag__shape {
background-size: 117%;
background-position: 50% 50%;

2/
.unit-flag__healthbar {
top: -0.1111111111rem;
background-color: #0A0A0AC7;
height: 0.42rem;

3/
.unit-flag__healthbar-inner {
background-color: #9bd371;
top: 0.1111111111rem;
bottom: 0.1111111111rem;
left: 0.1111111111rem;
right: 0.1111111111rem;
height: 0.20rem;
max-width: 89%;



Modifications for districts health bars
(Thinning the health bar, and adding transparency to its background)

File to modify :
C:\SteamLibrary\steamapps\common\Sid Meier's Civilization VII\Base\modules\base-standard\ui\district\district-health.css

Here are the changes :

1/
.district-health-bar {
position: relative;
width: 4.5555555556rem;
height: 0.6rem;
pointer-events: auto;
background-color: #0A0A0AC7;

2/
.district-health-bar-ink {
background-color: #9bd371;
height: 0.3rem;
position: absolute;
top: 50%;
transform: translateY(-50%);


And that's all
Hope this will work well for you,
feel free to adjust the datas according to your preferences

 

[m_m_x]

Hi there,
thank you very much Elhoim for this link, and beezany for the mod
Sadly this mod doesn't improve the units and districts health bars (size and transparency)
I don't know anything about coding myself, but I tried to tinker something with some help of chatGPT...

Be careful, this isn't a mod, it's a modification of the game's source files.
If anyone can turn this into an easy-to-install mod for the community, that would be great
In the meantime, don't forget to create a backup of your original files before making any changes.

Here are the before/after screenshots, followed by the tutorial:

View attachment 727347

View attachment 727348



Modifications for unit flags
(Removing the thick black outlines, thinning the health bar and adding transparency its background)

File to modify :
C:\SteamLibrary\steamapps\common\Sid Meier's Civilization VII\Base\modules\base-standard\ui\unit-flags\unit-flags.css
(you can simply open this file with your Windows text editor and use ctrl+F to find the data to change)

Here are the changes, I've highlighted in bold the elements that have been modified or added)

1/
.unit-flag__shape {
background-size: 117%;
background-position: 50% 50%;

2/
.unit-flag__healthbar {
top: -0.1111111111rem;
background-color: #0A0A0AC7;
height: 0.42rem;

3/
.unit-flag__healthbar-inner {
background-color: #9bd371;
top: 0.1111111111rem;
bottom: 0.1111111111rem;
left: 0.1111111111rem;
right: 0.1111111111rem;
height: 0.20rem;
max-width: 89%;



Modifications for districts health bars
(Thinning the health bar, and adding transparency to its background)

File to modify :
C:\SteamLibrary\steamapps\common\Sid Meier's Civilization VII\Base\modules\base-standard\ui\district\district-health.css

Here are the changes :

1/
.district-health-bar {
position: relative;
width: 4.5555555556rem;
height: 0.6rem;
pointer-events: auto;
background-color: #0A0A0AC7;

2/
.district-health-bar-ink {
background-color: #9bd371;
height: 0.3rem;
position: absolute;
top: 50%;
transform: translateY(-50%);


And that's all
Hope this will work well for you,
feel free to adjust the datas according to your preferences

This is awesome, thanks!

 

[512]

Hi,
I noticed today that the proposed changes may create an alignment problem with hostile unit flags,
so here is a way of correcting this,
as well as another setting to slightly improve the outline of army commander flags which were a little too thin...


Concerned file is "unit-flags.css", added elements are in bold below :

1/
.unit-flag--hostile .unit-flag__shadow {
background-image: url("fs://game/unit_support-shadow_red.png");
background-size: 113%;
background-position: center;
top: -0.083rem;

2/
.unit-flag--army .unit-flag__shadow {
background-image: url("fs://game/unit_commander-shadow.png");
background-size: 108%;
background-position: center;


Result for hostile units:

And for the army commander :

 

[m_m_x]

@512 Do you know how to adjust the positioning of the health bar above the unit flag?

 

[512]

Hi @m_m_x ,

it seems that this value affects the distance between the health bar and the flag for combat units :
(higher value will increase distance : "-5" for exemple will place the health bar far above)

.unit-flag--combat .unit-flag__healthbar {
top: -0.3333333333rem;
width: 1.5555555556rem;
left: 0.1666666667rem;


And it seems that you can adjust this value independently for different unit types (civilizan, hostile, ...)
Don't hesitate to copy / paste the whole text of the ‘unit-flags.css’ file into ChatGPT to ask for changes, it makes it easier to identify and adjust things

 

[m_m_x]

Thanks!