Jump to content

Creating New Themes


Recommended Posts

Since release of the new theme support, I've added a couple of options to create themes in a way that doesn't require copying of entire default theme and redoing stuff inside it.
Also doing this way is a safe way - themes are less likely to break or be unsupported after each update.

You can use either way, but it's highly recommended that you do it as I showed in the demo theme below.

Image used for the demo:
http://i.imgur.com/ixd9z8f.png

Entire theme demo code including explanations:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE themes PUBLIC "-//www.matthiasmann.de//TWL-Theme//EN" "http://hg.l33tlabs.org/twl/raw-file/tip/src/de/matthiasmann/twl/theme/theme.dtd">
<themes>
	<!-- First we need to load the default theme -->
	<include filename="../default/theme.xml"/>
	
	<!-- 
	How does it work?
	
	Basically you have an option to override already existing theme blocks.
	You do not need to copy entire block, just the base block i.e.
	<theme name="some-block">
		// Params you want to edit
	</theme>
	
	This allows you to edit single portions of theme rather than having to replace entire theme or block, allowing an option to skin gui piece by piece.
	This also makes your themes have less of redundant code and be more compatibile with each update.
	It's highly recommended that you do not copy - paste entire theme blocks because it might be less compatibile with any future updates.
	
	Currently it's not possible to replace already existing image, unless you will redefine each block using it, but you can easily import new images and replace theme blocks that are using it.
	-->
	
	
	<images file="res/test.png" format="COLOR">
        <grid name="test-frame.background" weightsX="0,1,0" weightsY="0,0,1,0">
            <area xywh="5,3,8,2"/>
            <area xywh="36,3,8,2"/>
            <area xywh="134,3,8,2"/>
		    <area xywh="5,5,8,22"/>
            <area xywh="36,5,8,22"/>
            <area xywh="134,5,8,22"/>
            <area xywh="5,37,8,14"/>
            <area xywh="33,37,8,14"/>
            <area xywh="134,37,8,14"/>
            <area xywh="5,67,8,14"/>
            <area xywh="27,67,8,14"/>
            <area xywh="134,67,8,14"/>
        </grid>
        
    </images>

	<!--
	
	-->

	
	<!-- 
	In this example only button image would be replaced.
	Everything else would remain the same, text aligment, borders and font.
	-->
	<theme name="button">
		<param name=""><image>button-tiny-green.*</image></param>
	</theme>
	
	<!--
	Let's say you want to change general frame background and title font.
	Most of the windows in the game reference the resizableframe theme, so easiest way of doing it 
	would be modifying part of resizableframe responsible for background and title font.
	
	All remaining params that are not defined here are used from the default theme.
	-->
	
	<theme name="resizableframe" allowWildcard="true">
		<!-- Replace the background -->
		<param name="background"><image>test-frame.background</image></param>
		
		<!-- 
		Since in this example I've used graphic that uses different layout than default, 
		I need to fix the vertical position of the title bar.
		-->
		<param name="titleAreaTop"><int>3</int></param>
		<param name="titleAreaBottom"><int>18</int></param>
		
		<!-- Fixing the close button position as well -->
		<param name="closeButtonY"><int>5</int></param>
		
		<theme name="title" ref="label">
			<!-- Replace title font -->
			<param name="font"><font>dejavu-bold-bevel</font></param>
        	</theme>
	</theme>
	
	<!--
	More complex example including children themes.
	So let's say you want to replace the item slot bar in hotkey when it's unlocked ( bag opened ).
	
	Theme responsible for it is hotkeybar-visible, in it's children themes there is item-slot section resposible for the slot theme:
	hotkeybar-visible -> content -> item-slot
	To just replace the image you don't need to include entire theme-block, you can only re-create the hierarchy tree and replace the parameters you want.

	Example here replaces the background image, font and borders.
	-->
	<theme name="hotkeybar-visible" ref="resizableframe">
		<theme name="content" ref="-defaults">
			<theme name="item-slot" ref="-defaults">
				<param name="background"><image>chat-bubble.background</image></param>
				<param name="font"><font>pb-dark</font></param>
				<param name="border"><border>24,0,5,0</border></param>
			</theme>
		</theme>
	</theme>
</themes>

It's also worth noting that you can selectively replace the images used in /default/textures folder simply by copying them to your theme and editing in image editing software. You do NOT need to copy ALL of them, just ones you want to replace/change.

I'm not locking this topic, so if you have any questions regarding creating themes I'll try to answer them when I can.
Link to comment
  • 3 weeks later...

So I am trying to change those fields [spoiler]tF1ubno.png[/spoiler]
Code:
[spoiler] 


	<theme name="monster-frame" ref="resizableframe">
		<param name="background"><image>frame_bc</image></param>
		<param name="overlay"><image>odlesk</image></param>
		<theme name="title" ref="-defaults">
			<!-- titulek -->
			<param name="textAlignment">
				<enum type="alignment">center</enum>
			</param>
			<param name="font"><font>monster_title</font></param>
		</theme>
		<!-- zase titulek -->
		<param name="titleAreaTop"><int>12</int></param>
		<param name="titleAreaLeft"><int>11</int></param>
		<param name="titleAreaRight"><int>270</int></param>
		<param name="titleAreaBottom"><int>45</int></param>
		
		<theme name="dialoglayout" ref="-defaults">
			<theme name="tabbedpane" ref="-defaults">
				<theme name="container" ref="-defaults">
					 <theme name="dialoglayout" ref="-defaults">
						<theme name="label-monster-area" ref="-defaults">
							<theme name="label-monster-value" ref="label" allowWildcard="true">
								<param name="background"><image>Xmi-label-value</image></param>
							</theme>
							<theme name="label-monster-value-name" ref="label" allowWildcard="true">
								<param name="background"><image>Xmi-label-value-inset</image></param>
							</theme>
						</theme>
					</theme>
				</theme>
			</theme>
		</theme>
	</theme>
[/spoiler]
But i get error "while parsing Theme XML file: ...monster-frameG.xml"
I would be very happy if anyone can help me what this.
There is whole file: http://sdrv.ms/192KKq7
Link to comment
  • 2 months later...
  • 4 weeks later...

You should use Notepad++,    it's the best editor for non-java things. I'd say eclipse is just about only good for Java in my opinion

 

Was posted in August... AUGUST! i think he got the answer time ago.

Btw who use notepad++, only notepad for pros!

Link to comment
  • 6 months later...
  • 6 months later...
  • 2 months later...

Hi there,

I know it's an old topic but it seems to be the only one where people can ask questions regarding theme creation. So here is mine :)

I'm trying to create a new theme based on default one. It's been going good until I tried to change a position of some elements that I can't move by any means I tried (like changing borders on different elements, setting gaps etc.). So far I had problems with:

  • Trainer card - moving icons near statistics, moving badges
  • PC - moving little help button in top right area
  • Pokemon summary - moving held item image, moving gender image

Is there some way to move these? 

Edited by slidingpanda
Link to comment
  • 6 months later...

I didn't understand a error. I edited a PC-WINDOW.PNG with PHOTOSHOP and saved with PNG and there was a message <images file="res/pc=window.png">...755:38) caused by: java.io.IOException Unable to load PNG file: file:/.../PokeMMO-Client/data/themes...

 

I pick the same image but edited on PAINT and the error disappears, why?

Link to comment

I didn't understand a error. I edited a PC-WINDOW.PNG with PHOTOSHOP and saved with PNG and there was a message <images file="res/pc=window.png">...755:38) caused by: java.io.IOException Unable to load PNG file: file:/.../PokeMMO-Client/data/themes...

 

I pick the same image but edited on PAINT and the error disappears, why?

Did you save the PNG using interlacing? If you did then that is the cause of the issue.

Link to comment
  • 2 years later...
  • 5 months later...
  • 1 year later...
  • 9 months later...
  • 1 month later...
On 2/21/2021 at 11:43 PM, HeroNero said:

i need help. how do you put our name in this trainer card to move to the center?

dfggdfg.png

it should be on the fonts .xml i dunno exactly how, or even if can be done, i suggest you just move the logo to the center using some image editor 

On 8/17/2018 at 12:57 AM, MaatthewMLG said:

@Shu How to remove this Reshiram / Zekrom login background and add a custom one ?

i think you already did that right?

Link to comment
  • 8 months later...
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use and Privacy Policy.