Shu Posted July 17, 2013 Share Posted July 17, 2013 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.pngEntire 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. Dollynhosocafofo00, Mokujin97, Strych and 18 others 20 1 Link to comment
JWingWangWong Posted July 17, 2013 Share Posted July 17, 2013 Nice documentation on the code I'm sure a lot of people will find this useful. Link to comment
XelaKebert Posted August 6, 2013 Share Posted August 6, 2013 Could this code be edited in something like Eclipse? Link to comment
Zoubek Posted August 7, 2013 Share Posted August 7, 2013 So I am trying to change those fields [spoiler][/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
Hato Posted October 20, 2013 Share Posted October 20, 2013 I have question. I have experience in Skin/GUI Making for games, and if i make new one, theres any chance that skin will be implemented to the game, or everyone who want other skin need to change it manually? Link to comment
Dannnno Posted October 20, 2013 Share Posted October 20, 2013 everyone who want other skin need to change it manually? This one. Link to comment
sicarius1 Posted November 14, 2013 Share Posted November 14, 2013 Could this code be edited in something like Eclipse? 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 VenomExareo 1 Link to comment
Greck Posted November 14, 2013 Share Posted November 14, 2013 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
johnvry Posted June 13, 2014 Share Posted June 13, 2014 can anyone tell me how to change color of text in trainer card? Link to comment
FuzzyRegirock Posted December 27, 2014 Share Posted December 27, 2014 Ummm is this going to be on the test? Link to comment
slidingpanda Posted March 10, 2015 Share Posted March 10, 2015 (edited) 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 March 10, 2015 by slidingpanda Link to comment
ghfrc Posted September 19, 2015 Share Posted September 19, 2015 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
XelaKebert Posted September 21, 2015 Share Posted September 21, 2015 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
ghfrc Posted September 26, 2015 Share Posted September 26, 2015 Did you save the PNG using interlacing? If you did then that is the cause of the issue. Oh Thanks Link to comment
Kalvinz Posted September 30, 2015 Share Posted September 30, 2015 I check to create a Theme and GUI, and i wonder if there is any way to change the battle screen size for something more bigger ? Link to comment
XelaKebert Posted September 30, 2015 Share Posted September 30, 2015 I check to create a Theme and GUI, and i wonder if there is any way to change the battle screen size for something more bigger ? No there is not. Link to comment
MaatthewMLG Posted August 17, 2018 Share Posted August 17, 2018 @Shu How to remove this Reshiram / Zekrom login background and add a custom one ? Crueldad, RyuujiHit and RakuenX 3 Link to comment
budadeth Posted April 28, 2020 Share Posted April 28, 2020 (edited) Anyone have any idea how to change fonts colour? Anyways i already started to messing with the fonts xml to figure it out Edited April 30, 2020 by budadeth Link to comment
HeroNero Posted February 22, 2021 Share Posted February 22, 2021 i need help. how do you put our name in this trainer card to move to the center? Link to comment
budadeth Posted March 23, 2021 Share Posted March 23, 2021 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? 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
NavajasOnline Posted November 25, 2021 Share Posted November 25, 2021 la verdad es que no te entiendo en absoluto. ¿Cómo puedo cambiar la pantalla de inicio? Link to comment
budadeth Posted January 16, 2022 Share Posted January 16, 2022 On 11/25/2021 at 1:19 AM, NavajasOnline said: la verdad es que no te entiendo en absoluto. ¿Cómo puedo cambiar la pantalla de inicio? ya te lo respondi en mi post guia de edicion de temas i already reply to you on my theme edition guide post Link to comment
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now