Simple stuff probably - "class" queries and other bits and bobs

I'm trying to produce my own skin for the first time and I'm spending a lot of time trying to work out things that are probably really basic, such as the different classes of layout, containers and widgets. Is this information recorded somewhere or could someone give me a quick lowdown on what the main ones mean? For instance how is a horizontal_adaptive_container different to a vertical one and what exactly does stick_to_sides_attachment mean and what other options are there that can be used?

While I'm here and asking stupid questions, can anyone tell me what the default sizes relate to if they are a negative number?

Negative numbers tell something to use up the available room, if you have more than one item with a negative value then they will take up the space on a ratio. For example if you have three items and the sizes are set to -1, 100, -1 - the item in the middle will take up 100 pixels with the items on the left and right each taking up half of the space left, if you had the sizes set as -1, -2, -3 - then the right item takes up half the space, then the middle item takes up twice as much of the left space as the left item. (or think of it as the area is split into 6 parts, the left item gets 1/6, middle 2/6 and right 3/6).

horizontal containers align stuff side-by-side (such as the items in the header)

vertical containers set stuff on top of each other

adaptive containers are ones that appear and disappear depending on screen resolution.

stick_to_sides is used to position stuff or to actualy get it to display in the first place.

Easiest and quickest way to learn is to look at a screen in the game then find the xml file for that screen and see how it's coded, then adjust values and code and see what it does, and spend long enough looking at the xml files you'll start to learn to read the files and edit them (even if you don't actually know what half the stuff actually does), though even then most of it is still pretty much trial and error.

Many thanks Michael, I will have a play around. Stay tuned for more stupid questions!

Ok, I've had a bit of a go and made some progress but have some more queries I hope someone could help with:

Can someone tell me how I go about changing the colour of the text on:

The "continue" button;

Where it has "Contract", "Transfer", "Reports"...etc along the top;

The green text "personal details", "attributes", etc?

And also how I'd go about changing the colour of the "World" logo (it currently replicates the secondary colour of the team - Norwich's green in the screenshot here).

Thanks again

1) Continue text : you must edit or create a continue.xml file in /fonts folder. Here's mine :

<record>
<string id="file_name" value="HelveticaNeueLTPro-Md.otf"/>

<integer id="gradient_upper_margin" value="0"/>
<integer id="gradient_lower_margin" value="0"/>
<integer id="gradient_curve" value="0"/>

<integer id="gradient_upper_colour_red" value="55"/>
<integer id="gradient_upper_colour_green" value="64"/>
<integer id="gradient_upper_colour_blue" value="71"/>
<integer id="gradient_upper_colour_alpha" value="255"/>

<integer id="gradient_lower_colour_red" value="55"/>
<integer id="gradient_lower_colour_green" value="64"/>
<integer id="gradient_lower_colour_blue" value="71"/>
<integer id="gradient_lower_colour_alpha" value="255"/>

</record>

2) Action text : i don't remember, i think it's controlled by actions.xml, still in /fonts folder.

3) Title text : you must edit or create a panel_title.xml file, still in /fonts folder. Here's mine :

<record>
<string id="file_name" value="helveticaneueots.otf"/>
<real id="boldness" value="0.2"/>

<integer id="fill_colour_red" value="255"/>
<integer id="fill_colour_green" value="193"/>
<integer id="fill_colour_blue" value="147"/>
<integer id="fill_colour_alpha" value="255"/>

</record>

4) World icon : to change the colour of the World icon, i simply recoloured in Photoshop the icon in graphics/icons/26px

Thanks Doc

actions.xml doesn't seem to be the right one for 2), but you've given me enough knowledge to allow me to spend some time trying to find it myself.

Ok, despite saying that I can't work it out, can anyone help? It's the text saying "contract", "transfer", "reports", etc in the screenshot above that I'd like to change the colour of.

It's controlled by the button.xml file located in this location:

\graphics\tabs\standard\normal\top

Locate this code: <colour name="text"/> and change the bold bit to the colour variable you want it to use.

If the location isn't present for your skin you'll find the file you need in the above location for the fm-widgets skin, or if you don't want to extract the files create a new xml file called button in the above location for your skin and paste the following code into the file:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE propertylist SYSTEM "http://www.sigames.com/dtds/sios/properties.dtd">

<!-- image properties -->

<properties>

<!-- image borders -->

<!-- these determine how many pixels any content is inset from each side of the image -->

<!-- (for example, in the case of a button, the content would be the text label) -->

<record id="image_borders" left="8" right="8" top="0" bottom="0"/>

<!-- image slices determine the points at which the image will be sliced to enable scaling -->

<!-- the image will only slice in the directions slicing values are provided for-->

<record id="image_slices" left="5" right="5" top="5" bottom="5"/>

<record id="font_spec">

<colour name="text"/>

</record>

<colour id="red_replacement" name="menu_highlight"/>

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

<record id="secondary_icon_properties" red_replacement="normal_icon"/>

</properties>

If you want to change the colour of the selected tab text without changing the bar underneath then you need to edit the button.xml file located in:

\graphics\tabs\standard\selected\top

Thanks Michael! Success!

I'm now looking to change the pop-up window in the following screenshot. Can someone tell me which panel this is please:

In addition to the above question, how do I go about changing the colour of the blue confidence bars in the following screenshot, please?

I got there in the end, huzzah!

I realise I'm talking to myself a little here, but I've yet another question. In the following screenshot the widget in the bottom left isn't working correctly; the circles that are normally present have disappeared. Does anyone know how to fix this? I can make them reappear by reloading the skin, but they don't like to stick around for too long unfortunately. Could it be because I've made that container too small?

Yes it's likely a size thing, some bits can be rather awkward about what space they need to show, you'll need to tweak various bits until you have enough space for them to reappear.

I tweaked and tweaked and tweaked and couldn't get it... so cheated:

I'm trying to edit the instant result pop-up a little. I know it is controlled by match overview popup panel, but I'm still having some issues that I hope someone might be able to assist me with.

As I understand it, the match overview popup panel has a widget which contains the score, etc (controlled by the match info overview popup panel) and a container underneath for match stats and player ratings. What I don't understand is where the text at the top comes into it; I cannot find it. Can anyone help? I simply want to avoid it being held in a transparent container because it quite often clashes with the text behind it.

Secondly, and easier I guess; what controls the colour of the text for player ratings in the bottom right of the popup?

Sorry for the bump, but can anyone assist with the above please?

Rating is controlled by the 'excellent attribute match' colour variable.

If you want to stop it being transparent then you should just be able to add an extra container at the top after the <panel> code something like:

<container class="bordered_box" appearance="boxes/custom/match/background/paper">

(and don't forget the </container> at the bottom of the file above the </panel> code to close your new container)

then pick a class and appearance that suits what you want, if you already have suitable default box graphics you can delete the appearance bit.

The blue text at the top will be generated by the game instead of the panel title, to recolour it you'd need to recolour the title font settings, you might be able to remove it by deleting this line:

<translation id="title" translation_id="292788" type="use" value="Overview[COMMENT: match screen; match overview panel title]" />

Thanks Micheal - your help is invaluable and really appreciated.

I managed to change the text colour easily, but the rest of it is doing all sorts of doolally when I try to add a container. I'm struggling generally to alter anything about the pop-up; its size in particular just doesn't want to change.

I've got this much thus far:

I'm having a play around with some transparency just now. Why is there a space underneath the Continue button in the screenshot below?

Thanks again!

For the Continue button check the border colour you have assigned (or check the graphic if you have changed it it might have a secondary colour on it).

For the Instant Result pop-up, not sure I don't use it, it could just be one of those awkward things that doesn't like changed code, there were a couple of other people messing around with it not sure if any of them managed to edit it, you can also have a look at how it appears in the FMC mode incase there are some graphics you can pinch from that skin.

I got there in the end, huzzah!

Hey Scribe, mate, where did you find the line to modify the Confidence Bar color?

It's some days i'm after it and i can't solve it by myself apparently

have a look in http://community.sigames.com/showthread.php/410548-Percentage-bars-i.e-board-confidence

thank you buddie. And, just because i'm already here, somebody knows how to add transparency to the "selected news" bar?

I'd like to see my "selected news" (bright green as now) just like the "must respond news" (transparent red) or the "optional news" (transparent yellow).

Any idea?

Thank you in advance

controlled by the graphic in tables/custom/inbox

there is one for normal, optional, must respond, selected.

i just played around with the transparency to suit

thank you again

Post removed, because I have an idea to solve my query

I've managed to set up my titlebar almost as I want it, but I'm looking for some assistance to finish it off please.

I have two issues. I had to move the continue button from the header.xml to titlebar.xml in order to change the background to the team colour (there is probably another way to do it, but that's all I managed to be successful with). Now, as you can see, the continue button no longer re-sizes, so when it says anything longer it truncates the text. How would I go about fixing this?

Secondly, I can't get the date or the continue button text or icon to re-colour to match the secondary colour of the competition/team. Can anyone help me do this?

Thanks guys.

Date/Time is controlled by this file: current game date widget.xml

Inside that file locate this line of code:

<widget class="text" id="dtam" auto_size="none" size="9" alignment="centre_x, bottom" style="bold, shadowed" colour="white" height="16"/>

and change it to read:

<widget class="text" id="dtam" auto_size="none" size="9" alignment="centre_x, bottom" style="bold, shadowed" height="16">

<record id="object_property">

<list id="get_properties">

<record>

<integer id="get_property" value="ttcl" />

<integer id="set_property" value="colr" />

</record>

</list>

</record>

</widget>

Do the same with the line below it aswell and that will cause the date and time to be recoloured to the teams text colour.

NOTE: On the existing code you need to remove the colour="XXX" bit aswell as the / from the /> at the end of the line.

For the continue button the width not adjusting depends on how you moved the code, best thing is to put it back where it was, though getting it to recolour is a bit of a mess.

The continue button is controlled by the continue.xml file (which you may need to get from the skins\fm\panels folder)

To set the continue button background to the club colour add this code at the top of the file after the <panel> line:

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

<!-- coloured title bar image -->

<widget class="picture" id="colb" file="boxes/custom/interface/titlebar/paper" rthr="68">

<!-- set the colour of the image to the team background colour -->

<record id="object_property">

<integer id="get_property" value="tbcl" />

<integer id="set_property" value="colr" />

</record>

</widget>

Next locate this line:

<widget class="icon_button" id="GCNT" appearance="buttons/custom/interface/continue/button" alignment="centre" font="fonts/continue" secondary_icon_enabled="true" secondary_icon="icons/26px/continue" secondary_icon_alignment="centre_right, centre_y" size="11" >

and either change the appearance line to point to a transparent graphic (such as appearance="boxes/bordered/transparent/paper") or edit the graphics in the above default location to transparent, as we'll use the previously pasted in code to recolour the button.

After the next line of code add the following code:

<record id="object_property">

<list id="get_properties">

<record>

<integer id="get_property" value="ttcl" />

<integer id="set_property" value="colr" />

</record>

<record>

<integer id="get_property" value="ttcl" />

<integer id="set_property" value="Jcol" />

</record>

</list>

</record>

First bit recolours the text the second bit (Jcol id) recolours the icon.

Finally you need to edit the fonts\continue.xml file open that file and remove all of the gradient lines, so you should just be left with the two record lines and the font.

There is a good chance you'll need to do the same changes for the various other icon_button bits of code in the main continue.xml file as the various different versions of the continue button are controlled by different bits of code in the xml file.

Thanks again Michael. Managed to change the calendar colours, but I think I will leave the Continue button white because I quite like the contrast:

That could be problematic when it comes to teams that play in white though Scribe.

I had the same thought. I think it is just about ok:

do either you guys knwo the code for the team name? with it appearing in the titlebar this year i cant find it anywhere.. im trying to get it into the club details panel.

do either you guys knwo the code for the team name? with it appearing in the titlebar this year i cant find it anywhere.. im trying to get it into the club details panel.

Would be nice to have a list of all the codes

Have you tried tmnm ?

Sorry wkdsoul, I don't.

On another note, I sorted my text truncation probelm with a multiline command:

Itll be called up somewhere in titlebar search.xml wkdsoul.

Itll be called up somewhere in titlebar search.xml wkdsoul.

not in there, either that was my first idea, the team name code from the league table wont work either

do either you guys knwo the code for the team name? with it appearing in the titlebar this year i cant find it anywhere.. im trying to get it into the club details panel.

Have a look in the sections\team properties.xml file that file (and the other files in the sections folder) lists the various ids used by the game you just need to find the correct one and then reformat it to fit the coding from the file you are wanting to put it in (if it's the club overview details panel you are trying to add it to then you might need to change it to Cnam or Ctea as the rest of the ids in that file start off with a C).

Love your skin

Can you upload it?

Love your skin

Can you upload it?

Thanks, but I feel as though I still have some work to do on it before I release it.

Thanks, but I feel as though I still have some work to do on it before I release it.

But can i test it?

please :o

Seconded! I love the progress you are making my friend! Will keep an eye out for when you decide its ready! KUTGW!!!!!

Date/Time is controlled by this file: current game date widget.xml

Inside that file locate this line of code:

<widget class="text" id="dtam" auto_size="none" size="9" alignment="centre_x, bottom" style="bold, shadowed" colour="white" height="16"/>

and change it to read:

<widget class="text" id="dtam" auto_size="none" size="9" alignment="centre_x, bottom" style="bold, shadowed" height="16">

<record id="object_property">

<list id="get_properties">

<record>

<integer id="get_property" value="ttcl" />

<integer id="set_property" value="colr" />

</record>

</list>

</record>

</widget>

Do the same with the line below it aswell and that will cause the date and time to be recoloured to the teams text colour.

NOTE: On the existing code you need to remove the colour="XXX" bit aswell as the / from the /> at the end of the line.

For the continue button the width not adjusting depends on how you moved the code, best thing is to put it back where it was, though getting it to recolour is a bit of a mess.

The continue button is controlled by the continue.xml file (which you may need to get from the skins\fm\panels folder)

To set the continue button background to the club colour add this code at the top of the file after the <panel> line:

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

<!-- coloured title bar image -->

<widget class="picture" id="colb" file="boxes/custom/interface/titlebar/paper" rthr="68">

<!-- set the colour of the image to the team background colour -->

<record id="object_property">

<integer id="get_property" value="tbcl" />

<integer id="set_property" value="colr" />

</record>

</widget>

Next locate this line:

<widget class="icon_button" id="GCNT" appearance="buttons/custom/interface/continue/button" alignment="centre" font="fonts/continue" secondary_icon_enabled="true" secondary_icon="icons/26px/continue" secondary_icon_alignment="centre_right, centre_y" size="11" >

and either change the appearance line to point to a transparent graphic (such as appearance="boxes/bordered/transparent/paper") or edit the graphics in the above default location to transparent, as we'll use the previously pasted in code to recolour the button.

After the next line of code add the following code:

<record id="object_property">

<list id="get_properties">

<record>

<integer id="get_property" value="ttcl" />

<integer id="set_property" value="colr" />

</record>

<record>

<integer id="get_property" value="ttcl" />

<integer id="set_property" value="Jcol" />

</record>

</list>

</record>

First bit recolours the text the second bit (Jcol id) recolours the icon.

Finally you need to edit the fonts\continue.xml file open that file and remove all of the gradient lines, so you should just be left with the two record lines and the font.

There is a good chance you'll need to do the same changes for the various other icon_button bits of code in the main continue.xml file as the various different versions of the continue button are controlled by different bits of code in the xml file.

Hi Michael,

I've managed to follow your instructions to re-colour the Continue button but I am struggling to complete the final part. I can't seem to locate the fonts\continue.xml nor do I know what gradient lines are (although I imagine it is something to do with colours and I may well be able to work it out once I'm in the right xml).

Many thanks

You have to get the fonts/continue file from the default fm dark widgets folder

Great stuff FMR, thank you so much.

EDIT: Success! I am learning SO much.

I've just downloaded your bars and I'm trying to work out how to move the back next buttons on to the titlebar.

I've hit a snag but I'll start a new thread rather than hijacking this one.

Any news on this mate?

I haven't really worked on it of late to be honest. I might upload it here quietly so you can use it since you're keen. It might only really work properly on 1400x900 at 100% zoom though.

I haven't really worked on it of late to be honest. I might upload it here quietly so you can use it since you're keen. It might only really work properly on 1400x900 at 100% zoom though.

Waiting for it mate. Many thanks

Here you go: http://speedy.sh/Ng6PB/Longitudinal.rar

Let me know what it looks like on another resolution and I can try to resolve (or tell you which panels to remove). The main problems will be with the player and match overview screens I think.

In terms of this skin I would like to credit those that have assisted in this thread and those whose panels I have used, namely:

michaelmurrayuk

wannachupbrew

Bergkamp

Drakestone

drswit

And anyone else that I may have forgotten (please PM if you find something of yours in there!)