Jump to content

[FM22][Beta] Sidebar background colour


BuzzR
 Share

Recommended Posts

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.

beaf8cdf95e11aa658b1ef820774c6a1.thumb.png.05b0a0037f836a59b9c307d03ef6a243.png

 

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

 

Link to post
Share on other sites

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. 

Link to post
Share on other sites

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 !!! 

 

Link to post
Share on other sites

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:

cda7b94513ff6b1e62628520c72877f8.thumb.png.e6176257d1bc809469891e482e895745.png

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.

 

 

Link to post
Share on other sites

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??

Link to post
Share on other sites

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

 

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

 

Link to post
Share on other sites

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

 

image.png.9d61cca723dd810f838f64c6332e440b.png

 

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

 

image.png.a448643ee3392ed8457ba7d3285f79ff.png

 

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>

 

Link to post
Share on other sites

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!

Link to post
Share on other sites

 

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. :)

sidbar note.png

Link to post
Share on other sites

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. :)

sidbar note.png

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. 

 

Link to post
Share on other sites

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. 

Link to post
Share on other sites

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 by BuzzR
removed unnecessary info
Link to post
Share on other sites

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 :

 

 

Link to post
Share on other sites

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!

Link to post
Share on other sites

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?

Link to post
Share on other sites

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.

Link to post
Share on other sites

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. 

Link to post
Share on other sites

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 by Razoor1860
Link to post
Share on other sites

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">

Link to post
Share on other sites

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 :)

Link to post
Share on other sites

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?

Link to post
Share on other sites

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!!

Link to post
Share on other sites

  • 3 weeks later...
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?

Link to post
Share on other sites

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

Link to post
Share on other sites

 

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.

 

Link to post
Share on other sites

  • 3 weeks later...
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

Link to post
Share on other sites

  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

This site uses cookies - We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.