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] Styling a Theme with CSS

Discussion in 'Arts and Graphics' started by SongSing, Aug 23, 2014.

  1. SongSing

    SongSing KILLL

    Jan 2, 2013
    Likes Received:
    PO Trainer Name:
    Mmmmmmmm, hi hello. Looks like we're going to be making a theme together.
    It's going to be hot.

    Okay, so at this point you should be able to open your theme's default.css file with Notepad++ without difficulty. If not, go here. Open up your default.css file and let's get rollin'.

    ** Note: I will be using the Classic theme as my base. It probably doesn't matter, but I'm just saying. **

    Links are below. Except the omnirefrence, I still need to do that!

    Optional Tools:
    Just like normal tools. But optional.
    • A colour picker with hex - This is pretty good. Helps you to see colours that you want to use.
    • A CSS beautifier - This is pretty good. Keeps your CSS not messy

    QT-specific things:
    Some stuff that applies to normal CSS doesn't apply to QT CSS (which is what PO's themes use), and vice versa.

    In QT's CSS, many of the web-related things (such as media queries, etc) don't exist. Some things, such as gradients and rgba values, are defined differently as well. You'll learn how to define them below.

    Colours will be used throughout any theme, as they're pretty important. Colours can be defined in a few different ways:

    Hex is used like alot. Take a gander at this infographic:
    If you need to know what hex is (like why there are letters), read this. If you're too lazy, hex is basically like: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, and so on.

    RGBA is also useful. It's pretty simple, the format is: rgba(red, green, blue, alpha). Every value is 0-255 (even alpha, which is normally 0-1), with the alpha controlling translucency (0 is completely see-through, 255 is normal).

    @Cirno did a really great post that involved these, check it out here. (It's under Part 3 - Background Colours and Gradients)​

    Now, QT has a nice and specific reference doc with detail I could never match in this thread, so check it out here.

    Welp! You should know the basics of QT CSS styling now! If you look at the default.css file, it's pretty easy. You should be able to change the things in there with no problem :) Let's move on to the PO-specific things......................

    (If you have any questions or feel that something isn't made clear enough, feel free to comment!)
    Last edited: Aug 23, 2014
    uso and Raducan like this.