• Hey there! Nexus here, and I'm gonna teach you how to make themes for PO Version 2. Making a theme is simple, but it's a time consuming job. If you can devote time to it, then you can guarantee it'll turn out well. I'll try my best to explain the process as well as possible, so here it goes: • First the Basic requirements: • -Photoshop (Any Version should do.) • -If you don't have Photoshop, GIMP will do too, but it's not as good as Photoshop. Download it here • -Notepad++ : This handy program has a language tool which reads CSS, so it makes it all easy for you. Download it here • -Preferably the default.CSS from any theme besides Classic. Classic has a simple CSS format, and will make it harder to code complex actions. So you're better off using the Default.CSS from other themes. Here is an easy to edit CSS • How to make themes: • 1 -> Open Pokemon Online/Themes. • 2 -> Create a folder with the name of your theme. • 3 -> Copy all the content of Classic and paste it in your theme. • 4 -> Copy the Default.CSS of any other theme and paste it in your theme. • 5 -> Open Default.CSS. I'll be using Screenshots from my theme to show you examples and the basics. • 6 -> Anything with #xxxxxx, is called a Hex code. To get a Hex code for a color, open Photoshop and double-click on the color picker. It should show you a code in the window that opens. Here is a list of Hex Codes and RGB codes. • • 7 -> border: Defines the Hex code to be used for the border. If it's under Menu in CSS, then it's the Border outline for Menu and so on. MainWidget { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #000000, stop: 0.55 #143f64,stop: 0.56 #143f64, stop: 1.0 #000000); -Defines the Border of Menu • • background-attachment: fixed; - Defines whether your image will get repeated or not. Replace fixed with repeat if you want it to repeat. • border-image: url(Themes/mewtwo V2/team.png); - Defines the image to be used in the border. Self explanatory. • background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #503950, stop: 0.52 #4d374d, stop: 1.0 #543c54); - Don't be afraid. Such Codes are used to define the Color Gradients. The number of #'s defines the number of shades. If you know CSS, you can change it to whatever you want. Play around with them; replace the Code after # with your own Code to make a Gradient of your own. You may not get it right at first but keep trying. • For example: • background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #000000, stop: 0.52 #ffffff, stop: 1.0 #000000); • Makes a Gradient of Black-White-Black (00000 is black, ffffff is white) • border-image: url(Themes/mewtwo V2/mainchat.png); - Defines the image to be used in the respective area. For example if you find Border/Background-image: url, then it's probably getting linked to a picture in your theme folder. To replace these pictures, collect all the images you want and move them into the theme folder. Rename them to whatever you want. Now let's say we want to change the Background of the MainChat, Move a picture of dimensions preferably 760X590 and around that and rename it to chat.png. Now scroll down to • QTextEdit#MainChat { • border-image: url(Themes/Your theme/mainchat.png); • But replace mainchat with chat. That's how you link the pictures into your CSS. Also, if you’re using someone else's CSS, then go to Search, Replace or press Ctrl+H and the replace box should open up. Say you’re using my CSS. Enter Mewtwo V2 in the find what Box and enter your theme name in the Replace with box. Then Click Replace all. • Menu{-Everything between this and the next } Covers the Display of the menu • TrainerMenu{ - Covers the Team Menu display which is the screen that appears if you click TeamBuilder in the Pokemon Online Menu • TeamMenu{ - The screen that appears when you double-click a Pokemon and enter into the Team Menu. • ServerChoice{ - Screen that appears when you click Go Online. • PokeSelection{ -Screen that appears when you double-click a Pokemon in the Trainer menu which opens the list of Pokemon for you to select. • • Anything with Hover appears when you move your mouse over an area, but not while clicking on it. That includes highlighting it. • Example: TrainerMenu QPushButton#close:hover { • When you move your mouse over the Close Button in Trainer Menu. • Client QTextEdit { • font-family: Tahoma; - Controls the Font of the Mainchat • #Announcement, ServerChoice #announcement { - The announcement over the Main Chat • BaseBattleWindow { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #946a94 stop: 0.5 #946a94, stop: 1 #946a94); - The background of your Battle Window. • BaseBattleWindow QTextEdit { background-color: #b3c7e6; font-family: Trebuchet MS; font-weight: bold; - This Style Let's you change the Chat of the Battle Window. Background-Color to change the chat BG and You change/add Font Colors,Font Styles to your preference • ChallengeDialog { • border-image: url(Themes/mewtwo V2/challenge.png); - The background of your Challenge Window. • Your biggest boon is the Theme Color Changer Plug-in. Open your Pokemon Online Client and enter a server. Now in the top menu bar, click Plug-in and click Plug-in Manager and Add Plug-in and Add CSS Changer. You should get a Theme Color Changer Plug-in which looks like this: • • You can use it to change the color of your theme easily and fast and it's by far your best bet. I already explained the terms so you hopefully you understand what everything means. • So now that I've explained all the whole process, the rest is all up to you and your creativity. For example if you want to add a Background Image for the Pokeselection Box, go to the tab and add Background/Border-image: Url(Themes/Your theme/Image.png) and if you want to fill a gradient in the Starting Menu screen, go to the menu caption in the CSS and add "background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #00000, stop: 0.52 #ffffff, stop: 1.0 #000000);". Remember whenever you add something don't forget the semi-colon(;) at the end of the sentence. • Sample theme: • Let's say I'm making a theme called Tutorial. Here are the steps I would take. • 1 -Copy all the contents from another theme to my theme. • 2 -Open the CSS using Notepad++ and press Ctrl+H and follow the above instructions. • 3 -Change the image of the Main Chat. Download/Create an image, let’s call it ChatBG, and move it to the Theme folder. Now go to Qclient Text Edit and Find border-image: Url(Themes/Tutorial/mainchat.Png). Replace it with ChatBG.png. Preferred Dimension is 760x590 and around that. • 4 -Change the Background of Menu/Team Builder/Trainer Menu/Server List Menu. Do the same as above, except the dimension of the image should be 1024x768. • 5 -Change the Background Challenge window. This is the same as the others, except that the image dimensions can vary. Use background-size: 100% and/or width: 100%; height: 100%; position: absolute; • 6 -Now open Theme Color Changer and replace all the colors to your preferred colors. You can change it in the CSS, which is better, but it requires you to understand how that work first. So I'd recommend this for beginners and editing the CSS for advanced users. • 7 -Create your buttons, Challenge Window if you know how to do them. • 8 -If you want to change font color, open Mainchat.CSS and Enter Font-Color: "Your Color" • Those are all the basic steps to creating a simple theme. As you create more and more themes, you will gain a deeper understanding of how to make better themes, and your skills will grow over time. Use this link to style Tabs and widgets faster and easier but I recommend this only for People well versed with it as it can be confusing to beginners,If you need any help, feel free to post here or PM/VM me on the Forums or Server. This is my Profile • Uploading your theme to the Forums: • Compress your theme as .RAR or .ZIP. You may use This to compress your files/ Open Pokemon Online and take screenshots of each screen. That would be Menu, Teambuilder, Trainer Menu, Server Menu, Main Chat, Battle Window, and Challenge Window. Upload the screenshots to Tinypic or Imgur and link them in your thread. Also upload your .RAR or .ZIP to Mediafire or File Factory and link your download link in your theme thread as well. • How to install themes: • Visit the thread and download the theme. • It will be a RAR or ZIP file containing a folder. Extract it using WinRAR or another similar software. • Place the folder into the Themes folder located inside the Pokemon Online folder. • The Pokemon Online folder is located, by default, at "C:/Documents and Settings/Your Username/Pokemon Online" for Windows XP, or "C:/Users/Your Username/Pokemon Online" for Windows Vista and Windows 7. • Restart PO. • In the menu bar, click Themes, and then the name of the theme. The name of a theme is always the same as the name of the folder. Adios ~Nexus
Great guide Nexus, since I'm not currently interested in the topic it was kinda tl;dr for me but nonetheless it looks pretty cool
You can also download Qt Creator + Qt Designer, create a Qt Designer Form, click on Change styleSheet and make gradients from there (very easy).
I know this is very specific, but in the main menu in the update box, there is a portion of text I can't change (the bit that just says 'Changelog' as a heading) Do you know which section of text controls this? Spoiler ...and before this I though Mafia Theming was hard. I feel stupid :P[/HIDE]
Small nitpick: • background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #00000, stop: 0.52 #ffffff, stop: 1.0 #000000); You missed one 0 at stop: 0 • background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #000000, stop: 0.52 #ffffff, stop: 1.0 #000000);
Thanks TUO! Good job for pointing that out :) Menu #updateLabel { color: blue; font-size: 14; Change the color; That's what controls the part you mentioned
Your welcome. I've only mentioned the basic stuff here, if you want to know advanced stuff, ask here.
Lol, i've never seen this plugin. Also, great guide. :3 For those who want to learn pretty much css themselves, try to change one color at a time to red (#ff0000), then see what it changes (since nothing in the basic theme is in red). Over time, you will understand what each thing represent, and things will get easier real quick.
Haha that's how I came to learn CSS by myself. Changing and experimenting. Also this plugin seems new. I saw it only like a month back but makes my job a lot easier
You should probably post your own thread about it rather than here so you could get more publicity on it. As for how to post the link, you could ask Nexus how to through PM. I don't know much about that part of themes... :x
http://support.mediafire.com/index.php?/Knowledgebase/Article/View/67/0/upload-options Took 45 seconds to find that via google + mediafire knowledge base. Try that (searching) in the future, if you don't know the answer to questions like that.
Read my Guide :/ I did a How to upload your themes to the forum section, Explained in detail and as simple as possible
Waw Nexus, this is just amazing! Very detailed,nice explantiob,great! I might try to make one, but I'm sure that I like your themes more <3.
Hey Nexus, I have an issue. I am trying to change the background to the main chat. The issue is I change it and save it. Open up the theme and the main chat background is still the dragonites. ~Lexi
Did you replace the path? That is (Themes/Classic/"imagename".png to Themes/"Yourthemefoldername"/"image".png) ?