[FM22][Beta] Sidebar background colour

[BuzzR]

Hi.

I am trying to change the purple(?) background of the sidebar and I cannot identify how it's controlled. 

It looks a little bit different this year.. I think there is another background behind the panels. I don't know. I've tried changing some values in the skin settings, I've tried adding red_replacement to some containers in client_object_browser with no result.

 

[wkdsoul]

try the sidebar menu panel.xml in the generic folder. 

[BuzzR]

16 minutes ago, wkdsoul said:

try the sidebar menu panel.xml in the generic folder. 

Thank you for your answer. It doesn't seem to be in here unfortunately. 

<panel>
	<layout class="stick_to_sides_attachment" apply_to_children="true" alignment="all" />
	<container>
		<attachment_group class="horizontal_arrange" horizontal_gap="0"/>
		<widget class="menu" id="prim" fixed="true" navigation_focus_target="true" width="240" clear_on_hide="false" appearance="menus/custom/interface/full screen" inherit_appearance="true" is_modal="false" disable_standalone="true" red_replacement="bg darker">
			<attachment class="get_global_attachment" get_property="SMen" set_property="itms"/>
		</widget>
	</container>
</panel>

red_replacement="bg darker" should have done something, as I've changed "bg darker" in skin settings.xml

[michaeltmurrayuk]

There have been some changes to how the sidebar works in FM22.

It is now transparent so it uses the colour of your background (there is also a separate purple or yellow pattern to the background).

To change the background you just need to re-enable the actual sidebar graphic, to this the file you need to edit is the sidebar menu table xml file found in the panels\generic folder that you'll need to extract from the panels fmf file.

In that file locate this file near the top (line #9):

<container>

And change it to something like this:

<container class="main_box" appearance="boxes/custom/interface/sidebar/paper" red_replacement="XXX">

That will now make the sidebar use the graphic from the above appearance line (same graphic as FM21) and you can add a colour in the red_replacement bit to recolour the sidebar.

The rest of the stuff should be changeable like normal so the older guides should still apply.

[BuzzR]

57 minutes ago, michaeltmurrayuk said:

<container class="main_box" appearance="boxes/custom/interface/sidebar/paper" red_replacement="XXX">

That will now make the sidebar use the graphic from the above appearance line (same graphic as FM21) and you can add a colour in the red_replacement bit to recolour the sidebar.

The rest of the stuff should be changeable like normal so the older guides should still apply.

This does it, thank you.

1 hour ago, michaeltmurrayuk said:

There have been some changes to how the sidebar works in FM22.

It is now transparent so it uses the colour of your background (there is also a separate purple or yellow pattern to the background).

Is there a way to control the purple colour of the background pattern - some kind of skin settings colour value definition ? The pattern is nice, the colour I found it difficult to watch .

I think the yellow pattern is related to the team and it's "under" the central panel.

[TCSSkin]

1 hour ago, BuzzR said:

This does it, thank you.

Is there a way to control the purple colour of the background pattern - some kind of skin settings colour value definition ? The pattern is nice, the colour I found it difficult to watch .

I think the yellow pattern is related to the team and it's "under" the central panel.

just edit the hue of the graphic in something like photoshop or paint.net

[BuzzR]

4 minutes ago, bluestillidie00 said:

just edit the hue of the graphic in something like photoshop or paint.net

I don't think that's the way.. from my understanding.

From what I've managed to dig around (maybe I'm wrong ):

There is a file somewhere in the default skin(s) folder that holds the pattern - paper.png that is rendered by the client_object_browser. This paper.png has a paper.xml configuration file where 3 values are defined to draw colours:

<colour id="red_replacement" name="primary"/>
<colour id="green_replacement" name="bg"/>
<colour id="blue_replacement" name="black"/>

The thing is that I've found this files in "skins\fmc switch\graphics\boxes\custom\interface\content". There are none in "fm skin".

Moving them into the graphics folder of my skin, crashed the game. So most likely I'm doing something wrong or I am not understanding the system.

 

[TCSSkin]

3 minutes ago, BuzzR said:

I don't think that's the way.. from my understanding.

From what I've managed to dig around (maybe I'm wrong ):

There is a file somewhere in the default skin(s) folder that holds the pattern - paper.png that is rendered by the client_object_browser. This paper.png has a paper.xml configuration file where 3 values are defined to draw colours:

<colour id="red_replacement" name="primary"/>
<colour id="green_replacement" name="bg"/>
<colour id="blue_replacement" name="black"/>

The thing is that I've found this files in "skins\fmc switch\graphics\boxes\custom\interface\content". There are none in "fm skin".

Moving them into the graphics folder of my skin, crashed the game. So most likely I'm doing something wrong or I am not understanding the system.

 

no so you want to extract sitoolkit.fmf. Inside there there’s a folder called skins, then fm-widgets. 

Inside there is the fm base skin, go into graphics/backgrounds, it’ll be in there. 

The actual graphic will be purple, so you’ll either need to edit it to make it red like i did, or just edit the colour to be what you want it too. 

[BuzzR]

3 minutes ago, bluestillidie00 said:

no so you want to extract sitoolkit.fmf. Inside there there’s a folder called skins, then fm-widgets. 

Inside there is the fm base skin, go into graphics/backgrounds, it’ll be in there. 

The actual graphic will be purple, so you’ll either need to edit it to make it red like i did, or just edit the colour to be what you want it too. 

Thank you !! Yes yes yes !!! 

 

[BuzzR]

Just to add, there are 2 other files that should/ could be changed from graphics\boxes\custom\interface\background pattern :

paper.png and/or paper@2x.png .

This is some messing around with green:

So for anyone interested:

1. Extract sitoolkit.fmf

2. Get the files default.png and/or default@2x.png from skins\fm-widgets\graphics\backgrounds. Edit the files to what colour you want. 

3. Get the files paper.png and/or paper@2x.png from \skins\fm-widgets\graphics\boxes\custom\interface\background pattern . Edit the files to what colour you want.

4. Copy files to your (skin) graphics folder with the correct path as graphics\backgrounds and graphics\boxes\custom\interface\background pattern.

 

Thank you @michaeltmurrayuk and @bluestillidie00 for your help.

 

 

[statomatic7]

20 hours ago, michaeltmurrayuk said:

There have been some changes to how the sidebar works in FM22.

It is now transparent so it uses the colour of your background (there is also a separate purple or yellow pattern to the background).

To change the background you just need to re-enable the actual sidebar graphic, to this the file you need to edit is the sidebar menu table xml file found in the panels\generic folder that you'll need to extract from the panels fmf file.

In that file locate this file near the top (line #9):

<container>

And change it to something like this:

<container class="main_box" appearance="boxes/custom/interface/sidebar/paper" red_replacement="XXX">

That will now make the sidebar use the graphic from the above appearance line (same graphic as FM21) and you can add a colour in the red_replacement bit to recolour the sidebar.

The rest of the stuff should be changeable like normal so the older guides should still apply.

@michaeltmurrayuk   I have tried this and for some reason my whole sidebar vanishes when i edit the line you have mentioned, any ideas what i'm doing wrong??

[michaeltmurrayuk]

@statomatic7 Check that you didn't make a typo in the file - not closing the tags or missing a " is a common mistake. If your not sure past the contents of the file into a post and someone will be able to double check your code for you.

[statomatic7]

1 minute ago, michaeltmurrayuk said:

@statomatic7 Check that you didn't make a typo in the file - not closing the tags or missing a " is a common mistake. If your not sure past the contents of the file into a post and someone will be able to double check your code for you.

     Hey, sorry I've managed to sort it with help from @BuzzR

 

[Watson156]

On 23/10/2021 at 18:59, BuzzR said:

This does it, thank you.

Is there any chance that you could upload your Sidebar Panel and the subsequent graphics for a solid sidebar. The one that I had last year doesn't seem to want to work anymore. Thanks

[BuzzR]

9 hours ago, Watson156 said:

Is there any chance that you could upload your Sidebar Panel and the subsequent graphics for a solid sidebar. The one that I had last year doesn't seem to want to work anymore. Thanks

Here is an example with red_replacement="bg accent" . 

No changes for graphics files needed. It looks like the game doesn't like rgb(r,g,b) definition in red_replacement , for some reason. 

Define/change a colour in skin configuration file and use it with red_replacement. 

sidebar menu table.xml

[Watson156]

5 hours ago, BuzzR said:

Here is an example with red_replacement="bg accent" . 

No changes for graphics files needed. It looks like the game doesn't like rgb(r,g,b) definition in red_replacement , for some reason. 

Define/change a colour in skin configuration file and use it with red_replacement. 

sidebar menu table.xml 7.18 kB · 11 downloads

Perfect, thanks a lot.

[SkaldfraNorden]

Sorry if it's answered already, but any way to make it change the colour depending on club background colour?

[BuzzR]

1 hour ago, SkaldfraNorden said:

Sorry if it's answered already, but any way to make it change the colour depending on club background colour?

If you want a solid sidebar use red_replacement="secondary" with this

On 30/10/2021 at 12:15, BuzzR said:

Here is an example with red_replacement="bg accent" . 

No changes for graphics files needed. It looks like the game doesn't like rgb(r,g,b) definition in red_replacement , for some reason. 

Define/change a colour in skin configuration file and use it with red_replacement. 

sidebar menu table.xml 7.18 kB · 33 downloads

 

[SkaldfraNorden]

1 hour ago, BuzzR said:

If you want a solid sidebar use red_replacement="secondary" with this

 

Thanks! I managed to set it to primary colour, actually, as it aligns with the top right pattern and change the text to secondary

 

 

However, icons stay white, at it is an issue with the teams who have white as either primary/secondary colour, like this:

 

 

I changed the bit here to colour="secondary", it worked with the text, but not with the icons

<!--club table-->
            <container id="CLUB">
                <layout class="arrange_vertical_attachment" alignment="bottom,extend" gap="0" offset="0"/>
                <layout class="stick_to_sides_attachment" alignment="horizontal" inset="0" apply_to_children="true" />

                <widget class="table" id="club" mode="select_rows,fill_rows,hide_headings,dont_allow_click_unselect_single,drag_rows,drop_on_rows,insert_on_drop,highlight_on_scroll,dont_allow_clear_selection" auto_size_rows="true" fixed_size_rows="false" navigation_focus_target="true">
                    <list id="column_table_properties">
                        <record width="-1" column_heading="Icon">
                            <record id="column_widget_properties" colour="secondary" />
                        </record>
                        <record width="-3" minimum_width="100" column_heading="Name">
                            <record id="column_widget_properties" alignment="left,centre_y" colour="secondary"  size="normal">
                                <record id="secondary_text_properties" alignment="left,top"  size="normal"/>
                            </record>
                        </record>
                    </list>
                </widget>

                <widget class="table" id="cluF" mode="select_rows,fill_rows,hide_headings,dont_allow_click_unselect_single" auto_size_rows="true" fixed_size_rows="false" auto_size="vertical" highlighted_appearance="tables/custom/sidebar/over/row">
                    <list id="column_table_properties">
                        <record width="-1" column_heading="Icon">
                            <record id="column_widget_properties"  colour="secondary" />
                        </record>
                        <record width="-3" minimum_width="100" column_heading="Name">
                            <record id="column_widget_properties" alignment="left,centre_y" colour="secondary" font="title" size="small" gap="0" >
                                <record id="secondary_text_properties" alignment="left,top" size="normal" />
                            </record>
                        </record>
                    </list>
                </widget>

 

[Watson156]

You will need to use the resource extractor and look in the panels folder for the menubar folder. In there will be xml files for each individual icon. You will then just need to go into each xml file and change the following line:

    <widget class="picture" id="pict" file="icons/26px/data hub" image_alignment="centre" red_replacement="secondary"/>

The bold bit is what I have mine set to, but obviously you can change yours to whatever you want.

Hope that helps/makes sense!

[SkaldfraNorden]

Thanks a bunch, working perfectly now!

[NorsemanLP]

 

Hi guys

I know the forum here for a long time, but I'm just now making my first post. :)

I'm currently working on a skin for a friend. So far I have only done this to customize some skins for me a little more, but not as much as I do now.

Therefore, I have my first question here. I hope it's ok that I post this here in the thread. My question also has to do with the sidebar, so I didn't want to open a new thread.

I would like to change the color of the notification, as shown in the screenshot. Where can I find the code to do this?

Thank you guys in advance for your help. :)

[BuzzR]

5 hours ago, NorsemanLP said:

 

Hi guys

I know the forum here for a long time, but I'm just now making my first post.

I'm currently working on a skin for a friend. So far I have only done this to customize some skins for me a little more, but not as much as I do now.

Therefore, I have my first question here. I hope it's ok that I post this here in the thread. My question also has to do with the sidebar, so I didn't want to open a new thread.

I would like to change the color of the notification, as shown in the screenshot. Where can I find the code to do this?

Thank you guys in advance for your help.

Hi.

You need to extract sitoolkit.fmf.

Find  skins\fm-widgets\graphics\buttons\custom\interface\notification folder and there you have button.xml.

Change red_replacement to your liking. 

 

[jimbo22]

On 06/11/2021 at 14:50, Watson156 said:

You will need to use the resource extractor and look in the panels folder for the menubar folder. In there will be xml files for each individual icon. You will then just need to go into each xml file and change the following line:

    <widget class="picture" id="pict" file="icons/26px/data hub" image_alignment="centre" red_replacement="secondary"/>

The bold bit is what I have mine set to, but obviously you can change yours to whatever you want.

Hope that helps/makes sense!

Rather than start a new thread. 

 

I've got to the point where I have the club coloured side bar, have the text the secondary but cannot find the menubar folder so that I can change the icon colour. Any help would be appreciated. Im a complete novice here and know its something silly im doing/not doing. 

[BuzzR]

28 minutes ago, jimbo22 said:

Rather than start a new thread. 

 

I've got to the point where I have the club coloured side bar, have the text the secondary but cannot find the menubar folder so that I can change the icon colour. Any help would be appreciated. Im a complete novice here and know its something silly im doing/not doing. 

Hi. 

You have to extract panels.fmf with the Resource Archiver , and you will find the menubar folder.

You will look at the xmls there as @Watson156 said and find what you need.

 

 

Edited November 12, 2021 by BuzzR
removed unnecessary info

[jimbo22]

Yeah, Im a complete novice, as I said. I've clicked on a ton of stuff. Cant find the panels.fmf to extract. Thanks for the help. I will continue to mess around with it and hope that I come across that file. 

[BadAss88]

On 06/11/2021 at 23:48, SkaldfraNorden said:

Thanks a bunch, working perfectly now!

Wanna share your sidebar? As this is exactly what I'm after!

[SkaldfraNorden]

12 minutes ago, BadAss88 said:

Wanna share your sidebar? As this is exactly what I'm after!

Sure, see below.

If you want to flip colours of the icons and text, just invert "primary" and "secondary" values

colored_sidebar.rar

[BuzzR]

1 hour ago, jimbo22 said:

Yeah, Im a complete novice, as I said. I've clicked on a ton of stuff. Cant find the panels.fmf to extract. Thanks for the help. I will continue to mess around with it and hope that I come across that file. 

if you have steam .. should be like this : C:\Program Files (x86)\Steam\steamapps\common\Football Manager 2022\data\game\panels.fmf

Use the resource archiver ( installed with steam - free tool with football manager ) to select panels.fmf and extract it somewhere. Where you extract it you will find the the folders mentioned erlier.

 You could start reading these guides :

 

 

[PT-KK]

Is it possible to do this on the titlebar as well? I've been trying around and don't know what to change, to be honest.

[silentjay]

En 23/10/2021 a las 13:54, michaeltmurrayuk dijo:

There have been some changes to how the sidebar works in FM22.

It is now transparent so it uses the colour of your background (there is also a separate purple or yellow pattern to the background).

To change the background you just need to re-enable the actual sidebar graphic, to this the file you need to edit is the sidebar menu table xml file found in the panels\generic folder that you'll need to extract from the panels fmf file.

In that file locate this file near the top (line #9):

<container>

And change it to something like this:

<container class="main_box" appearance="boxes/custom/interface/sidebar/paper" red_replacement="XXX">

That will now make the sidebar use the graphic from the above appearance line (same graphic as FM21) and you can add a colour in the red_replacement bit to recolour the sidebar.

The rest of the stuff should be changeable like normal so the older guides should still apply.

I have a bit of a doubt:

I've some experience worikng and editing skins, but I don't have overall knowledge of the details in order to male true editing.

FM22 seems to have a different setup as it comes to their skin and background. It seems there's one big card in front of the main purple background.

How can I edit the background or remove this giant card to have one solid background for everything?

 

Thanks!

[jimbo22]

getting a few things changed to how I like it. couple of quick question for anyone in the know. I prefer the club color side bar with the secondary colour being the icons, which is how I have it. First question is that when I go to icons only the icons completely disappear and its just a solid colour. second question is, is there a simple way to add transparency to the side bar or would I have to edit the background pic that currently seems to be the coloured part on the side bar?

[BuzzR]

55 minutes ago, jimbo22 said:

second question is, is there a simple way to add transparency to the side bar or would I have to edit the background pic that currently seems to be the coloured part on the side bar?

Isn't the sidebar transparent by default .. showing the background picture? So the easy way - for me at least - was to change the background file to a colour I like. 

If you want to keep your primary colour for the sidebar and add transparency maybe add transparency="0.X" to the main_box container , see how it works.

[jimbo22]

3 hours ago, BuzzR said:

If you want to keep your primary colour for the sidebar and add transparency maybe add transparency="0.X" to the main_box container , see how it works.

That worked. It was set up to be solid from top to bottom of the screen but by adding the transparency part to the end of the line its now given it a slight see through look and looks much better with the rest of the game. 

[Razoor1860]

Am 23.10.2021 um 18:54 schrieb michaeltmurrayuk:

There have been some changes to how the sidebar works in FM22.

It is now transparent so it uses the colour of your background (there is also a separate purple or yellow pattern to the background).

To change the background you just need to re-enable the actual sidebar graphic, to this the file you need to edit is the sidebar menu table xml file found in the panels\generic folder that you'll need to extract from the panels fmf file.

In that file locate this file near the top (line #9):

<container>

And change it to something like this:

<container class="main_box" appearance="boxes/custom/interface/sidebar/paper" red_replacement="XXX">

That will now make the sidebar use the graphic from the above appearance line (same graphic as FM21) and you can add a colour in the red_replacement bit to recolour the sidebar.

The rest of the stuff should be changeable like normal so the older guides should still apply.

 

i have a Question.. i would chance my sidebar colour but i have no "sidebar menu table.xml" file in my hole skin folder. Whats here wrong?

Edited November 22, 2021 by Razoor1860

[statomatic7]

1 hour ago, Razoor1860 said:

i have a Question.. i would chance my sidebar colour but i have no "sidebar menu table.xml" file in my hole skin folder. Whats here wrong?

You will need to extract the file using the FM22 Resource Archiver tool

[statomatic7]

4 minutes ago, statomatic7 said:

You will need to extract the file using the FM22 Resource Archiver tool

Or you can just use this and place it in your generic folder for the skin you are using 

sidebar menu table.zip

[Razoor1860]

vor 14 Minuten schrieb statomatic7:

Or you can just use this and place it in your generic folder for the skin you are using 

sidebar menu table.zip 1 kB · 1 download

thx a lot. 

i tried your side bar and i like the team icon on the left

but can you tell me how i can chance the "club colour" on the side bar to the "standard grey" like in the fm 21 dark basic skin?

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

[statomatic7]

1 minute ago, Razoor1860 said:

thx a lot. 

i tried your side bar and i like the team icon on the left

but can you tell me how i can chance the "club colour" on the side bar to the "standard grey" like in the fm 21 dark basic skin?

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

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

 

I believe that you need to edit the red_replacement part of that line to what colour you want, try having a play with the colour

[Razoor1860]

vor 3 Minuten schrieb statomatic7:

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

 

I believe that you need to edit the red_replacement part of that line to what colour you want, try having a play with the colour

i got in grey. But now is the Font Colour Black (from your settings) do you know how i get the Font Colour to white?

[statomatic7]

3 minutes ago, Razoor1860 said:

i got in grey. But now is the Font Colour Black (from your settings) do you know how i get the Font Colour to white?

<symbol id="sidebar_secondary_colour" value="secondary" />
    

I think you will need to edit that line change the end part from secondary to white possibly!!

[RogerC]

On 22/11/2021 at 18:54, statomatic7 said:

Or you can just use this and place it in your generic folder for the skin you are using 

sidebar menu table.zip 1.74 kB · 7 downloads

Thanks man, do you know how to edit the team logo size? Haven't had any luck.

[rushdengooner]

On 30/10/2021 at 10:15, BuzzR said:

Here is an example with red_replacement="bg accent" . 

No changes for graphics files needed. It looks like the game doesn't like rgb(r,g,b) definition in red_replacement , for some reason. 

Define/change a colour in skin configuration file and use it with red_replacement. 

sidebar menu table.xml 7.18 kB · 90 downloads

Hi

Where is the file placed please?

[BuzzR]

8 hours ago, rushdengooner said:

Hi

Where is the file placed please?

Hi.

It goes to \panels\generic\ folder.

[TupacShakur]

 

 

 

Friends, I want the team color to be on the left side and on the top. fm 2020 was it. Please download ready as skins.rar, I can't. I pray a lot for those involved. thanks

 

fm 2022 base skins. rar pleaseeeee

Edited December 24, 2021 by TupacShakur

[Ricketts147]

Im trying to replace the sidebar faded purple/pink colours to that of club primary/secondary colours whilst keeping everything else as the original as in baseskin22.

Id still like it to fade out and be transparent so I can see my background image, just change the colour of it to the clubs primary/secondary colours.

Any help on how I can do this and which files/code I need to amend would be greatly appreciated.

Many Thanks

[BuzzR]

 

9 minutes ago, Ricketts147 said:

Im trying to replace the sidebar faded purple/pink colours to that of club primary/secondary colours whilst keeping everything else as the original as in baseskin22.

Id still like it to fade out and be transparent so I can see my background image, just change the colour of it to the clubs primary/secondary colours.

Any help on how I can do this and which files/code I need to amend would be greatly appreciated.

Many Thanks

Hi. 

Use this, changing the red_replacement value to primary or secondary : red_replacement="primary"

On 30/10/2021 at 12:15, BuzzR said:

Here is an example with red_replacement="bg accent" . 

No changes for graphics files needed. It looks like the game doesn't like rgb(r,g,b) definition in red_replacement , for some reason. 

Define/change a colour in skin configuration file and use it with red_replacement. 

sidebar menu table.xml 7.18 kB · 102 downloads

For transparency use this property for the container: transparency="0.5" for example.

On 16/11/2021 at 19:14, BuzzR said:

Isn't the sidebar transparent by default .. showing the background picture? So the easy way - for me at least - was to change the background file to a colour I like. 

If you want to keep your primary colour for the sidebar and add transparency maybe add transparency="0.X" to the main_box container , see how it works.

 

[Ricketts147]

BuzzR thanks very much thats worked.

I had read all the previous thread but was getting in a right mess trying to sort it.

Many Thanks!

[Olas Nick]

On 23/10/2021 at 19:54, michaeltmurrayuk said:

In that file locate this file near the top (line #9):

<container>

And change it to something like this:

<container class="main_box" appearance="boxes/custom/interface/sidebar/paper" red_replacement="XXX">

This works partially. In regime Sidebar icons-only Sidebar is blank if use 85% or 95% zoom

[TupacShakur]

 

I'm so sorry guys

 

in which file to have sidebar team colors