[FM21][MOD] Header Colours

[Wells]

I have seen a lot of people on asking how to get club colours back, while it is still possible to do, I decided to make this.

It's not that hard to get club colors in header, as you can see .

 

You will need header.xml, titlebar.xml and titlebar search panel.xml and this will work only with base skins made by @michaeltmurrayuk or skins that have not altered or modified the files I mentioned.

If you are not interested on how to modify these files and just want to download, please skip to the end of the post.

How to?

Alright, If you are indeed using base skin,  get header.xml, titlebar.xml from /fm/panels/generic in skins.fmf and titlebar search panel.xml from /generic in panels.fmf, put them into to your skin panels/generic folder.

1. Edit line 11 in header.xml and add this piece of code 

<container class="main_contrast_box_no_margin" red_replacement="primary">

This works fine for all clubs other than light ones, like Leeds, Spurs e.t.c, because the text and the buttons are colored in white.

To solve that, You will need to edit titlebar search panel.xml for texts and titlebar.xml for the buttons . 

2. In titlebar.xml, Usually you will find comments like <!-- Next Button --> relating to the button, below them and just after the widget line, add this piece of code 

<record id="primary_icon_properties" red_replacement="secondary" />

To these lines e.g.

For the quick flicks, you only need to change it to red_replacement="secondary" e.g.

3. In titlebar search panel.xml, we do the same, just find the <!-- title area --> and <!-- description -->  just below each of them, you will find widget, then you will only need to change the search icon to red_replacement="secondary" and text/desc to colour="secondary" at the end of the widget properties.

e.g.

Last but not least if you actually want the header to have effects/gradients like the image I posted above, it requires different step..

In line 11 of header.xml we change the class and also add an appearance property, then point it to file, which is a png file.

So it will read  e.g. 

<container class="main_box" appearance="boxes/custom/interface/titlebar/paper" red_replacement="primary" >

 

 

---

That's all... download it below and extract it to your skin folder.

1. No rounded corners

HMOD Final.zip

---

2. Rounded corners

HMOD Final (rc).zip

---

Optional customizations

These are not essentials, but only if you need to color the sidebar and matchday titlebar.

1. Sidebar normal and rounded

sidebar colored.zipsidebar colored (rc).zip

2. Matchday titlebar colored

matchday titlebar colored.zip

 

Edited December 10, 2020 by Wells

[lugui]

@Wells, thank you very much for creating this and taking the time to share this small tutorial.

I was looking for a fix like this and couldnt get anything going as my skills are limited.

I tried both the download fix and a version by myself with the tutorial and it worked just fine.

For some reason I still get the white text for the light clubs/screens (using the downloaded files), as image below (I wrote Lionel Messi there). But that is not a big deal for me, the main thing is perfect.

Once again, thanks!

 

[Wells]

26 minutes ago, lugui said:

@Wells, thank you very much for creating this and taking the time to share this small tutorial.

I was looking for a fix like this and couldnt get anything going as my skills are limited.

I tried both the download fix and a version by myself with the tutorial and it worked just fine.

For some reason I still get the white text for the light clubs/screens (using the downloaded files), as image below (I wrote Lionel Messi there). But that is not a big deal for me, the main thing is perfect.

Once again, thanks!

 

Lugui I have managed to fix the issue, just required to edit search box titlebar.xml in widgets folder.

I will be updating the download link.

 

[lugui]

18 minutos atrás, Wells disse:

Lugui I have managed to fix the issue, just required to edit search box titlebar.xml in widgets folder.

I will be updating the download link.

 

 

Worked just fine, thanks again!

[latrell]

thank you for this i really love having my teams colours it makes every club you manage unique and not feel the same. 

[PequenoGenio]

2 horas atrás, Wells disse:

I have seen a lot of people on asking how to get club colours back, while it is still possible to do, I decided to make this.

It's not that hard to get club colors in header, as you can see .

 

You will need header.xml, titlebar.xml and titlebar search panel.xml and this will work only with base skins made by @michaeltmurrayuk or skins that have not altered or modified the files I mentioned.

If you are not interested on how to modify these files and just want to download, please skip to the end of the post.

How to?

Alright, If you are indeed using base skin,  get header.xml, titlebar.xml from /fm/panels/generic in skins.fmf and titlebar search panel.xml from /generic in panels.fmf, put them into to your skin panels/generic folder.

1. Edit line 11 in header.xml and add this piece of code 

<container class="main_contrast_box_no_margin" red_replacement="primary">

This works fine for all clubs other than light ones, like Leeds, Spurs e.t.c, because the text and the buttons are colored in white.

To solve that, You will need to edit titlebar search panel.xml for texts and titlebar.xml for the buttons . 

2. In titlebar.xml, Usually you will find comments like <!-- Next Button --> relating to the button, below them and just after the widget line, add this piece of code 

<record id="primary_icon_properties" red_replacement="secondary" />

To these lines e.g.

For the quick flicks, you only need to change it to red_replacement="secondary" e.g.

3. In titlebar search panel.xml, we do the same, just find the <!-- title area --> and <!-- description -->  just below each of them, you will find widget, then you will only need to change the search icon to red_replacement="secondary" and text/desc to colour="secondary" at the end of the widget properties.

e.g.

Last but not least if you actually want the header to have effects/gradients like the image I posted above, it requires different step..

In line 11 of header.xml we change the class and also add an appearance property, then point it to file, which is a png file.

So it will read  e.g. 

<container class="main_box" appearance="boxes/custom/interface/titlebar/paper" red_replacement="primary" />

That's all... download it below and extract it to your skin panels folder.

Download Header Colours

First.. Congratulations on this...

Second... The continue butoon isn't possible to edit?

[Wells]

6 minutes ago, PequenoGenio said:

First.. Congratulations on this...

Second... The continue butoon isn't possible to edit?

It is possible to edit it and if people actually want it, I can make them look like the team colors 

[PequenoGenio]

1 minuto atrás, Wells disse:

It is possible to edit it and if people actually want it, I can make them look like the team colors 

please do it.. in my view it needs to be the oposite colours of the titlebar right?

Edited December 4, 2020 by PequenoGenio

[Wells]

1 hour ago, PequenoGenio said:

please do it.. in my view it needs to be the oposite colours of the titlebar right?

Give me few minutes, I will edit them and show the results.

Edit: still editing I will post when I finish.

Edited December 4, 2020 by Wells

[PequenoGenio]

2 minutos atrás, Wells disse:

Give me few minutes, I will edit them and show the results.

This image is from wich skin?

 

[iownyou]

4 hours ago, Wells said:

I have seen a lot of people on asking how to get club colours back, while it is still possible to do, I decided to make this.

It's not that hard to get club colors in header, as you can see .

 

You will need header.xml, titlebar.xml and titlebar search panel.xml and this will work only with base skins made by @michaeltmurrayuk or skins that have not altered or modified the files I mentioned.

If you are not interested on how to modify these files and just want to download, please skip to the end of the post.

How to?

Alright, If you are indeed using base skin,  get header.xml, titlebar.xml from /fm/panels/generic in skins.fmf and titlebar search panel.xml from /generic in panels.fmf, put them into to your skin panels/generic folder.

1. Edit line 11 in header.xml and add this piece of code 

<container class="main_contrast_box_no_margin" red_replacement="primary">

This works fine for all clubs other than light ones, like Leeds, Spurs e.t.c, because the text and the buttons are colored in white.

To solve that, You will need to edit titlebar search panel.xml for texts and titlebar.xml for the buttons . 

2. In titlebar.xml, Usually you will find comments like <!-- Next Button --> relating to the button, below them and just after the widget line, add this piece of code 

<record id="primary_icon_properties" red_replacement="secondary" />

To these lines e.g.

For the quick flicks, you only need to change it to red_replacement="secondary" e.g.

3. In titlebar search panel.xml, we do the same, just find the <!-- title area --> and <!-- description -->  just below each of them, you will find widget, then you will only need to change the search icon to red_replacement="secondary" and text/desc to colour="secondary" at the end of the widget properties.

e.g.

Last but not least if you actually want the header to have effects/gradients like the image I posted above, it requires different step..

In line 11 of header.xml we change the class and also add an appearance property, then point it to file, which is a png file.

So it will read  e.g. 

<container class="main_box" appearance="boxes/custom/interface/titlebar/paper" red_replacement="primary" />

That's all... download it below and extract it to your skin panels folder.

Download Header Colours

Quick thing, I downloaded this and extracted it to murrays base skin panels but its not working. Have I missed something?

[Wells]

1 hour ago, PequenoGenio said:

This image is from wich skin?

 

That is from my personal skin.

 

25 minutes ago, iownyou said:

Quick thing, I downloaded this and extracted it to murrays base skin panels but its not working. Have I missed something?

Try to clear the cache and reload skin.

[d3niz]

2 minutos atrás, Wells disse:

That is from my personal skin.

Can you release your skin? It's really nice plus the font.
Thank you!

[PequenoGenio]

2 horas atrás, Wells disse:

Give me few minutes, I will edit them and show the results.

Edit: still editing I will post when I finish.

Maybe this two controll date and continue:

 

It was nice to have the date and the button continue with the club colors but contrasting with the title bar. Title bar : primary is the text color and secondary=box. The date should also look like the title bar and the button with the secondary and the text with the primary color of the club.

 

oh is see you are already editing

Edited December 5, 2020 by PequenoGenio

[Marko1989]

Thank you man. Club colors really help me to get immersed into save I sometimes even choose clubs by colors.

I hope that somebody will able to make the sidebar to use secondary club color like it was earlier.

[Wells]

I have changed the date widget and continue button to reflect club colors, also download link is updated.

Edited December 5, 2020 by Wells

[PequenoGenio]

1 hora atrás, Wells disse:

I have changed the date widget and continue button to reflect club colors, also download link is updated.

[d3niz]

7 horas atrás, Wells disse:

I have changed the date widget and continue button to reflect club colors, also download link is updated.

Can you confirm the code is also changed?

[Doddo04]

Works this for  competitons too?

Edited December 5, 2020 by Doddo04

[Cizzu]

8 ore fa, Wells ha scritto:

I have changed the date widget and continue button to reflect club colors, also download link is updated.

Very very nice. Thanks!

[priority76]

@Wells This is awesome, thanks!  Any chance you could point me to instructions on how to change sidebar colour to match the titlebar?

[lembergman]

@Wells Thanks! How i can delete this header in 3D?

[Wells]

3 hours ago, lembergman said:

@Wells Thanks! How i can delete this header in 3D?

Edit header.xml, line 11 remove class="main_contrast_box_no_margin" red_replacement="primary" from the container, 

Then put it in line 3 of titlebar.xml container.

  

4 hours ago, priority76 said:

@Wells This is awesome, thanks!  Any chance you could point me to instructions on how to change sidebar colour to match the titlebar?

It is simple, get sidebar menu table.xml from panels.fmf / generic, put it to your skin.

find this <container class="main_box" appearance="boxes/custom/interface/sidebar/paper">

replace it with <container class="main_contrast_box_no_margin" red_replacement="primary">

 

  

On 05/12/2020 at 21:44, d3niz said:

Can you confirm the code is also changed?

Nothing changed for the essentials, only addition being continue/date widget being recolored.

Edited December 6, 2020 by Wells

[stevemc]

This really is superb work mate 

[priority76]

1 hour ago, Wells said:

It is simple

Indeed it was when you know how.  Thanks mate!

[priority76]

2 hours ago, Wells said:

Edit header.xml, line 11 remove class="main_contrast_box_no_margin" red_replacement="primary" from the container, 

Then put it in line 3 of titlebar.xml container.

How do you do this if you've replaced line 11 with:

<container class="main_box" appearance="boxes/custom/interface/titlebar/paper" red_replacement="primary" >

I tried putting this in line 3 of titlebar.xml but it broke the skin.

[Wells]

18 minutes ago, priority76 said:

How do you do this if you've replaced line 11 with:

<container class="main_box" appearance="boxes/custom/interface/titlebar/paper" red_replacement="primary" >

I tried putting this in line 3 of titlebar.xml but it broke the skin.

It should look like this, in titlebar.xml

<container class="main_contrast_box_no_margin" red_replacement="primary" navigation_container="true">

Also you mixed up the code and used OP post last code in titlebar.xml.

[priority76]

Sorry I'm useless at this sort of thing.  So I put this line in line 3 of titlebar.xml?

<container class="main_contrast_box_no_margin" red_replacement="primary" navigation_container="true">

And then what do I do with header.xml?

[Wells]

3 minutes ago, priority76 said:

Sorry I'm useless at this sort of thing.  So I put this line in line 3 of titlebar.xml?

<container class="main_contrast_box_no_margin" red_replacement="primary" navigation_container="true">

And then what do I do with header.xml?

Need to remove the properties of line 11 container so it is just reads <container>

Like this https://i.imgur.com/bzZsagT.png

[priority76]

Doing what I think you're suggesting is making my title bar disappear.  This is my titlebar.xml and header.xml

https://imgur.com/a/uNEafZj

[lembergman]

6 минут назад, priority76 сказал:

Doing what I think you're suggesting is making my title bar disappear.  This is my titlebar.xml and header.xml

https://imgur.com/a/uNEafZj

If it does, throw it off to me please.

[Wells]

 

3 minutes ago, priority76 said:

Doing what I think you're suggesting is making my title bar disappear.  This is my titlebar.xml and header.xml

https://imgur.com/a/uNEafZj

You have two containers on top of each other in line 3 and 4 in your titlebar.xml 

Remove line 4, so it reads https://i.imgur.com/my4BzEN.png

[RinusFM]

Great mod. I am loving it. Using it with base21-dark. Only little annoyance is there's still purple here and there, but the team-coloured header helps a lot. 

[priority76]

25 minutes ago, Wells said:

You have two containers on top of each other in line 3 and 4 in your titlebar.xml 

Remove line 4, so it reads https://i.imgur.com/my4BzEN.png

That's great, its working now.  Thanks for your help and patience.  One more question if I may. How do I change sidebar text to match the team secondary colour? At the moment it's always white.

[LolloViola]

Il 5/12/2020 in 01:08 , d3niz ha scritto:

Can you release your skin? It's really nice plus the font.
Thank you!

+1!

Seems really clean and the font is way better than original one.

[PequenoGenio]

11 horas atrás, priority76 disse:

That's great, its working now.  Thanks for your help and patience.  One more question if I may. How do I change sidebar text to match the team secondary colour? At the moment it's always white.

You need to extrat from panels the menubar and edit all the xml inside to secondary

[AtlasFR]

Hello Wells, thank you a lot for this !

I just have one question about your gradient effect, I love it and tried to do the same with your instructions but without success (I'm a noob and a French guy : not the best combo I agree).

Can you help me on this one ? Thank you (again) !

[priority76]

3 hours ago, PequenoGenio said:

You need to extrat from panels the menubar and edit all the xml inside to secondary

Thanks, that's got the icons changed but not the text or the separators.  Would you know what code to change to do that?

[PequenoGenio]

What separators?

[priority76]

1 hour ago, PequenoGenio said:

What separators?

The lines that separate the sections in the sidebar are white when I'd like them to be the club's secondary colour as well as the text.

[PequenoGenio]

In that same folder there is a separator file. Maybe you need do edit that file

[Wells]

Those separators in sidebar don't actually use the separator icon.xml file, it is hardcoded and can't be changed.

However, you can change the horizontal divider graphic, but I wouldn't advice you to do it as the game uses it in many different places.

Edited December 7, 2020 by Wells

[priority76]

2 hours ago, Wells said:

Those separators in sidebar don't actually use the separator icon.xml file, it is hardcoded and can't be changed.

However, you can change the horizontal divider graphic, but I wouldn't advice you to do it as the game uses it in many different places.

OK cheers, it's no big deal.  Do you have any idea how to change the text colour?

[Wells]

In sidebar menu table.xml, find colour="white" or "faded white" and change them to secondary.

[keysi]

On 05/12/2020 at 12:21, Wells said:

I have changed the date widget and continue button to reflect club colors, also download link is updated.

Am I right you don't have the title bar rounded on both sides? The square end would suit better than this, at least in my eyes at at puts me off using the coloured sidebar as well. Do you know how to make it? thank you.

Quote

In sidebar menu table.xml, find colour="white" or "faded white" and change them to secondary.

This, unfortunatelly, didn't change the text colour.

[priority76]

14 hours ago, Wells said:

In sidebar menu table.xml, find colour="white" or "faded white" and change them to secondary.

Excellent! That's my skin looking pretty much as I want it now, thanks for your help.

 

5 hours ago, keysi said:

This, unfortunatelly, didn't change the text colour.

If its the icons that you want changed you have to follow the instructions @PequenoGenio gave me a few posts up.

[Wells]

5 hours ago, keysi said:

Am I right you don't have the title bar rounded on both sides? The square end would suit better than this, at least in my eyes at at puts me off using the coloured sidebar as well. Do you know how to make it? thank you.

Indeed, am using a custom paper file for the title bar which is not rounded.

If you would like to remove those, you will simply need some little code changes in your header.xml or titlebar.xml if you are using the no-match-titlebar coloured version.

Simply change in your header.xml line 11 from

<container class="main_contrast_box_no_margin" red_replacement="primary">

to

<container class="main_box" appearance="boxes/custom/contrast/paper" red_replacement="primary" >

So it reads https://i.imgur.com/Xy0VYze.png

Quote

This, unfortunatelly, didn't change the text colour.

For this, you need your panels/menubar icons changed to be secondary.

[Wells]

On 07/12/2020 at 13:59, AtlasFR said:

Hello Wells, thank you a lot for this !

I just have one question about your gradient effect, I love it and tried to do the same with your instructions but without success (I'm a noob and a French guy : not the best combo I agree).

Can you help me on this one ? Thank you (again) !

First you need to get paper file (which is png) from sitoolkit\skins\fm-widgets\graphics\boxes\custom\interface\titlebar, then put it into your skin.

After that, all you need is to edit paper.png file it needs to be in red colour then add whatever effects you like.... I usually use photoshop, if you don't have that you can use also gimp which is free.

[AtlasFR]

il y a 42 minutes, Wells a dit :

First you need to get paper file (which is png) from sitoolkit\skins\fm-widgets\graphics\boxes\custom\interface\titlebar, then put it into your skin.

After that, all you need is to edit paper.png file it needs to be in red colour then add whatever effects you like.... I usually use photoshop, if you don't have that you can use also gimp which is free.

Hi Wells, thanks to you, I finally managed to figure out what to do to change the style of the titlebar. I just have to find a suitable pattern so that it is as clean as yours! (tests will start)

 

[keysi]

Perfect, thanks @Wells and @priority76 It works now.

If I will be able to add the "next fixture icon" back to the bottom of the sidebar, it will be perfect