home
products
contribute
download
documentation
forum
Home
Forums
New posts
Search forums
What's new
New posts
All posts
Latest activity
Members
Registered members
Current visitors
Donate
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Search titles only
By:
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
MediaPortal 1
MediaPortal 1 Skins
Building a skin from scratch - a tour -
Contact us
RSS
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="mbuzina" data-source="post: 1001963" data-attributes="member: 12382"><p>I have just started to build a skin starting from complete empty files with just a few ideas in my head. I would like to share this experience with all interested. I guess I will learn a lot about the skinning engine - and maybe get a few of you guys to be interested in MP skinning/plugin development or top other support of MP.</p><p> </p><p>@[USER=131633]public[/USER] Relations - let's see how this goes, it might be worth a blog post in future.</p><p> </p><p>Soo let's get kicking:</p><p><span style="font-size: 18px">1. Design Ideas</span></p><p>I am not a big "painter". I have 2 left hands (I beg your pardon, all left-handed) for drawing picures. So my theme will have a focus on fonts (large fonts) and foto realistic images (maybe I will snap some pics myself).</p><p> </p><p>I am inspired in part by the windows 8 "Modern" look, so no rounded corners and I will use Segoe UI font as I believe this to be one of the most readable & balanced fonts available. I also will use fast & nice slide/fade animations to make the skin look lively.</p><p> </p><p>I also want to have a very configurable skin. Ideally change a few settings in MP and your BasicHome looks completely different, as you want it to be. For this I will try to explore the limits of the skinning engine.</p><p> </p><p><span style="font-size: 18px">2. Getting started</span></p><p>As I am no real designer I will not start with mockups. They take just as long for me to draw as to code something in XML. So everything seen here will be functional from start. 1st check: which files do I need to have a working (but empty) skin? The wiki helps a little, but not enough. So here is the list:</p><p>Skin Folder needs to contain, I will copy file from Titan to get the correct IDs but then remove all defines & all controls (resulting in an empty skin page):</p><p><strong>Folders:</strong></p><p>Fonts (folder may be empty if font is installed on system, have to check later for deployment)</p><p>Sounds (also keep empty first)</p><p>Themes (also empty at first)</p><p>Media (needs some things here)</p><p>Media\tetris (MP complains if it is missing)</p><p>Media\weather</p><p>Media\weather\64x64</p><p>Media\weather\128x128</p><p> </p><p><strong>XML Files</strong> (directly in skin folder):</p><p>references.xml (copy from titan, delete the styles, check the default settings & modfy all font name references)</p><p>fonts.xml (start clear, I added fonts in different sizes, currently 96, 36,24,18,14,12,12 Bold, 11). More might come but not much - kiss</p><p>SkinSettings.xml (copied from Titan, need to clean some things, this will drive all customization of my skin)</p><p>splashscreen.xml (copied from Titan, need to make my own background for this)</p><p>topbar.xml and topbarhome.xml - just empty for the moment</p><p>myHome.xml and myHome PlugIns.xml - just left the menu definition in there for future reference.</p><p>BasicHome.xml - start empty, but this will be the first big thing to work on.</p><p> </p><p><span style="font-size: 18px">3. Skin Name</span></p><p>I had to name the folder and I was not sure about the name. Lets start with the nice multi-meaning word "<strong>Medium</strong>". My definition stems from the word Media and MP is the medium I use to enjoy media. And it needs to be balanced & find a nice middle ground, so it will be medium as well.</p><p> </p><p>EDIT: If you are designing skins, have a good XML editor (I use VisualStudio) and install the MyRefresh plugin (<a href="https://forum.team-mediaportal.com/threads/myrefresh-refresh-skin-xml-inside-mp.114904/" target="_blank">https://forum.team-mediaportal.com/threads/myrefresh-refresh-skin-xml-inside-mp.114904/</a>) - it will refresh the skin from disk (incl. re-caching) on pressing F5. Essential for a skinner.</p></blockquote><p></p>
[QUOTE="mbuzina, post: 1001963, member: 12382"] I have just started to build a skin starting from complete empty files with just a few ideas in my head. I would like to share this experience with all interested. I guess I will learn a lot about the skinning engine - and maybe get a few of you guys to be interested in MP skinning/plugin development or top other support of MP. @[USER=131633]public[/USER] Relations - let's see how this goes, it might be worth a blog post in future. Soo let's get kicking: [SIZE=5]1. Design Ideas[/SIZE] I am not a big "painter". I have 2 left hands (I beg your pardon, all left-handed) for drawing picures. So my theme will have a focus on fonts (large fonts) and foto realistic images (maybe I will snap some pics myself). I am inspired in part by the windows 8 "Modern" look, so no rounded corners and I will use Segoe UI font as I believe this to be one of the most readable & balanced fonts available. I also will use fast & nice slide/fade animations to make the skin look lively. I also want to have a very configurable skin. Ideally change a few settings in MP and your BasicHome looks completely different, as you want it to be. For this I will try to explore the limits of the skinning engine. [SIZE=5]2. Getting started[/SIZE] As I am no real designer I will not start with mockups. They take just as long for me to draw as to code something in XML. So everything seen here will be functional from start. 1st check: which files do I need to have a working (but empty) skin? The wiki helps a little, but not enough. So here is the list: Skin Folder needs to contain, I will copy file from Titan to get the correct IDs but then remove all defines & all controls (resulting in an empty skin page): [B]Folders:[/B] Fonts (folder may be empty if font is installed on system, have to check later for deployment) Sounds (also keep empty first) Themes (also empty at first) Media (needs some things here) Media\tetris (MP complains if it is missing) Media\weather Media\weather\64x64 Media\weather\128x128 [B]XML Files[/B] (directly in skin folder): references.xml (copy from titan, delete the styles, check the default settings & modfy all font name references) fonts.xml (start clear, I added fonts in different sizes, currently 96, 36,24,18,14,12,12 Bold, 11). More might come but not much - kiss SkinSettings.xml (copied from Titan, need to clean some things, this will drive all customization of my skin) splashscreen.xml (copied from Titan, need to make my own background for this) topbar.xml and topbarhome.xml - just empty for the moment myHome.xml and myHome PlugIns.xml - just left the menu definition in there for future reference. BasicHome.xml - start empty, but this will be the first big thing to work on. [SIZE=5]3. Skin Name[/SIZE] I had to name the folder and I was not sure about the name. Lets start with the nice multi-meaning word "[B]Medium[/B]". My definition stems from the word Media and MP is the medium I use to enjoy media. And it needs to be balanced & find a nice middle ground, so it will be medium as well. EDIT: If you are designing skins, have a good XML editor (I use VisualStudio) and install the MyRefresh plugin ([url]https://forum.team-mediaportal.com/threads/myrefresh-refresh-skin-xml-inside-mp.114904/[/url]) - it will refresh the skin from disk (incl. re-caching) on pressing F5. Essential for a skinner. [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
MediaPortal 1
MediaPortal 1 Skins
Building a skin from scratch - a tour -
Contact us
RSS
Top
Bottom