Skin project create or modify

Discussion and development of skins for XBMC4XBOX
Post Reply
shadowthezero04
Posts: 12
Joined: Tue Jun 04, 2019 4:00 pm
Has thanked: 1 time

Skin project create or modify

Post by shadowthezero04 » Thu Jun 06, 2019 1:32 pm

Hi to all, I would like to modify or even try to create a skin for xbmc4xbox someone can advise me from where can I start? Is there a graphical tool or program that can help in this? Thank you

Coldly-Indifferent
Posts: 284
Joined: Thu Mar 19, 2015 4:01 am
Has thanked: 39 times
Been thanked: 33 times

Re: Skin project create or modify

Post by Coldly-Indifferent » Thu Jun 06, 2019 3:44 pm

Personally I gave up on any idea I had about creating a XBMC skin. I have found it difficult enough to work out what to edit amongst the dozens of XMLs used to create my preferred XBMC skin (the updated Xbox-Classic) just for some relatively simple adjustments/corrections I wanted to make.

There is also the texture.xpr and other XPR "Media" files required to be considered too. There are tools to open existing XBMC4Xbox XPR files (Rocky5 updated the XPR Express tool some time ago so it worked with 64bit OS) but how you create them without using professional level software I have no idea.

If you want to try skinning a Xbox console dash then I'd suggest starting at the bottom: EvoX which is basically a couple of images (a background and a loading screen) and an .ini file. Then move onto UnleashX - that can take you from a beginner to an intermediate level of knowledge. It can start fairly simple using a basic UX skin.xml template which you can edit and add too, including imported images but from that you can increase its sophistication to almost any level.

You can install any number of other Xbox dashboards as apps and work/test new skins on them. In fact that is the safest method. Just create a new folder in Apps, copy in the "default.xbe" from the UnleashX dash you did not get on with, reboot the Xbox and launch the dash as an app. It will generate a default config and item.xml in the same folder and you can create a skin folder there too. Just specify the path in System > Settings and any skins you put in there will be displayed and selectable from the Skins menu.

It is also possible to build a whole UnleashX skin just using a single skin.xml document and nothing else. The default and other skins embedded in most UX dashboards are created this way.

This is the one for OrangeShapes; worth studying because this is relatively simple stuff in comparison to any XBMC skin.

Code: Select all

<Skin Name="OrangeShapes">
	<LoadingScreen ShowInfo="True">
	</LoadingScreen>

	<Main Globe="True" Orb="False" Fog="True">
		<Menu Smooth="True" Align="Left" ShowIcon="True" ShowArrows="False">
			<Position Top="110" Left="18" Width="374" Height="280" Fixed="False" FixAt="1" MaxItem="7"></Position>
			<Preview EnableAudio="False" Left="404" Top="158" Width="212" Height="156" />
			<Font>CaptionFont</Font>
		</Menu>
		<InfoFont>CaptionFont</InfoFont>
		<Shape Type="Rectangle" Left="400" Top="325" Width="220" Height="155" BorderColor="0xFF000000" BackColor="0xFF552000"/>
		<Shape Type="Rectangle" Left="0" Top="350" Width="640" Height="30" BorderColor="0xFF000000" BackColor="0xFF000000"/>
		<Shape Type="Rectangle" Left="0" Top="45" Width="640" Height="82" BorderColor="0xFF000000" BackColor="0xFF000000"/>
		<Shape Type="Rectangle" Left="400" Top="0" Width="220" Height="150" BorderColor="0xFF000000" BackColor="0xFF652000"/>

		<Shape Type="Rectangle" Left="20" Top="54" Width="50" Height="50" BorderColor="0xFF000000" BackColor="0xFF652000"/>
		<Shape Type="Rectangle" Left="40" Top="54" Width="10" Height="38" BorderColor="0xFF000000" BackColor="0xFF000000"/>

		<Shape Type="Rectangle" Left="75" Top="54" Width="50" Height="50" BorderColor="0xFF000000" BackColor="0xFF652000"/>
		<Shape Type="Rectangle" Left="95" Top="66" Width="10" Height="38" BorderColor="0xFF000000" BackColor="0xFF000000"/>

		<Shape Type="Rectangle" Left="130" Top="54" Width="40" Height="50" BorderColor="0xFF000000" BackColor="0xFF652000"/>
		<Shape Type="Rectangle" Left="150" Top="54" Width="20" Height="38" BorderColor="0xFF000000" BackColor="0xFF000000"/>

		<Shape Type="Rectangle" Left="175" Top="54" Width="50" Height="50" BorderColor="0xFF000000" BackColor="0xFF652000"/>
		<Shape Type="Rectangle" Left="195" Top="66" Width="31" Height="8" BorderColor="0xFF000000" BackColor="0xFF000000"/>
		<Shape Type="Rectangle" Left="195" Top="84" Width="31" Height="8" BorderColor="0xFF000000" BackColor="0xFF000000"/>

		<Shape Type="Rectangle" Left="230" Top="54" Width="50" Height="50" BorderColor="0xFF000000" BackColor="0xFF652000"/>
		<Shape Type="Rectangle" Left="250" Top="84" Width="10" Height="20" BorderColor="0xFF000000" BackColor="0xFF000000"/>
		<Shape Type="Rectangle" Left="250" Top="67" Width="10" Height="8" BorderColor="0xFF000000" BackColor="0xFF000000"/>

		<Shape Type="Rectangle" Left="285" Top="54" Width="50" Height="50" BorderColor="0xFF000000" BackColor="0xFF652000"/>
		<Shape Type="Rectangle" Left="305" Top="66" Width="31" Height="8" BorderColor="0xFF000000" BackColor="0xFF000000"/>
		<Shape Type="Rectangle" Left="284" Top="84" Width="30" Height="8" BorderColor="0xFF000000" BackColor="0xFF000000"/>

		<Shape Type="Rectangle" Left="340" Top="54" Width="50" Height="50" BorderColor="0xFF000000" BackColor="0xFF652000"/>
		<Shape Type="Rectangle" Left="360" Top="84" Width="10" Height="20" BorderColor="0xFF000000" BackColor="0xFF000000"/>
		<Shape Type="Rectangle" Left="360" Top="54" Width="10" Height="20" BorderColor="0xFF000000" BackColor="0xFF000000"/>

		<Shape Type="Triangle" Direction="Down" Left="401" Top="44" Width="92" Height="30" BorderColor="0xFF000000" BackColor="0xFF000000"/>
		<Shape Type="Triangle" Direction="Up" Left="401" Top="96" Width="92" Height="30" BorderColor="0xFF000000" BackColor="0xFF000000"/>
		<Shape Type="Triangle" Direction="Right" Left="401" Top="44" Width="31" Height="82" BorderColor="0xFF000000" BackColor="0xFF000000"/>
		<Shape Type="Triangle" Direction="Left" Left="463" Top="44" Width="31" Height="82" BorderColor="0xFF000000" BackColor="0xFF000000"/>
		<Shape Type="Rectangle" Left="494" Top="45" Width="136" Height="82" BorderColor="0xFF000000" BackColor="0xFF000000"/>

		<Shape Type="RoundedBox" Left="0" Top="112" Width="392" Height="38" BorderColor="0xFF000000" BackColor="0xFF502000"/>
		<Shape Type="RoundedBox" Left="0" Top="150" Width="392" Height="38" BorderColor="0xFF000000" BackColor="0xFF502000"/>
		<Shape Type="RoundedBox" Left="0" Top="188" Width="392" Height="38" BorderColor="0xFF000000" BackColor="0xFF502000"/>
		<Shape Type="RoundedBox" Left="0" Top="226" Width="392" Height="38" BorderColor="0xFF000000" BackColor="0xFF502000"/>
		<Shape Type="RoundedBox" Left="0" Top="264" Width="392" Height="38" BorderColor="0xFF000000" BackColor="0xFF502000"/>
		<Shape Type="RoundedBox" Left="0" Top="302" Width="392" Height="38" BorderColor="0xFF000000" BackColor="0xFF502000"/>
		<Shape Type="RoundedBox" Left="0" Top="340" Width="392" Height="39" BorderColor="0xFF000000" BackColor="0xFF502000"/>

		<Text Left="610" Top="50" Align="Right" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="v.$AppVersion$" />
		<Text Left="610" Top="65" Align="Right" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="Xbox $Version$" />
		<Text Left="410" Top="128" Align="Left" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="Nick:" />
		<Text Left="610" Top="128" Align="Right" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="$NickName$" />

		<Text Left="410" Top="393" Width="200" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="$SoundTrack$" />
		<Text Left="410" Top="413" Width="200" Scroll="2" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="$SongName$" />
		<Text Left="610" Top="433" Align="Right" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="SongTime" />

		<Text Left="395" Top="353" Width="230" Align="Left" Scroll="2" Color="0xBBFFFFFF" ScaleX="75" ScaleY="75" Source="$Newsfeed$" />

		<Text Left="30" Top="393" Align="Left" Width="220" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="D: $DVDTitle$" />
		<Text Left="30" Top="413" Align="Left" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="IP" />
		<Text Left="410" Top="328" Align="Left" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="$Time$" />
		<Text Left="30" Top="433" Align="Left" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="MBTemp" />

		<Text Left="380" Top="393" Align="Right" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="E: $E_FreeMB$" />
		<Text Left="380" Top="413" Align="Right" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="F: $F_FreeMB$" />
		<Text Left="610" Top="328" Align="Right" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="$Date$" />
		<Text Left="380" Top="433" Align="Right" Color="0xBBFFFFFF" ScaleX="60" ScaleY="60" Source="CPUTemp" />

		<Image Top="162" Left="436" Width="150" Height="150" Source="GameIcon" />
		<Image Source="GamePreview" />
	</Main>

	<FileManager SafeBorder="False">
		<BackGround>filemanager.png</BackGround>
	</FileManager>

	<ColorScheme>
		<AMBIENT_FOGCOLOR>0xFF401000</AMBIENT_FOGCOLOR>
		<AMBIENT_SKYCOLOR>0xFF501000</AMBIENT_SKYCOLOR>
		<AMBIENT_CELLCOLOR>0xFF602000</AMBIENT_CELLCOLOR>

		<CAPTION_TEXTCOLOR>0xFFFFFF00</CAPTION_TEXTCOLOR>
		<CAPTION_BACKCOLOR>0xFF602000</CAPTION_BACKCOLOR>

		<DIALOG_BORDERCOLOR>0xFF000000</DIALOG_BORDERCOLOR>
		<DIALOG_BACKCOLOR>0xFF602000</DIALOG_BACKCOLOR>
		<DIALOG_INNER_BORDERCOLOR>0xFF000000</DIALOG_INNER_BORDERCOLOR>
		<DIALOG_INNER_BACKCOLOR>0xBB000000</DIALOG_INNER_BACKCOLOR>
		<DIALOG_TEXTCOLOR>0xFFFFFFFF</DIALOG_TEXTCOLOR>
		<DIALOG_DISABLEDTEXT>0xFF111111</DIALOG_DISABLEDTEXT>

		<OPTION_TEXTCOLOR>0xFFFFFFFF</OPTION_TEXTCOLOR>
		<OPTION_ACTIVETEXTCOLOR>0xFFFFFF00</OPTION_ACTIVETEXTCOLOR>
		<OPTION_ACTIVEBACKCOLOR>0xFF602000</OPTION_ACTIVEBACKCOLOR>

		<BUTTON_BORDERCOLOR>0xBB000000</BUTTON_BORDERCOLOR>
		<BUTTON_TEXTCOLOR>0xFFAAAA00</BUTTON_TEXTCOLOR>
		<BUTTON_BACKCOLOR>0xFF602000</BUTTON_BACKCOLOR>
		<BUTTON_ACTIVETEXTCOLOR>0xFFFFFF00</BUTTON_ACTIVETEXTCOLOR>
		<BUTTON_ACTIVEBACKCOLOR>0xBB000000</BUTTON_ACTIVEBACKCOLOR>

		<KB_KEYBG_HIGHLIGHT>0xFF303030</KB_KEYBG_HIGHLIGHT>
		<KB_KEYBG_DISABLED>0xFF602000</KB_KEYBG_DISABLED>
		<KB_KEY_PRESSED>0xFF303030</KB_KEY_PRESSED>
		<KB_KEY_NORMAL>0xFF000000</KB_KEY_NORMAL>
		<KB_KEY_DISABLED>0xFF602000</KB_KEY_DISABLED>
		<KB_KEY_ACTIVEBORDER>0xFF303030</KB_KEY_ACTIVEBORDER>
		<KB_KEY_TEXTCOLOR>0xFFFFFFFF</KB_KEY_TEXTCOLOR>
		<KB_KEY_TEXTBACKCOLOR>0xFF000000</KB_KEY_TEXTBACKCOLOR>
		<KB_KEY_TEXTBORDERCOLOR>0xFFAAAAAA</KB_KEY_TEXTBORDERCOLOR>

	        <MENU_TEXTCOLOR>0xFFAAAAAA</MENU_TEXTCOLOR>
        	<MENU_ACTIVETEXTCOLOR>0xFFAAAA00</MENU_ACTIVETEXTCOLOR>
	        <MENU_ACTIVEBACKCOLOR>0x00000000</MENU_ACTIVEBACKCOLOR>
	        <MENU_ACTIVEBORDERCOLOR>0x00000000</MENU_ACTIVEBORDERCOLOR>
	</ColorScheme>
</Skin>
I'm certainly not trying to put you off trying to get into XBMC skinning, you may already have some of the skills. I am sure there are others here who can provide help if that is the case. But if you're starting from scratch then the route I've suggested is the more sensible path to take.
Last edited by Coldly-Indifferent on Fri Jun 07, 2019 1:56 am, edited 1 time in total.

shadowthezero04
Posts: 12
Joined: Tue Jun 04, 2019 4:00 pm
Has thanked: 1 time

Re: Skin project create or modify

Post by shadowthezero04 » Thu Jun 06, 2019 8:28 pm

Meanwhile, thanks for the reply.

 In the past I have already created / modified skin for evox to my liking and it was very simple, also thanks (if I remember correctly) to the help of a dedicated graphic software for major changes and a .ini file for details.

Now I've spent several years at xbmc, I prefer it by far to all the other existing dashes for graphics, organization, file explorer and much more. There are already several skins for this but unfortunately they are no longer updated or have some bugs here and there. For example, I added the skin mc360 2.1 to my xbox yesterday and it is fantastic, but it has several bugs and the xbox live blade is outdated and no longer functional in 2019. So I tried to install notepad ++ and opened some .xml files of the skin, just to try to erase the dead part of xboxlive and change the name of the blade but it's literally a brothel! I noticed that there is almost nothing graphic but only textual and very difficult to understand.

The xml file that you posted here is able to understand the different strings well or badly, as you said, it is quite simple. But for xbmc's skins it has nothing to do with this.

So do you know if there is any graphic software that can help in this work? Furthermore, modifying a single string in the .xml files and then copying them all over again in the xbox just to test it is really a rupture of tiles. It would already be a great step forward if the skins could be tested directly on the PC where you work, at least for the graphics.

User avatar
GoTeamScotch
Posts: 233
Joined: Sat Apr 06, 2013 2:17 am
Has thanked: 68 times
Been thanked: 66 times

Re: Skin project create or modify

Post by GoTeamScotch » Thu Jun 06, 2019 9:54 pm

do you know if there is any graphic software that can help in this work?
There's no skin-builder app, if that's what you're seeking. Expect to be working within XML files and XPR packages.
It would already be a great step forward if the skins could be tested directly on the PC where you work, at least for the graphics.
Yes, a version of XBMC has been made for PC which was specifically done to test plugins and themes during development. For the life of me, I can't find a download link for it. Maybe I'm just not using the right search term to find it. Hopefully someone else reading will know what I'm talking about. The Wiki says that there is a PC port of it and that the source code is available in SVN. See here: https://www.xbmc4xbox.org.uk/wiki/Skinning_XBMC

For MC360 specifically, you might be able to hide the Xbox Live blade entirely by editing the XML files. I would recommend starting by looking at the file MC360\PAL\Home.xml. You might be able to just hide it by setting a certain flag somewhere that causes the blade to not be shown. I haven't tried so I can't say for sure. It's all open source so it's possible with time and enough effort.
Image
Remember kids, always zero-ize your HDD key!

shadowthezero04
Posts: 12
Joined: Tue Jun 04, 2019 4:00 pm
Has thanked: 1 time

Re: Skin project create or modify

Post by shadowthezero04 » Fri Jun 07, 2019 12:55 pm

GoTeamScotch wrote:
Thu Jun 06, 2019 9:54 pm
do you know if there is any graphic software that can help in this work?
There's no skin-builder app, if that's what you're seeking. Expect to be working within XML files and XPR packages.
It would already be a great step forward if the skins could be tested directly on the PC where you work, at least for the graphics.
Yes, a version of XBMC has been made for PC which was specifically done to test plugins and themes during development. For the life of me, I can't find a download link for it. Maybe I'm just not using the right search term to find it. Hopefully someone else reading will know what I'm talking about. The Wiki says that there is a PC port of it and that the source code is available in SVN. See here: https://www.xbmc4xbox.org.uk/wiki/Skinning_XBMC
I couldn't find anything about it. We hope someone has the answer.
Yesterday I tried installing xbmc 13.2 gotham in the pc but the skins work as "addon" and therefore we should rewrite all xml on this to make it work on the pc. So I don't think it's the right way.

Post Reply