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 Spoiler 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): QPushButton { background-color:skyblue; border:1px solid black; border-radius:5px; padding:5px; } 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): QPushButton { background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CCCCFF, stop:1 #9999FF); border:1px solid black; border-radius:5px; padding:5px; } ...and now we have our own styled button! Now, to specify what the button is to look like when hovered over and pressed: Code (text): QPushButton:hover { background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #DDDDFF, stop:1 #AAAAFF); } is used when the button is hovered over with the mouse, and Code (text): QPushButton:pressed { background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #AAAAFF, stop:1 #DDDDFF); } QPushButton:checked { background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #AAAAFF, stop:1 #DDDDFF); } 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 Spoiler 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): QMenuBar { background: qlineargradient(x1:0 y1:0 x2:0 y2:1 stop:0 #666666 stop:1 #222222); border-bottom:1px solid white; } ...makes the MenuBar have a dark gradient effect... Code (text): QMenuBar::item { padding:6px; color:white; } This is making each item of the MenuBar padded, meaning having space added around it, and changing the text colour to white. Code (text): QMenuBar::item:selected { background: rgba(255,255,255,100); border:1px solid black; border-radius:7px; } This creates a semi-transparent overlay over the item when it is hovered over with the mouse or selected using ALT. Code (text): QMenuBar::item:pressed { background: qlineargradient(x1:0 y1:0 x2:0 y2:1 stop:0 #333333 stop:1 #555555); } 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): QMenu { border:1px solid white; color:white; background: #333333; } You can, of course, change these values blabla... If you want to specifically style the menu sprouting from the MenuBar, you use: Code (text): QMenuBar QMenu { border:1px solid white; color:white; background: #333333; } Note: You can style SubMenus (Like the Tiers->VGC menu, etc) like this: Code (text): QMenuBar QMenu QMenu { border:1px solid white; color:black; background: #CCCCCC; } And you can just keep adding QMenus to go further on! Textboxes Spoiler Textboxes are a very important aspect of any great theme imo, and here's how to change their appearance~~~ Code (text): QLineEdit { background-color:rgba(255,255,255,100); border:1px solid black; border-radius:5px; padding:3px; } Look how beautiful it is. Now, when we hover over it, let's make it get lighter with: Code (text): QLineEdit:hover, QLineEdit:selected { background-color:rgba(255,255,255,150); } 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:
Thanks guys :) if there are any other little things for which you'd like to have tips on styling, just ask!