How to make themes:

• 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 [url="http://www.gimp.org/downloads/"] here[/url]
• -Notepad++ : This handy program has a language tool which reads CSS, so it makes it all easy for you. Download it [url="http://notepad-plus-plus.org/download/v6.1.5.html"] here [/url]
• -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. [url="http://pokemon-online.eu/theme/default.css"]Here is an easy to edit CSS[/url]


• 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.

[URL="http://www.w3schools.com/cssref/css_colors.asp"] Here[/url] 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. [url="http://doc.qt.nokia.com/4.7-snapshot/stylesheet-reference.html"] Use this link[/url] 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. [url="http://pokemon-online.eu/forums/member.php?4547-Nexus"]This is my Profile[/url]

• Uploading your theme to the Forums:


• Compress your theme as .RAR or .ZIP. You may use [url="http://www.rarlab.com/download.htm"] This [/url] 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 [url="http://tinypic.com/index.php"]Tinypic[/url] or [url="https://imgur.com/"]Imgur[/url] and link them in your thread. Also upload your .RAR or .ZIP to [url="http://www.mediafire.com"]Mediafire[/URL] or [url="http://www.filefactory.com"]File Factory[/url] 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