Home Screen editing

[EnigMattic1]

I can't help but think that the home screen is wasted. Is it possible (and if so, how difficult) to change the appearance so the 3 columns that currently show as "Player Stats", "Pending Transfers" and "Finance & Salary" are actually 2 rows of 3 boxes half the size?

Next question. should the above be possible, how would I then go about adding some analysis polygons to this page?

[GIMN]

I promise this isn't a shameless plug of my own skin, but YES this is possible.  Whilst, it's not the same layout exactly, I'll show what I've done:

To start with, it's broken into 2 rows (white)

Then the bottom row, is split into 3 columns (blue)

The middle column, split into 2 rows (green)

And the bottom row of the middle column, split into 2 columns (pink)

This is how I would go about achieving this:

<panel save_session_state='true'>
	<layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true" />
	
	<!--THIS SPLITS THE PANEL INTO ROWS-->
	<container class="vertical_adaptive_container" gap="0" mode="distribute_equally">

		<!--TOP ROW, NEED TO SET HEIGHT-->
		<container default_height="250>
			<!--top row contents here-->
		</container>
		
		<!--THIS SPLITS THE BOTTOM ROW INTO MULTIPLE COLUMNS, NEED TO SET HEIGHT-->
		<container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
		
			<!--LEFT COLUMN, NEED TO SET WIDTH-->
			<container default_width="-1">
				<!--left column contents/selector here-->
			</container>
			
			<!--MIDDLE COLUMN IS SPLIT AGAIN, NEED TO SET WIDTH-->
			<container class="vertical_adaptive_container" gap="0" mode="distribute_equally" default_width="-2">
				
				<!--TOP ROW, NEED TO SET HEIGHT-->
				<container default_height="-1">
					<!--middle column, top row contents/selector here-->
				</container>
				
				<!--BOTTOM ROW IS SPLIT AGAIN, NEED TO SET HEIGHT-->
				<container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
				
					<!--LEFT COLUMN, NEED TO SET WIDTH-->
					<container default_width="-1">
						<!--middle column, bottom left contents/selector here-->
					</container>
					
					<!--RIGHT COLUMN, NEED TO SET WIDTH-->
					<container default_width="-1">
						<!--middle column, bottomr right contents/selector here-->
					</container>				
				
				</container>				
			</container>
			
			<!--RIGHT COLUMN, NEED TO SET WIDTH-->
			<container default_width="-1">
				<!--right column contents/selector here-->
			</container>
		
		</container>
			
	</container>

</panel>

Note that the middle column is twice as wide as the left or right columns.  This essentially is like splitting the space into 4.  By using "-2" for the middle and "-1" for the left and right columns, I am telling it that the middle column is twice as big.  If you are trying to work things out in terms of percentages, you don't need to keep to low numbers.  For example, if I wanted the left column to take up 32% of the space, the middle column to take up 40% and the right column to take up 28% I could use "-8", "-10" and "-7" or "-32", "-40" and "-28".  Both would achieve the same thing and also means you don't have to be exact with pixels.

Using this approach, you can obviously change the layout to your desire!

Regarding analysis polygons, I'm going to have to pass that over to someone a lot better than I am!!

 

[EnigMattic1]

24 minutes ago, GIMN said:

I promise this isn't a shameless plug of my own skin, but YES this is possible.  Whilst, it's not the same layout exactly, I'll show what I've done:

To start with, it's broken into 2 rows (white)

Then the bottom row, is split into 3 columns (blue)

The middle column, split into 2 rows (green)

And the bottom row of the middle column, split into 2 columns (pink)

This is how I would go about achieving this:

<panel save_session_state='true'>
	<layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true" />
	
	<!--THIS SPLITS THE PANEL INTO ROWS-->
	<container class="vertical_adaptive_container" gap="0" mode="distribute_equally">

		<!--TOP ROW, NEED TO SET HEIGHT-->
		<container default_height="250>
			<!--top row contents here-->
		</container>
		
		<!--THIS SPLITS THE BOTTOM ROW INTO MULTIPLE COLUMNS, NEED TO SET HEIGHT-->
		<container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
		
			<!--LEFT COLUMN, NEED TO SET WIDTH-->
			<container default_width="-1">
				<!--left column contents/selector here-->
			</container>
			
			<!--MIDDLE COLUMN IS SPLIT AGAIN, NEED TO SET WIDTH-->
			<container class="vertical_adaptive_container" gap="0" mode="distribute_equally" default_width="-2">
				
				<!--TOP ROW, NEED TO SET HEIGHT-->
				<container default_height="-1">
					<!--middle column, top row contents/selector here-->
				</container>
				
				<!--BOTTOM ROW IS SPLIT AGAIN, NEED TO SET HEIGHT-->
				<container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
				
					<!--LEFT COLUMN, NEED TO SET WIDTH-->
					<container default_width="-1">
						<!--middle column, bottom left contents/selector here-->
					</container>
					
					<!--RIGHT COLUMN, NEED TO SET WIDTH-->
					<container default_width="-1">
						<!--middle column, bottomr right contents/selector here-->
					</container>				
				
				</container>				
			</container>
			
			<!--RIGHT COLUMN, NEED TO SET WIDTH-->
			<container default_width="-1">
				<!--right column contents/selector here-->
			</container>
		
		</container>
			
	</container>

</panel>

Note that the middle column is twice as wide as the left or right columns.  This essentially is like splitting the space into 4.  By using "-2" for the middle and "-1" for the left and right columns, I am telling it that the middle column is twice as big.  If you are trying to work things out in terms of percentages, you don't need to keep to low numbers.  For example, if I wanted the left column to take up 32% of the space, the middle column to take up 40% and the right column to take up 28% I could use "-8", "-10" and "-7" or "-32", "-40" and "-28".  Both would achieve the same thing and also means you don't have to be exact with pixels.

Using this approach, you can obviously change the layout to your desire!

Regarding analysis polygons, I'm going to have to pass that over to someone a lot better than I am!!

 

Cheers

[TCSSkin]

35 minutes ago, GIMN said:

I promise this isn't a shameless plug of my own skin, but YES this is possible.  Whilst, it's not the same layout exactly, I'll show what I've done:

To start with, it's broken into 2 rows (white)

Then the bottom row, is split into 3 columns (blue)

The middle column, split into 2 rows (green)

And the bottom row of the middle column, split into 2 columns (pink)

This is how I would go about achieving this:

<panel save_session_state='true'>
	<layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true" />
	
	<!--THIS SPLITS THE PANEL INTO ROWS-->
	<container class="vertical_adaptive_container" gap="0" mode="distribute_equally">

		<!--TOP ROW, NEED TO SET HEIGHT-->
		<container default_height="250>
			<!--top row contents here-->
		</container>
		
		<!--THIS SPLITS THE BOTTOM ROW INTO MULTIPLE COLUMNS, NEED TO SET HEIGHT-->
		<container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
		
			<!--LEFT COLUMN, NEED TO SET WIDTH-->
			<container default_width="-1">
				<!--left column contents/selector here-->
			</container>
			
			<!--MIDDLE COLUMN IS SPLIT AGAIN, NEED TO SET WIDTH-->
			<container class="vertical_adaptive_container" gap="0" mode="distribute_equally" default_width="-2">
				
				<!--TOP ROW, NEED TO SET HEIGHT-->
				<container default_height="-1">
					<!--middle column, top row contents/selector here-->
				</container>
				
				<!--BOTTOM ROW IS SPLIT AGAIN, NEED TO SET HEIGHT-->
				<container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
				
					<!--LEFT COLUMN, NEED TO SET WIDTH-->
					<container default_width="-1">
						<!--middle column, bottom left contents/selector here-->
					</container>
					
					<!--RIGHT COLUMN, NEED TO SET WIDTH-->
					<container default_width="-1">
						<!--middle column, bottomr right contents/selector here-->
					</container>				
				
				</container>				
			</container>
			
			<!--RIGHT COLUMN, NEED TO SET WIDTH-->
			<container default_width="-1">
				<!--right column contents/selector here-->
			</container>
		
		</container>
			
	</container>

</panel>

Note that the middle column is twice as wide as the left or right columns.  This essentially is like splitting the space into 4.  By using "-2" for the middle and "-1" for the left and right columns, I am telling it that the middle column is twice as big.  If you are trying to work things out in terms of percentages, you don't need to keep to low numbers.  For example, if I wanted the left column to take up 32% of the space, the middle column to take up 40% and the right column to take up 28% I could use "-8", "-10" and "-7" or "-32", "-40" and "-28".  Both would achieve the same thing and also means you don't have to be exact with pixels.

Using this approach, you can obviously change the layout to your desire!

Regarding analysis polygons, I'm going to have to pass that over to someone a lot better than I am!!

 

excellently explained, gonna archive this in case anyone needs it

[EnigMattic1]

3 minutes ago, bluestillidie00 said:

excellently explained, gonna archive this in case anyone needs it

If only people were as helpful in real life as they are on here. I've yet to meet a better bunch of people.

[EnigMattic1]

Ok, time for a stupid question, with (probably) a hilariously obvious answer, but what panel do I need to be editing?

[GIMN]

3 minutes ago, EnigMattic1 said:

Ok, time for a stupid question, with (probably) a hilariously obvious answer, but what panel do I need to be editing?

human/manager home

Also, no such thing as a stupid question.  I've lost count of the amount of times I've tried to edit a file whose name seemed right for what I wanted, only to find out it's completely wrong!

[TCSSkin]

1 hour ago, GIMN said:

human/manager home

Also, no such thing as a stupid question.  I've lost count of the amount of times I've tried to edit a file whose name seemed right for what I wanted, only to find out it's completely wrong!

common one for me is editing the file in the extracted files folder, not my skin folder, then being confused why it doesn't work 😂

[GIMN]

6 hours ago, bluestillidie00 said:

common one for me is editing the file in the extracted files folder, not my skin folder, then being confused why it doesn't work 😂

That's happened too many times than I'd care to admit!

[Alexpuk2002]

This is a great guide on how to set up the layout of a screen. I have been mainly just editing existing screens into my own skin and while I have learnt a lot from doing that, I have never started a screen from scratch as this just seems to confuse me when I look at some of the xml files in skins. @bluestillidie00 TCS skins were always labelled up well so it was easy to see which part of an xml file controlled which part of the screen. Also the guides @michaeltmurrayuk created a while back are great to start from and he has also helped me a lot in the past with skinning questions.

Would be great if there were more threads like this one that covered the different topics for creating a skin.

[Alexpuk2002]

@GIMN how do you go about creating say the club overview screen? Do you start by editing the xml file with the layout you want in that screen, and then add the content to the areas you have laid out? Or do you start at the top of the xml and just work down?

[TCSSkin]

17 minutes ago, Alexpuk2002 said:

@GIMN how do you go about creating say the club overview screen? Do you start by editing the xml file with the layout you want in that screen, and then add the content to the areas you have laid out? Or do you start at the top of the xml and just work down?

I build the layout then add contents personally. I just use <container bkcl="red" /> with vertical/horizontal layouts 

[Alexpuk2002]

56 minutes ago, bluestillidie00 said:

I build the layout then add contents personally. I just use <container bkcl="red" /> with vertical/horizontal layouts 

I thought that might be the best way to create a layout of the screen, just didn't know where to start really until this post was created. Going to give it a go with the club overview screen and the player overview screen

[TCSSkin]

1 hour ago, Alexpuk2002 said:

I thought that might be the best way to create a layout of the screen, just didn't know where to start really until this post was created. Going to give it a go with the club overview screen and the player overview screen

This is pretty much what I do

https://pastebin.com/ksJUh8WM

  

[Alexpuk2002]

31 minutes ago, bluestillidie00 said:

This is pretty much what I do

https://pastebin.com/ksJUh8WM

  

Thanks for that @bluestillidie00. I have just done the same with the xml example that @GIMN posted a few posts up regarding his manager home layout. Below is what it looks like from that.

[TCSSkin]

5 minutes ago, Alexpuk2002 said:

Thanks for that @bluestillidie00. I have just done the same with the xml example that @GIMN posted a few posts up regarding his manager home layout. Below is what it looks like from that.

Looks good! From there you start feeding your skin information into it. You'll end up adjusting things but you can't go wrong

[Alexpuk2002]

7 minutes ago, bluestillidie00 said:

Looks good! From there you start feeding your skin information into it. You'll end up adjusting things but you can't go wrong

It's just a copy and paste of the xml that @GIMN posted earlier. Now I have a bit more of an understanding I can get the layout to how I want

[Alexpuk2002]

@bluestillidie00 I have almost got the layout how I want it by editing the xml you provided a couple of posts above. What I am wanting to do but I am struggling with is to bring the blue area up to be inline with the orange area next to it, and then get the purple area underneath the orange area to stretch below both the orange and blue area. Hope that makes sense.

https://pastebin.com/hpKeXMwp

[TCSSkin]

10 hours ago, Alexpuk2002 said:

@bluestillidie00 I have almost got the layout how I want it by editing the xml you provided a couple of posts above. What I am wanting to do but I am struggling with is to bring the blue area up to be inline with the orange area next to it, and then get the purple area underneath the orange area to stretch below both the orange and blue area. Hope that makes sense.

https://pastebin.com/hpKeXMwp

You'll have to change the rebuild the containers basically

https://pastebin.com/PaBnRUwD

[Alexpuk2002]

Thanks @bluestillidie00 I think I have managed to sort it out. Changed the layout from the one I posted earlier to something a bit similar to your TCS 19 Light skin's club overview panel. It's been a big help learning how to set the layout before populating the areas. I was always a bit stuck on where to start but this thread and the help from you has got me in a position to start an xml from scratch and actually understand what I am doing.

[snowofman]

On 11/01/2022 at 16:10, bluestillidie00 said:

This is pretty much what I do

https://pastebin.com/ksJUh8WM

  

Thank you, this is a really great help in learning and understanding page setup.

much appreciated

 

[EnigMattic1]

On 11/01/2022 at 15:10, bluestillidie00 said:

This is pretty much what I do

https://pastebin.com/ksJUh8WM

  

So, am I right in thinking that, if I put the code into pastebin and save it, it will appear like the above in FM?

[TCSSkin]

1 minute ago, EnigMattic1 said:

So, am I right in thinking that, if I put the code into pastebin and save it, it will appear like the above in FM?

you need to copy it from pastebin, to your own panel

[EnigMattic1]

Just now, bluestillidie00 said:

you need to copy it from pastebin, to your own panel

And it will show up in coloured blocks?

[TCSSkin]

Just now, EnigMattic1 said:

And it will show up in coloured blocks?

yep

[EnigMattic1]

2 minutes ago, bluestillidie00 said:

yep

Awesome! That makes my life so much easier. Thanks.

[<<Macaco-RJ88>>]

What a great thread!!!

Unfortunately, Im frozen to understand what needs to be done to achieve my goal. I have been just skinning since beta release and maybe thats why I feel I need a break. But before that, I want to finalize the player overview panel, which is a mixed of containers from other skins I have been inspired over the years.

Could anyone help me with the codes to split those containers in two?  (The ones with yellow signs)

Thank you very much!

[canry]

22 dakika önce, &lt;&lt;Macaco-RJ88&gt;&gt; said:

What a great thread!!!

Unfortunately, Im frozen to understand what needs to be done to achieve my goal. I have been just skinning since beta release and maybe thats why I feel I need a break. But before that, I want to finalize the player overview panel, which is a mixed of containers from other skins I have been inspired over the years.

Could anyone help me with the codes to split those containers in two?  (The ones with yellow signs)

Thank you very much!

great work!

I would like to use it after it is completed if you share it of course

[<<Macaco-RJ88>>]

Sure. I just would like to split those 2 containers so there would be more information and less unused space. I feel it would look better and increase game xp.

I tried the above codes, but it seems I'm doing it wrongly. Hopefully someone will give me hand

[PequenoGenio]

8 minutos atrás, <<Macaco-RJ88>> disse:

Sure. I just would like to split those 2 containers so there would be more information and less unused space. I feel it would look better and increase game xp.

I tried the above codes, but it seems I'm doing it wrongly. Hopefully someone will give me hand

One of them should be, if you like, the "Eligebility" panel and the other one info like CA e PA stars.
But i like that i lot

Edited November 7, 2022 by PequenoGenio

[<<Macaco-RJ88>>]

10 minutes ago, PequenoGenio said:

One of them should be, if you like, the "Eligebility" panel and the other one info like CA e PA stars.
But i like that i lot

Thanks. I would like to put a small selector, so there will be a total of 4 options for information source.

 

[Rivanov]

On 02/12/2021 at 18:39, GIMN said:

I promise this isn't a shameless plug of my own skin, but YES this is possible.  Whilst, it's not the same layout exactly, I'll show what I've done:

To start with, it's broken into 2 rows (white)

Then the bottom row, is split into 3 columns (blue)

The middle column, split into 2 rows (green)

And the bottom row of the middle column, split into 2 columns (pink)

This is how I would go about achieving this:

<panel save_session_state='true'>
	<layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true" />
	
	<!--THIS SPLITS THE PANEL INTO ROWS-->
	<container class="vertical_adaptive_container" gap="0" mode="distribute_equally">

		<!--TOP ROW, NEED TO SET HEIGHT-->
		<container default_height="250>
			<!--top row contents here-->
		</container>
		
		<!--THIS SPLITS THE BOTTOM ROW INTO MULTIPLE COLUMNS, NEED TO SET HEIGHT-->
		<container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
		
			<!--LEFT COLUMN, NEED TO SET WIDTH-->
			<container default_width="-1">
				<!--left column contents/selector here-->
			</container>
			
			<!--MIDDLE COLUMN IS SPLIT AGAIN, NEED TO SET WIDTH-->
			<container class="vertical_adaptive_container" gap="0" mode="distribute_equally" default_width="-2">
				
				<!--TOP ROW, NEED TO SET HEIGHT-->
				<container default_height="-1">
					<!--middle column, top row contents/selector here-->
				</container>
				
				<!--BOTTOM ROW IS SPLIT AGAIN, NEED TO SET HEIGHT-->
				<container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
				
					<!--LEFT COLUMN, NEED TO SET WIDTH-->
					<container default_width="-1">
						<!--middle column, bottom left contents/selector here-->
					</container>
					
					<!--RIGHT COLUMN, NEED TO SET WIDTH-->
					<container default_width="-1">
						<!--middle column, bottomr right contents/selector here-->
					</container>				
				
				</container>				
			</container>
			
			<!--RIGHT COLUMN, NEED TO SET WIDTH-->
			<container default_width="-1">
				<!--right column contents/selector here-->
			</container>
		
		</container>
			
	</container>

</panel>

Note that the middle column is twice as wide as the left or right columns.  This essentially is like splitting the space into 4.  By using "-2" for the middle and "-1" for the left and right columns, I am telling it that the middle column is twice as big.  If you are trying to work things out in terms of percentages, you don't need to keep to low numbers.  For example, if I wanted the left column to take up 32% of the space, the middle column to take up 40% and the right column to take up 28% I could use "-8", "-10" and "-7" or "-32", "-40" and "-28".  Both would achieve the same thing and also means you don't have to be exact with pixels.

Using this approach, you can obviously change the layout to your desire!

Regarding analysis polygons, I'm going to have to pass that over to someone a lot better than I am!!

 

How do you create those "faded" vertical lines between the containers? Are these images?

Edited November 7, 2022 by Rivanov

[GIMN]

2 hours ago, Rivanov said:

How do you create those "faded" vertical lines between the containers? Are these images?

Yeah, I got two images - one vertical, one horizontal and just added the path in for  the container's appearance'.

[Rivanov]

7 hours ago, GIMN said:

Yeah, I got two images - one vertical, one horizontal and just added the path in for  the container's appearance'.

Do you mind sharing these pictures?

[GIMN]

5 hours ago, Rivanov said:

Do you mind sharing these pictures?

Sure!

horizontal.xml vertical.xml

[<<Macaco-RJ88>>]

21 hours ago, canry said:

great work!

I would like to use it after it is completed if you share it of course

[Rivanov]

8 hours ago, GIMN said:

Sure!

horizontal.xml 1.01 kB · 1 download vertical.xml 1.01 kB · 1 download

Thanks! And how do I apply these in the XML file? What kind of "appearance" code do I need to add?

[GIMN]

13 minutes ago, Rivanov said:

Thanks! And how do I apply these in the XML file? What kind of "appearance" code do I need to add?

Generally I use something like this:

<container appearance="folder/horizontal" red_replacement="colour" height="1"/>

Obviously put the actual file path in and whatever colour you want it to be. Also you don't need to define the height of you've got it defined elsewhere - for example, you've used vertical_layout (of course you'll need to add the "1" there in the relevant position)

[Nachote912]

En 12/1/2022 a las 8:13, Alexpuk2002 dijo:

@bluestillidie00 I have almost got the layout how I want it by editing the xml you provided a couple of posts above. What I am wanting to do but I am struggling with is to bring the blue area up to be inline with the orange area next to it, and then get the purple area underneath the orange area to stretch below both the orange and blue area. Hope that makes sense.

https://pastebin.com/hpKeXMwp

Hi mate, what skin do you use?? i really love it

 

[hyrule_king]

Using the rough idea that @GIMNposted, here is my effort.

 

 

 

 

Just need to work out how to fill all the panels in with the black background. 

[TCSSkin]

1 hour ago, hyrule_king said:

Using the rough idea that @GIMNposted, here is my effort.

 

 

 

 

Just need to work out how to fill all the panels in with the black background. 

easiest way would be to edit your settings file, edit the bg files

 https://community.sigames.com/showthread.php/431357-Football-Manager-2015-Skinning-Guide-Part-3-Changing-the-Text-Settings

[hyrule_king]

Just now, bluestillidie00 said:

easiest way would be to edit your settings file, edit the bg files

 https://community.sigames.com/showthread.php/431357-Football-Manager-2015-Skinning-Guide-Part-3-Changing-the-Text-Settings

Cheers. Just been going through with a separate notepad open and copying the orignal rgb code , changing it to see how it affects the in game screens and rinsing and repeating till happy. Got this so far.

[<<Macaco-RJ88>>]

On 11/01/2022 at 17:43, Alexpuk2002 said:

Thanks for that @bluestillidie00. I have just done the same with the xml example that @GIMN posted a few posts up regarding his manager home layout. Below is what it looks like from that.

Hi mate! would you have this panel code in pastebin?

I copied the code from @GIMN's post above but my human profile page looks empty in game and even if I add content codes to it, nothing changes.

Thanks in advance

[Alexpuk2002]

3 hours ago, &lt;&lt;Macaco-RJ88&gt;&gt; said:

Hi mate! would you have this panel code in pastebin?

I copied the code from @GIMN's post above but my human profile page looks empty in game and even if I add content codes to it, nothing changes.

Thanks in advance

I don't I'm afraid. I just copied the code form @GIMN and made sure the the boxes were set to show colours so I could see the layout

[Alexpuk2002]

On 10/11/2022 at 13:24, Nachote912 said:

Hi mate, what skin do you use?? i really love it

 

It was one of my own skins that I had edited and used panels from various other skins to make them work with my light skin

[GIMN]

8 hours ago, &lt;&lt;Macaco-RJ88&gt;&gt; said:

Hi mate! would you have this panel code in pastebin?

I copied the code from @GIMN's post above but my human profile page looks empty in game and even if I add content codes to it, nothing changes.

Thanks in advance

It might help to mix and match the advice from myself and bluestillidie, if you add bkcl="red" into each container (choose a different colour for each one to help distinguish), you'll be able to see the layout.  That will help you see if it's worked, and then you can drill down into each section from there.

[hyrule_king]

Followed your guide in the second post but just getting a blank area , been trying to edit the club overview page. @GIMN

Here's the code I have set out, I know i am missing something obvious.

Spoiler

<panel save_session_state='true'>
    <layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true" />
    
    <!--THIS SPLITS THE PANEL INTO ROWS-->
    <container class="vertical_adaptive_container" gap="0" mode="distribute_equally">

        <!--TOP ROW, NEED TO SET HEIGHT-->
        <container class="contrast_box" red_replacement="bg" transparency="0.7" inset="0" default_height="330">
            <widget class ="picture" id="pict" scale_picture="true">
                        <animation class="slide_in_left_animation"/>
                        <boolean id="keep_aspect_ratio" value="true" />
                        <flags id="image_alignment" value="centre" />
                        <record id="object_property">
                            <integer id="get_property" value="mnpc" />
                        </record>
                    </widget>
                    
        </container>
        
        <!--THIS SPLITS THE BOTTOM ROW INTO MULTIPLE COLUMNS, NEED TO SET HEIGHT-->
        <container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
        
            <!--LEFT COLUMN, NEED TO SET WIDTH-->
            <container class="contrast_box" red_replacement="bg" default_width="-1">
                <widget class="club_overview_details_panel" file="club/club overview details panel" id="clod">
                            <record id="object_property">
                            <integer id="get_property" value="objt" />
                            <integer id="set_property" value="objt" />
                            </record>
                    </widget>
            </container>
            
            <!--MIDDLE COLUMN IS SPLIT AGAIN, NEED TO SET WIDTH-->
            <container class="vertical_adaptive_container" gap="0" mode="distribute_equally" default_width="-2">
                
                <!--TOP ROW, NEED TO SET HEIGHT-->
                <container class="contrast_box" red_replacement="bg" default_height="-1">
                    <widget class="person_snapshot_club_overview_panel" id="mana" player="false" file="club/manager overview details panel">
                                <record id="object_property">
                                    <integer id="get_property" value="TMnR" />
                                    <integer id="set_property" value="objt" />
                                </record>        
                            </widget>
                </container>
                
                <!--BOTTOM ROW IS SPLIT AGAIN, NEED TO SET HEIGHT-->
                <container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
                
                    <!--LEFT COLUMN, NEED TO SET WIDTH-->
                    <container class="contrast_box" red_replacement="bg" default_width="-1">
                        <widget class="team_container_honours_panel" id="hons" navigation_container="true">
                        <record id="object_property">
                            <integer id="get_property" value="objt" />
                            <integer id="set_property" value="objt" />
                        </record>
                    </widget>
                    </container>
                    
                    <!--RIGHT COLUMN, NEED TO SET WIDTH-->
                    <container class="contrast_box" red_replacement="bg" default_width="-1">
                        <widget class="club_overview_kits_panel" id="cloK">
                                <record id="object_property">
                                    <integer id="get_property" value="objt" />
                                    <integer id="set_property" value="objt" />
                                </record>
                            </widget>
                    </container>                
                
                </container>                
            </container>
            
            <!--RIGHT COLUMN, NEED TO SET WIDTH-->
            <container class="contrast_box" red_replacement="bg" default_width="-1">
                <widget class="club_overview_stadium_panel" id="clos" file="club/stadium picture">
                                <record id="object_property">
                                    <list id="get_properties">
                                        <record>
                                            <integer id="get_property" value="objt" />
                                            <integer id="set_property" value="Cclu" />
                                            <boolean id="dont_set_object" value="true" />
                                        </record>
                                        <record>
                                            <integer id="get_property" value="Tsre" />
                                            <integer id="set_property" value="objt" />
                                            <boolean id="dont_set_hint" value="true" />
                                        </record>
                                    </list>
                                </record>
                            </widget>
            </container>
        
        </container>
            
    </container>
</panel>

Edited November 16, 2022 by hyrule_king

[GIMN]

20 hours ago, hyrule_king said:

Followed your guide in the second post but just getting a blank area , been trying to edit the club overview page. @GIMN

Here's the code I have set out, I know i am missing something obvious.

  Hide contents

<panel save_session_state='true'>
    <layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true" />
    
    <!--THIS SPLITS THE PANEL INTO ROWS-->
    <container class="vertical_adaptive_container" gap="0" mode="distribute_equally">

        <!--TOP ROW, NEED TO SET HEIGHT-->
        <container class="contrast_box" red_replacement="bg" transparency="0.7" inset="0" default_height="330">
            <widget class ="picture" id="pict" scale_picture="true">
                        <animation class="slide_in_left_animation"/>
                        <boolean id="keep_aspect_ratio" value="true" />
                        <flags id="image_alignment" value="centre" />
                        <record id="object_property">
                            <integer id="get_property" value="mnpc" />
                        </record>
                    </widget>
                    
        </container>
        
        <!--THIS SPLITS THE BOTTOM ROW INTO MULTIPLE COLUMNS, NEED TO SET HEIGHT-->
        <container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
        
            <!--LEFT COLUMN, NEED TO SET WIDTH-->
            <container class="contrast_box" red_replacement="bg" default_width="-1">
                <widget class="club_overview_details_panel" file="club/club overview details panel" id="clod">
                            <record id="object_property">
                            <integer id="get_property" value="objt" />
                            <integer id="set_property" value="objt" />
                            </record>
                    </widget>
            </container>
            
            <!--MIDDLE COLUMN IS SPLIT AGAIN, NEED TO SET WIDTH-->
            <container class="vertical_adaptive_container" gap="0" mode="distribute_equally" default_width="-2">
                
                <!--TOP ROW, NEED TO SET HEIGHT-->
                <container class="contrast_box" red_replacement="bg" default_height="-1">
                    <widget class="person_snapshot_club_overview_panel" id="mana" player="false" file="club/manager overview details panel">
                                <record id="object_property">
                                    <integer id="get_property" value="TMnR" />
                                    <integer id="set_property" value="objt" />
                                </record>        
                            </widget>
                </container>
                
                <!--BOTTOM ROW IS SPLIT AGAIN, NEED TO SET HEIGHT-->
                <container class="horizontal_adaptive_container" gap="0" mode="distribute_equally" default_height="-1">
                
                    <!--LEFT COLUMN, NEED TO SET WIDTH-->
                    <container class="contrast_box" red_replacement="bg" default_width="-1">
                        <widget class="team_container_honours_panel" id="hons" navigation_container="true">
                        <record id="object_property">
                            <integer id="get_property" value="objt" />
                            <integer id="set_property" value="objt" />
                        </record>
                    </widget>
                    </container>
                    
                    <!--RIGHT COLUMN, NEED TO SET WIDTH-->
                    <container class="contrast_box" red_replacement="bg" default_width="-1">
                        <widget class="club_overview_kits_panel" id="cloK">
                                <record id="object_property">
                                    <integer id="get_property" value="objt" />
                                    <integer id="set_property" value="objt" />
                                </record>
                            </widget>
                    </container>                
                
                </container>                
            </container>
            
            <!--RIGHT COLUMN, NEED TO SET WIDTH-->
            <container class="contrast_box" red_replacement="bg" default_width="-1">
                <widget class="club_overview_stadium_panel" id="clos" file="club/stadium picture">
                                <record id="object_property">
                                    <list id="get_properties">
                                        <record>
                                            <integer id="get_property" value="objt" />
                                            <integer id="set_property" value="Cclu" />
                                            <boolean id="dont_set_object" value="true" />
                                        </record>
                                        <record>
                                            <integer id="get_property" value="Tsre" />
                                            <integer id="set_property" value="objt" />
                                            <boolean id="dont_set_hint" value="true" />
                                        </record>
                                    </list>
                                </record>
                            </widget>
            </container>
        
        </container>
            
    </container>
</panel>

I see that bluestillidie has answered in the other thread, but just to follow up, a good starting point is the layout class already in the panel:

<layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true" />

You'll want to add that after the container with the box, and before the widget or container with the actual panel.  For example:

<!--TOP ROW, NEED TO SET HEIGHT-->
<container class="contrast_box" red_replacement="bg" transparency="0.7" inset="0" default_height="330">
  
  <!--HERE-->
  <layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true" />
  
  <widget class ="picture" id="pict" scale_picture="true">
    <animation class="slide_in_left_animation"/>
    <boolean id="keep_aspect_ratio" value="true" />
    <flags id="image_alignment" value="centre" />
    <record id="object_property">
      <integer id="get_property" value="mnpc" />
    </record>
  </widget>

</container>

As per the guide that was linked in that thread, the stick_to_sides_attachment instructs the game to make sure the content is held within the sides of the box it belongs.  Alignment defines which sides to "stick to".  All means that it sticks to all sides, and can be very useful if you want one specific thing to fit in that space and you know the item fits.  Inset indicates how far from the side it sticks to it starts.  If you set it to 10, for example, it will add 10 pixels of space in all directions before adding the content.

[hyrule_king]

1 hour ago, GIMN said:

I see that bluestillidie has answered in the other thread, but just to follow up, a good starting point is the layout class already in the panel:

<layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true" />

You'll want to add that after the container with the box, and before the widget or container with the actual panel.  For example:

<!--TOP ROW, NEED TO SET HEIGHT-->
<container class="contrast_box" red_replacement="bg" transparency="0.7" inset="0" default_height="330">
  
  <!--HERE-->
  <layout class="stick_to_sides_attachment" alignment="all" inset="0" apply_to_children="true" />
  
  <widget class ="picture" id="pict" scale_picture="true">
    <animation class="slide_in_left_animation"/>
    <boolean id="keep_aspect_ratio" value="true" />
    <flags id="image_alignment" value="centre" />
    <record id="object_property">
      <integer id="get_property" value="mnpc" />
    </record>
  </widget>

</container>

As per the guide that was linked in that thread, the stick_to_sides_attachment instructs the game to make sure the content is held within the sides of the box it belongs.  Alignment defines which sides to "stick to".  All means that it sticks to all sides, and can be very useful if you want one specific thing to fit in that space and you know the item fits.  Inset indicates how far from the side it sticks to it starts.  If you set it to 10, for example, it will add 10 pixels of space in all directions before adding the content.

Sounds so complicated. I thought I had it sussed but loaded up the game after clearing the cache and it was all over the place. I will keep on trying to learn though. 

I have managed to work out what the different class boxes do , so plain_box etc...

If i can understand the stick to rule and vertical/horizontal alignments I could create some masterpieces.

@GIMNI have been trying to adapt your old player profile on 22, however I can't find the player trait/ position bit in the code , can you remember where it is? 

[Mancunianets]

How can I split this two containers into four as it is indicated on screen?

Spoiler