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] Theme Odds and Ends

Discussion in 'Arts and Graphics' started by SongSing, Jun 14, 2013.

  1. SongSing

    SongSing KILLL

    Joined:
    Jan 2, 2013
    Messages:
    641
    Likes Received:
    191
    PO Trainer Name:
    SongSing
    Hello! I'm SongSing, and I'm for those of you looking to make really in-depth and cool themes, here are some important aspects that may not be initially apparent. If you have no idea how to create themes at all, you should see Nexus' post first.

    Buttons

    This is something I myself was wondering about, and so after playing around (and looking at some other themes) I came up with this:

    Code (text):
    1.  
    2. QPushButton {
    3.     background-color:skyblue;
    4.     border:1px solid black;
    5.     border-radius:5px;
    6.     padding:5px;
    7. }
    8.  
    [​IMG]

    This works for all buttons in the client, unless explicitly styled otherwise later on. This includes the Tier Selection buttons on the Challenge Window. You don't have to make edges rounded, etc., obviously. Using CSS, you can make them look however you'd like! ^_^

    Now, we can add some gradient to this to make it look hawt:

    Code (text):
    1.  
    2. QPushButton {
    3.     background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1,
    4.         stop:0 #CCCCFF, stop:1 #9999FF);
    5.     border:1px solid black;
    6.     border-radius:5px;
    7.     padding:5px;
    8. }
    9.  
    ...and now we have our own styled button!

    [​IMG]

    Now, to specify what the button is to look like when hovered over and pressed:

    Code (text):
    1.  
    2. QPushButton:hover {
    3.     background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    4.         stop:0 #DDDDFF, stop:1 #AAAAFF);
    5. }
    6.  
    [​IMG]

    is used when the button is hovered over with the mouse, and

    Code (text):
    1.  
    2. QPushButton:pressed {
    3.     background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    4.         stop:0 #AAAAFF, stop:1 #DDDDFF);
    5. }
    6.  
    7. QPushButton:checked {
    8.     background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
    9.         stop:0 #AAAAFF, stop:1 #DDDDFF);
    10. }
    11.  
    [​IMG]

    is used when the button is pressed/checked. We can just reverse the colour values to create an inward pressed effect. We use checked as well since some buttons are checkbox-esque (such as the aforementioned Tier Selection buttons in the Challenge Dialog).

    That's it for buttons! ^_^


    Menu

    The MenuBar is the row of buttons at the top of your client (File, Theme, Style...), while Menus themselves pop up when clicking a MenuBar item or right-clicking certain items. Both can be made to look how you'd like. c:

    For the MenuBar, I'm going to make a dark sort of styling.

    Code (text):
    1.  
    2. QMenuBar {
    3.     background: qlineargradient(x1:0 y1:0 x2:0 y2:1
    4.         stop:0 #666666 stop:1 #222222);
    5.     border-bottom:1px solid white;
    6. }
    7.  
    ...makes the MenuBar have a dark gradient effect...

    [​IMG]

    Code (text):
    1.  
    2. QMenuBar::item {
    3.     padding:6px;
    4.     color:white;
    5. }
    6.  
    This is making each item of the MenuBar padded, meaning having space added around it, and changing the text colour to white.

    Code (text):
    1.  
    2. QMenuBar::item:selected {
    3.     background: rgba(255,255,255,100);
    4.     border:1px solid black;
    5.     border-radius:7px;
    6. }
    7.  
    This creates a semi-transparent overlay over the item when it is hovered over with the mouse or selected using ALT.

    [​IMG]

    Code (text):
    1.  
    2. QMenuBar::item:pressed {
    3.     background: qlineargradient(x1:0 y1:0 x2:0 y2:1
    4.         stop:0 #333333 stop:1 #555555);
    5. }
    6.  
    [​IMG]

    Finally, this will create a pressed-inward effect like before. You don't have to make it look like this, however. Use your imagination!

    For menus, you can use:

    Code (text):
    1.  
    2. QMenu {
    3.     border:1px solid white;
    4.     color:white;
    5.     background: #333333;
    6. }
    7.  
    You can, of course, change these values blabla... If you want to specifically style the menu sprouting from the MenuBar, you use:

    Code (text):
    1.  
    2. QMenuBar QMenu {
    3.     border:1px solid white;
    4.     color:white;
    5.     background: #333333;
    6. }
    7.  
    [​IMG]

    Note: You can style SubMenus (Like the Tiers->VGC menu, etc) like this:

    Code (text):
    1.  
    2. QMenuBar QMenu QMenu {
    3.     border:1px solid white;
    4.     color:black;
    5.     background: #CCCCCC;
    6. }
    7.  
    [​IMG]

    And you can just keep adding QMenus to go further on!



    Textboxes

    Textboxes are a very important aspect of any great theme imo, and here's how to change their appearance~~~

    Code (text):
    1.  
    2. QLineEdit {
    3.     background-color:rgba(255,255,255,100);
    4.     border:1px solid black;
    5.     border-radius:5px;
    6.     padding:3px;
    7. }
    8.  
    [​IMG]

    Look how beautiful it is. Now, when we hover over it, let's make it get lighter with:

    Code (text):
    1.  
    2. QLineEdit:hover, QLineEdit:selected {
    3.     background-color:rgba(255,255,255,150);
    4. }
    5.  
    [​IMG]

    And of course, you can make these look however you personally would like them to. I'm just showing you the basic sort of "skeleton" for modeling these things.


    If you have anything specific you'd like me to add to this, feel free to ask! c:
     
    Last edited: Jan 22, 2014
  2. Hidden

    Hidden Member

    Joined:
    Nov 26, 2012
    Messages:
    42
    Likes Received:
    0
    Very nice
     
  3. Lavaman

    Lavaman Demon Shadow 7

    Joined:
    Aug 22, 2012
    Messages:
    107
    Likes Received:
    0
    Nice Work Song Sing!!!
    I really like Find Battle Button :D
     
  4. ! HC ! Angelite

    ! HC ! Angelite Hellfire Black Widow

    Joined:
    Jul 24, 2013
    Messages:
    93
    Likes Received:
    14
    PO Trainer Name:
    #Free Angelite
    Quite amazing guide, thanks for this!
     
  5. SongSing

    SongSing KILLL

    Joined:
    Jan 2, 2013
    Messages:
    641
    Likes Received:
    191
    PO Trainer Name:
    SongSing
    Thanks guys :) if there are any other little things for which you'd like to have tips on styling, just ask!