Installing a Theme

Current Themes

Here is a full list of the current themes.

How to install

1. Visit the thread and download the theme.
2. It will be a RAR or ZIP file containing a folder. Extract it using WinRAR or another similar software.
3. 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/YourUsername/Pokemon Online" for Windows XP, or "C:/Users/YourUsername/Pokemon Online" for Windows Vista and Windows 7.
4. Restart PO.
5. 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.
    

Making a Theme

Requirements

Image editing software. I use GIMP, which is free and can be downloaded from here.

Text editing software. I use Notepad++ for this, which is also free and can be downloaded from here.

Designing and CSS knowledge helps a lot, too.

How To

First things first, simply create a folder with the name of your soon-to-be theme in the themes folder. (Pokemon Online/themes)

Next, decide what you are going to edit first: the client, teambuilder and battle window, or the challenge window.
I went with the challenge window first, because it's easy to get a good look at how the colours will turn out.

Open you your image editing software (I'll be using GIMP to walk through this as said before) then load challengeBG.png from the default folder (Pokemon Online/Themes/Default/Challenge Window) into GIMP.

Then just edit it as you see fit.
Just make sure to keep the parts labelled there: (You can edit them, just don't remove them as that's where certain text goes)

Once you're happy with this, it's time to move onto the client, teambuilder and battle window part

Now if you open the Default folder again, you'll see a file called default.css. Copy that into your theme folder while keeping the same name.

Then open it in your text editing software (I'll be using Notepad++)
I know sometimes looking at a huge file of code can be a little scary, but not to worry, you don't need to change everything about it!
The good thing about Notepad++ is that there's a language option, where you can simply pick CSS from the list and it will colour code it all for you, which helps a lot.

Ok now a lot of things should be obvious, and some not so obvious.
Let's start from the top

		background: qradialgradient(cx:0.5, cy:0.5, radius: 0.8,
stop:0 white, stop:1 #0ca0dd);

Should see something similar to this. This is where you can change the colour of the main background (Part labelled in this image)

You can edit the stop points if you understand how gradients work.
Since I don't want to use gradients, I'm going to replace "background:" with "background-color:", and then you just type the colour code after the colon.
Now what's really handy about using GIMP for this, is that they have a colour picker that shows the colour code for that particular colour!
Just double click the colour box on the toolbar, then click the colour picker next to the box with a colour code on (See image)
 

This allows you to make sure the colours match with your challenge window (Which is why I suggested doing that first).
You can also add an image as the background instead using

		 background-image:url(Themes/Your Theme Name/Your Image.png) 

Now, when looking through the code, you'll see codes "background: qradialgradient" which is shown above, "background-color:" which I've also shown, "background-image URL" which I've also shown and simply "color:". Now you can replace these colours however you see fit.
The "color:" one controls the fonts in that particular section
So in this example:

		 QLabel#Announcement {
    border-radius: 9px;
    border: 1px solid #a972ab;
    font-size: 11px;
        color: #000000;
        font-family: cursive;
    background-color:#c87796;
    background-attachment: fixed;
    background-repeat: repeat-y;
    background-repeat: repeat-x;
    background-position: left;
    padding: 2px;
    text-align: center;
} 

"color: #000000;" controls the colour of the text in the announcement box at the top of the client.

Now lets look at this example for a few other things:
"font-family:" controls what style the font is. A list of ones that are available is here.
"font-size:" just controls the size of the font used.
"border-radius:" controls how much the corners curve in the announcement box.
"border:" controls the size and colour of the border (The solid has to be there for the colour to take effect, there's probably other things that can replace solid, but I haven't experiemented that much).
The background-attachment, repeat and position are all related to if you use an image as a background. Fixed just means it doesn't change, repeat is if it repeats when scrolled (Pointless in the announcement bar anyways since it doesn't scroll) and position is where it starts.
"text-align" is simply how the text is aligned in the box (center, right, left).

All of this makes the announcement look like this:

Now you may also want to edit some button. Simply search for the buttons in the CSS (You can also add buttons if you know how, or look at pre-made themes like mine, DN's or Top's).
When there's nothing there, that edit how the button looks normally
Hover is when the mouse is simply resting on the button doing nothing

In the default folder, there's a load of different things you can edit.
You don't have to change everything, this is all optional, but you can edit everything in there and put it in your own folder. These things include Pokéballs, status icons, background, etc.
If a file is missing from your folder, PO will look in the default folder instead for that file.

If you are not sure about something you can ask someone. Look for us in the Forums or in Pokémon Online.