1. kylon Avatar kylon
  2. Untitled project
  3. Theme Manager Ex (Theme Engine)

Wiki

Clone wiki

Theme Manager Ex (Theme Engine) / Themes Structure

View History

It's time to define some rules!


Standards usually make life easier for everyone, so let's define a standard for themes!

Image sizes


Recommended (taken from Official Themes)

- Theme Thumbnail size: 226x128

- Theme Home Preview size: 480x272

- Theme Lockscreen Preview size: 480x272

- Page Background Image size: 960x512

Required

- Icon size: 128x128

- Live Area Gate size: 280x158

- Live Area Background size: 840x500

- Other Live Area Images (if you replace them): Original size


Extended Xml Structure


Here an example of a themeEx.xml:

<?xml version="1.0" encoding="utf-8"?>
<theme format="thmx" version="1.0">
    <m_store>icon_power.png</m_store>
    <m_wkpark>icon_ps3link.png</m_wkpark>
    <m_pkginst title-color="FFFFFFFF" style="psmobile">icon_ps4link.png</m_pkginst>
    <m_psmdev>icon_psm.png</m_psmdev>
    <m_psmdevu>icon_unity.png</m_psmdevu>
    <m_PCSB00560>icon_signup.png</m_PCSB00560>
    <m_PCSF00482>icon_store.png</m_PCSF00482>
    <m_VITASHELL override-livearea="true">icon_topics.png</m_VITASHELL>

    <x_videos title-color="FFFFFFFF"></x_videos>
</theme>


A working extended theme can be found here -> extended themes repo


Tags


Extended Standard element:

This element is used to customize all the apps that are not supported in official themes.

You are free to use this tag to customize an officially supported app, but this is not recommended to avoid confusion and to keep your theme compatible with the Vita theme engine.

Extended Standard elements always define an icon, unless stated otherwise, and you CAN name it as you want!

Replace "xxx" with a Title ID or an EX ID --See EX IDs section below--

<m_xxx>image_name.png</m_xxx>



Extended element:

This element is used to customize all the apps that are supported in official themes, ie the ones you can define in theme.xml.

The extended element will gives you the ability to enable all the Extended Themes features for an officially supported app, ie the ones that are already defined in official theme.xml.

NO Icon is defined.

Replace "yyy" with a Title ID or an EX ID --See EX IDs section below--

<x_yyy></x_yyy>



Properties

These properties apply to both Extended Standard Elements and Extended Elements.


override-livearea

This property is used to override the background and/or the startup/gate images of any app.

The images MUST have the same name of the original image!

Add this prop to an element and set it to true to enable the override. (More info here)

override-livearea="true/false"



install-livearea

This property is used to install a live area when an app does not have one.

In this particular case you CANNOT and you MUST not use the override-livearea property.

If both, the override-livearea and install-livearea properties, are set, NO live area customization will be applied.

Create a contents folder inside the TitleID folder of the app and place there your images.

You MUST rename your background and startup/gate images to bg.png and startup.png respectively.

Add this prop to an element and set it to true to install the live area resources.

install-livearea="true/false"



style

This property is used to override the live area style of any app.

Valid values are:
a1, a2, a3, a4, a5, ad0, ad1, ad2, ad3, ad4, pspemu, ps1emu, psmobile, content_manager, nsx1, music, browser, kids, vd

Add this prop to an element and set it to a valid value.

style="Style Type"



title-color

This property is used to override the title color of an app. (Mainly System Apps)

NOTE: Not all apps have or support a title and this prop will not add it!

Add this prop to an element and set it to an RGBA Hex color

title-color="84B4BAFF"



override-splash

This property is used to override the splash image of an app. (Mainly System Apps)

NOTE: Not all apps have or support a splash image and this prop will not add it!

The image MUST have the same name of the original image!

Add this prop to an element and set it to true to enable the override.

override-splash="true/false"



install-template

This property is used to override the live area frames of any app.

You MUST provide a template.xml in ThemeFolder/extended/TITLE-ID/template.xml. (More info here)

Add this prop to an element and set it to true to enable the override.

install-template="true/false"



EX IDs


EX IDs are known Title IDs, ie System Apps or special apps, that you can use in themeEx.xml.

The following EX IDs are currently available:

  • wkpark -> Welcome Park
  • store -> Store (see Special Live Area overrides)
  • videos -> Videos (see Special Live Area overrides)
  • browser -> Browser
  • trophies -> Trophies
  • friends -> friends
  • messages -> Messages
  • party -> Party
  • ps4link -> PS4 Link
  • parentalctrl -> Parental Control
  • music -> Music
  • photos -> Photos
  • panorama -> Panorama (Hidden App)
  • email -> Email
  • calendar -> Calendar
  • cma -> Content Manager
  • near -> Near
  • ps3link -> PS3 Link
  • crossctrl -> Cross Controller (Hidden App)
  • settings -> Settings
  • pkginst -> Package Installer
  • signup -> SignUp (Hidden App)
  • psmdev -> PSM Dev
  • psmdevu -> Unity PSM Dev
  • adrenaline -> Adrenaline 6.x+
  • thmx -> Theme Manager Ex

Please let me know if i missed some Apps!


Theme Folder Structure


Extended themes use the official theme structure to keep compatibility with the Vita Theme Engine.

All the rules that apply for an official theme, apply here as well, but with a few additions.

A new xml file is added in the root folder named themeEx.xml.
A new folder is created: extended. (This folder will contain all the extended resources.
A new folder for each app is created inside extended using the TITLE-ID (NO EX IDs) as name.

Folder structure example:

  • Root folder of the theme
    • Official theme files (icons, backgrounds, sound, etc..)
    • Official theme.xml
    • themeEx.xml (Extended theme.xml)
    • extended (Folder)
      • icons for Extended Standard Elements Here
      • TITLE-ID (Replace TITLE-ID with an app ID. All the overrides for that app are here)
        • template.xml (template override)
        • pic0.png (Splash screen override)
        • contents (Live area overrides. You CANNOT rename this folder. Case sensitive)
          • live area background image
          • live area startup/gate image
          • custom (Place here any new (not replace) img for template.xml override. You CANNOT rename this folder. Case sensitive. See Here)
            • custom template images HERE

A concrete example:

  • MyCoolTheme
    • icon_browser.png
    • icon_video.png
    • bgm.at9
    • theme.xml
    • themeEx.xml
    • extended
      • icon_store.png
      • icon_pkgInstaller.png
      • NPXS10031
        • pic0.png
        • template.xml
        • contents
          • bg0.png
          • default_gate.png
          • custom
            • new_img.png



Bad practices

A clean and well written XML will be easier to read and to maintein, and it will make my life easier :)

  • Do NOT add comments before the xml declaration.
  • Do NOT add inexistent elements in your xml. They will NOT work.
  • If you have any doubt, use an offical xml as base.
  • Delete unneeded elements, do not use comments.


A good XML (official theme.xml)

<?xml version="1.0" encoding="utf-8"?>
<!-- Your Comments here! -->
<theme format-ver="00.99" package="0">
<HomeProperty>
   <m_bgParam>
     <BackgroundParam>
       <m_imageFilePath>backg-home1.png</m_imageFilePath>
       <m_thumbnailFilePath>backg-home1t.png</m_thumbnailFilePath>
       <m_waveType>11</m_waveType>
     </BackgroundParam>
   </m_bgParam>
   <m_bgmFilePath>homebgm.at9</m_bgmFilePath>
   <m_browser>
     <m_iconFilePath>icon_web.png</m_iconFilePath>
   </m_browser>
....

Updated