backtopbacktopbacktop



 

Updates

uLaunchELF v4.42b

Open PS2 Loader v0.8

SMS Media Player v2.9 R4

Free McBoot 1.8b

ESR beta r9b

Open Ps2 Loader Guides & Tutorials

Free MCBOOT Guides & Tutorials
Create Skins for Media Center X

Introduction
:
There are five sections to Media Center X (MCX) skins:
Start Page, My Videos, My Music, My Pictures, My Files

This tutorial will explain how to customize each section to allow you to create your own personalized MCX skin.


Check List:
  • Wii or PS3 MCX is installed and working
  • You have a program that has the ability to create and edit .png Graphic Images. Photoshop works great but it is expensive. Try Gimp which is free and open source if you do not have a graphic editing program already.
  • Graphics editing experience, or the will to learn
Notes:
Do to a bug in version 0.92 of MCX adding multiple skins is a bit broken at the moment. This will be fixed in the next version but for now just overwrite the default skin.


Step 1: Exploring the Red Kawa program folder

Open windows explorer and browse to the MCX program folder. If you did a default install of MCX this folder will be C:\Program Files\Red Kawa\Media Center. All filenames in this tutorial are based off the root of the MCX folder.

For example: \core\skins\Default translates to C:\Program Files\Red Kawa\Media Center\core\skins.

Each MCX section has its own separate folder for storing graphics. Here is a list of the sections and their corresponding skin folders:
  • Start Page = \core\skins\Default
  • My Vidoes = \software\Files\skins\Default
  • My Music = \software\Music\skins\Default
  • My Pictures = \software\Pictures\skins\Default
  • My Files = \software\Video\skins\Default
Explore the folders above to get an idea of what graphics you would like to customize for your skin.

The rest of this tutorial will discuss the graphic images associated with each of the five sections. Feel free to modify these graphics or replace them completely for your skin.


Step 2: Back up the default skin!

Before you modify the default skin it would wise to make a backup first.
Option 1: Make a backup copy of the entire "Media Center" folder.
Option 2: Back up each skin folder listed in Step 1.


Step 3: Image Resolutions and Sizes

When designing your skins remember to keep in mind that the Wii and PS3 support different resolutions.

Wii
480i: 800x500
480p 1024x500
PS3
480i/480p 4:3 - 592x456
480i/480p 16:9 - 796x456
720p - 1200x684
1080i/1080p - 1808x1026

Cascading Style Sheets (CSS)

The MCX sections are designed using CCS so if you wish to adjust the default placement and size of images you will need to edit the corresponding CSS file for each section.

Background Image

The default background image for MCX is a small graphic that is repeated. If you would like to use a non-repeating graphic you must update the CSS file in each MCX section and disable the repeat property.

Edit the desired CSS file and search for "480/background.png'". Change the background-repeat property as follows.
background-repeat:repeat-y; --> background-repeat: no-repeat;


Step 4: Customize the Start page

The first page that loads up when you open MCX on your console is the Start Page. The purpose of this page is to link to the various sub-programs that are part of MCX. This is a great place to start customizing your skin.

Important folders and files to remember:
Root Skin Folder: \core\skins\Default
Graphics Folder: \images\480
CSS: \css\480.css
Graphic images and what they are for:
background.png - Background image
redkawa.png - Games and Apps @ Red Kawa icons
video.png - My Videos icon
music.png - My Music icon
pictures.png - My Pictures icon
files.png - My Files icon
software.png - My Software icon
settings.png - Settings icon
start.png / title_settings.png / title_software.png
Transparent images containing text
selectionbar.png - Select / Hover bar
subselectionbar.png
thumbborder.png


Step 5: Customize the My Videos page

The following graphics are shown when viewing the My Videos section.

Important folders and files to remember:
Root Skin Folder: \software\Video\skins\Default
Graphics Folder: \images\480
CSS: \css\480.css
Graphics images and what they are for:
background.png - Background image
foldericon.png - File Folder icon
selectionbar.png - Select / Hover bar
title.png - Transparent image for the upper left "Video" text
videoicon.png - Icon assigned to video files
thumbborder.png


Step 6: Customize the My Music page

The following graphics are shown when viewing the My Music section.

Important folders and files to remember:
Root Skin Folder: \software\Music\skins\Default
Graphics Folder: \images\480
CSS: \css\480.css
Graphics images and what they are for:
selectionbar.png / selectionbarlong.png - Select / Hover bar
title.png / titleRight.png - Transparent image for the upper left "Music" text
bgLeft.png
bgMp3.jpg
bgRight.png
thumbborder.png


Step 7: Customize the My Pictures page

The following graphics are shown when viewing the My Pictures section.

Important folders and files to remember:
Root Skin Folder: \software\Pictures\skins\Default
Graphics Folder: \images\480
CSS: \css\480.css
Graphics images and what they are for:
background.png - Background image
foldericon.png - File Folder icon
imageicon.png - Image icon
selectionbar.png - Select / Hover bar
title.png - Transparent image for the upper left "Pictures" text
thumbborder.png


Step 8: Customize the My Files page

The following graphics are shown when viewing the My Files section.

Imporant folders and files to remember:
Root Skin Folder: \software\Files\skins\Default
Graphics Folder: \images\480 and \images\480\ext
CSS: \css\480.css
Graphics images and what they are for:
background.png - Background image
diskdrive.png - Disk drive icon
foldericon.png - File Folder icon
selectionbar.png / selectionbarlong.png - Select / Hover bar
title.png - Transparent image for the upper left "Files" text
thumbborder.png


Step 9: Packing your skin
Temporarily create a new directory called YourSkin_V1 inside the main MCX program folder.

Example: C:\Program Files\Red Kawa\Media Center\YourSkin_V1\

Create the following folders inside the YourSkin_V1 folder:
Copy the graphics images from each of the five MCX sections into their corresponding YourSkin_V1 Folder.

Core:
Copy the folder \core\skins\Default\css to \YourSkin_V1\Core\css
Copy the folder \core\skins\Default\images to \YourSkin_V1\Core\images
Files:
Copy the folder \software\Files\skins\Default\css to \YourSkin_V1\Files\css
Copy the folder \software\Files\skins\Default\images to \YourSkin_V1\Files\images
Music:
Copy the folder \software\Music\skins\Default\css to \YourSkin_V1\Music\css
Copy the folder \software\Music\skins\Default\images to \YourSkin_V1\Music\images
Pictures:
Copy the folder \software\Pictures\skins\Default\css to \YourSkin_V1\Pictures\css
Copy the folder \software\Pictures\skins\Default\images to \YourSkin_V1\Pictures\images
Video:
Copy the folder \software\Video\skins\Default\css to \YourSkin_V1\Pictures\css
Copy the folder \software\Video\skins\Default\images to \YourSkin_V1\Pictures\images
Note: The Red Kawa development team is working to simplify the MCX skin system so that creating and packaging skins is much simpler; stay tuned.

Create a README.TXT with details about your skin inside the root of the YourSkin_V1 folder.
Create a ZIP archive containing the YourSkin_V1 folder.


Untitled Document
Powered by vBadvanced CMPS v3.2.3

All times are GMT -7. The time now is 04:44 PM.
Powered by vBulletin Version 3.8.5
Copyright 2000 - 2011, Jelsoft Enterprises Ltd.


Valid CSS!

backtopbacktopbacktop

Applications - Forums - List - Skins - Arcade

Disclaimer - FAQ - Donate

Page generated in 0.14137 seconds.
Copyright © 2004 - 2017 SKSApps.com
All rights reserved.
No affiliation with Sony Computer Entertainment or Nintendo Company, Ltd.