1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Guest, PO has ceased our separate tiering and adopted Smogon tiers for SM. More information and updates here.

    Dismiss Notice

[Guide] How to Make and Download Themes - Beginner's Guide

Discussion in 'Arts and Graphics' started by Nexus, Jul 25, 2012.

  1. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    • 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.

    [​IMG]


    • 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

    [​IMG]


    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.

    [​IMG]

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

    [​IMG]

    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:

    [​IMG]

    • 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
     
    Last edited: Jul 29, 2012
  2. The Dude

    The Dude The Mannis

    Joined:
    Apr 5, 2011
    Messages:
    1,728
    Likes Received:
    163
    Great guide, very detailed and should help anyone who wants to start making themes. A+
     
  3. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    Thanks, I put a lot of effort into it :)
     
  4. The Tempest

    The Tempest Banned

    Joined:
    Jan 22, 2012
    Messages:
    191
    Likes Received:
    1
    PO Trainer Name:
    The Tempest
    Very nice! Might be a bit complicated for me, but I'll definitely give it a go!
     
  5. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    If you feel it is Complicated, do ask me any help you need!
     
  6. Emperor PPP

    Emperor PPP PKMNPurePower

    Joined:
    Feb 15, 2012
    Messages:
    853
    Likes Received:
    1
    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
     
  7. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    umm I'll take that as a complement; Thanks!
     
  8. TheUnknownOne

    TheUnknownOne Member

    Joined:
    Mar 28, 2011
    Messages:
    988
    Likes Received:
    3
    You can also download Qt Creator + Qt Designer, create a Qt Designer Form, click on Change styleSheet and make gradients from there (very easy).
     
  9. Emperor PPP

    Emperor PPP PKMNPurePower

    Joined:
    Feb 15, 2012
    Messages:
    853
    Likes Received:
    1
    Okay, so I'm using this to make a theme - and I've found 1 problem with it
    It's viceversa
     
  10. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    Alright changed! My bad mixed it up
     
  11. The Tempest

    The Tempest Banned

    Joined:
    Jan 22, 2012
    Messages:
    191
    Likes Received:
    1
    PO Trainer Name:
    The Tempest
    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?

    ...and before this I though Mafia Theming was hard. I feel stupid :P[/HIDE]
     
  12. TheUnknownOne

    TheUnknownOne Member

    Joined:
    Mar 28, 2011
    Messages:
    988
    Likes Received:
    3
    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);
     
  13. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    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
     
    Last edited: Jul 27, 2012
  14. The Tempest

    The Tempest Banned

    Joined:
    Jan 22, 2012
    Messages:
    191
    Likes Received:
    1
    PO Trainer Name:
    The Tempest
  15. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    Your welcome. I've only mentioned the basic stuff here, if you want to know advanced stuff, ask here.
     
  16. Darklight

    Darklight Nothing is True

    Joined:
    Jan 8, 2011
    Messages:
    1,195
    Likes Received:
    1
    Nexus, I think you should add what It took me 10 days to translate to you, i.e Colors.css file.
     
  17. Mylo Xyloto

    Mylo Xyloto if your world falls apart, i'd start a riot

    Joined:
    Mar 30, 2012
    Messages:
    952
    Likes Received:
    21
    PO Trainer Name:
    Mylo Xyloto
    Thanks for Guide dude.
     
  18. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    Alright will add when I can
     
  19. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    167
    That link is really useful for advanced changes, should be somewhere in the tutorial!
     
  20. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    Alright added thanks!
     
  21. Shiny Rayquaza

    Shiny Rayquaza Your nightmare!

    Joined:
    Jan 20, 2012
    Messages:
    398
    Likes Received:
    0
    This guide is so easy to understand, goob job on making it.
     
  22. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    Thanks Glad you liked it
     
  23. Lavaman

    Lavaman Demon Shadow 7

    Joined:
    Aug 22, 2012
    Messages:
    107
    Likes Received:
    0
    But How U capture these scenes ??
     
  24. Archerknight

    Archerknight Legends

    Joined:
    Aug 9, 2010
    Messages:
    2,430
    Likes Received:
    0
    PO Trainer Name:
    Archerknight
    Thanks a lot, I might start making a theme. :))
     
  25. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    Have fun :) PM me if you need help
     
  26. Gilad

    Gilad ¯\(°_°)/¯

    Joined:
    May 13, 2010
    Messages:
    378
    Likes Received:
    2
    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.
     
  27. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    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
     
  28. Darklight

    Darklight Nothing is True

    Joined:
    Jan 8, 2011
    Messages:
    1,195
    Likes Received:
    1
    I learned to css the same way and some of Nexus's help. Also the plugin doesn't work for me.
     
  29. Lavaman

    Lavaman Demon Shadow 7

    Joined:
    Aug 22, 2012
    Messages:
    107
    Likes Received:
    0
    Hey i make A theme Based On Pokemon Black And White How I can Post it in download link
     
  30. Sov

    Sov Bravely Default

    Joined:
    Jan 11, 2012
    Messages:
    175
    Likes Received:
    3
    PO Trainer Name:
    Sov
    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
     
  31. Lavaman

    Lavaman Demon Shadow 7

    Joined:
    Aug 22, 2012
    Messages:
    107
    Likes Received:
    0
    But How I upload it On Media Fire
     
  32. zeroality

    zeroality Artificial Insanity

    Joined:
    Apr 22, 2010
    Messages:
    1,375
    Likes Received:
    1
  33. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    Read my Guide :/ I did a How to upload your themes to the forum section, Explained in detail and as simple as possible
     
  34. TheUnknownOne

    TheUnknownOne Member

    Joined:
    Mar 28, 2011
    Messages:
    988
    Likes Received:
    3
    Theme color changer is from v1.0.5x and above series iirc (maybe even 1.0.30)
     
  35. ZoroDark

    ZoroDark i know everything

    Joined:
    Dec 25, 2011
    Messages:
    1,638
    Likes Received:
    1,075
    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.
     
  36. TheOneThatGotAway

    TheOneThatGotAway Banned

    Joined:
    Aug 14, 2012
    Messages:
    74
    Likes Received:
    0
    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
     
  37. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    What theme did you use as your base?
     
  38. TheOneThatGotAway

    TheOneThatGotAway Banned

    Joined:
    Aug 14, 2012
    Messages:
    74
    Likes Received:
    0
    I used the "Classic" Theme as my base.
     
  39. Nexus

    Nexus Legend Killer

    Joined:
    Oct 12, 2010
    Messages:
    1,287
    Likes Received:
    2
    Did you replace the path? That is (Themes/Classic/"imagename".png to Themes/"Yourthemefoldername"/"image".png) ?
     
  40. TheOneThatGotAway

    TheOneThatGotAway Banned

    Joined:
    Aug 14, 2012
    Messages:
    74
    Likes Received:
    0
    Yes I did. And still, same thing.