Very first steps in skinning (1 Viewer)

[Lehmden]

Hi.
I think it's time for me to start learning MP2 skinning. I will need a lot of help to understand how things are done the MP2 way. What I've got up to now:
I made a copy of Titanium skin, gives it a new name ("NoName" as for now). Then I changed the GUID to have it unique. After editing plugin.xml and skin.xml I can choose NoName skin in MP2 client. So far so good. Then I remember I had changed something to get the underlay image more transparent. Just to see a bit more of the fanart. I was searching and found it in master_menu.xaml.
Now it looks like:

That's what I've achieved so far. Next thing I want to change is the way the series are presented in Grid view. The grid should contain 3x2 instead of 6x2 items and should stay on the right. In the middle I want a "text area" containing the series summary, first airdate, how much seasons and episodes are available and how much of them I've already watched. On left there should be a bigger view of the series poster.
I want it to look similar to movies are shown:

I found where this is defined for movies. But I can't find where the 6x2 grid is defined for series and how I can change this. So I'm stuck for now. I can do some cosmetics like moving the lower bar completely to the bottom of the screen and change the size of the underlay image to fit into the planed "text area". But as long as I can't change the grid itself this is not really useful.

Anyone can help me here, please? I need a push into the right direction. Many thanks.

 

[offbyone]

The Grid is probably defined in a WrapPanel and it will layout the items depending on how many width it has. So by simply giving it less space you will have a 3x2 instead of 6x2 arrangement.

 

[MJGraf]

Thanks for your efforts, Lehmden. Much appreciated!

 

[Lehmden]

Hi.
I've done some very small steps forward.
At first I've changed the bottom bar, Brought it to the bottom and got rid of those "bunny ears".

Excerpt for the underlay image most is looking as I want it here. Only thing to change is the label on bottom bar. It should contain title of selected episode. "Episodes" is meant as "fallback" if no item is selected.

After hours of seeking I fond the place where the 6x2 grid is defined. It was not included in Titanium at all and for that also not in NoName. I changed the width and the alignment and now I have the 3x2 grid I want to have.

Problem is, this affects all views everywhere in the skin. So I need to find a way to apply those changes to this view only. But that's enough for today.
Maybe once @morpheus_xx is back from holiday he can give me some more hints.

ATM skinning for MP2 looks a lot more difficult than MP1. After spending so much time I need here to apply two little changes I was able to change a whole part of a MP1 skin to fit my needs. Maybe it's getting better once I've got used to xaml a bit more.

 

[offbyone]

You have to create an "override" style in the titanium skin folder. Use the same file and same name only put it into the same folder under Titanium. If the file already exists, create your new definition there.
This concept is called the ResourceLookup in MP2 (I think there was some wiki about it). And no need to wait for morph, I can answer most of your questions in this regard.

Edit:
Here's the link:
http://wiki.team-mediaportal.com/2_MEDIAPORTAL_2/8_Contribute/Skin_Design/2_Creating_Skins_for_MP2

last entry on the page.

 

[Lehmden]

Hi,
Thanks for the offer.

Use the same file and same name only put it into the same folder under Titanium.

That's what I've done. My issue now is that changes done to this file "MediaItemsList.inc" affects all parts of the new skin. So I got a 3x2 grid everywhere, list views are affected also,...
So I need a way to keep the original ""MediaItemsList.inc" and put those changes I've done into a new file that overrides the default "MediaItemsList.inc" only when showing Series in Grid view.

 

[offbyone]

I am guessing that this file in "inc"luded in every Media Screen, so you need to make a copy of the style that you want to change and modifiy the one screen to include a different file or use your new style.

I know this might look or sound complicated at first, but the use of resources and styles allows the skinner to create a consistent looking skin with little copy paste where you can change something at one place and it will apply to all screen right away. While on the other hand makes it harder to change a single thing on a single screen for someone in your position

 

[Lehmden]

Hi.
It's a "bit" more complicated. This .inc is included in a xaml what is a resource of another xaml what is a resource of the screen file (or even another layer) ... Really hard to follow.
Tomorrow I don't have time to continue, but the next days I will try to include your recommendation. Thanks a lot.