Song Selection

Authored by Redo. Co-authored by RockRoller .

Last edited: October 24th 2026

Again, you can start skinning wherever you want to. Most people start with whatever they’ve got an idea for, which would be gameplay or the song selection in most cases. I will begin with the song selection, because it is a major part of any skin, which will also have a huge impact on the overall feel.

It’s made out of several parts, which are:

Top and Bottom part

Mode selection

Leaderboard

Song Carousel

Bottom Part

Let us start with the bottom part. It consists out of the following images:

But what do they all do?

songselect-bottom is the background of the bottom part.

menu-back is the back button on the very left, clicking on it will make you return to the previous screen

selection-mode/mods/random/options are the 4 main buttons on the left, each of them has a -over variant, which get shown when you hover over the respective button (although, the back button doesn’t have one, it only gets a bit brighter).

mode-{osu/fruits/taiko/mania}-small images are the small mode indicators, shown in the upper half of selection-mode.

The back button is usually made 448px long so it can reach the left side of selection-mode, giving you a nice, large area to click on. It’s also a good idea to not make it too tall so it doesn’t cover the leaderboards. You don’t want people to click on their Personal Best Score, only for the game to go back to the main menu do you? You should also add some call to action like a “Back” text, or an arrow pointing left. Small things like that will make the user experience of your skin much better. You don’t have to! But it’s good practice to do so.

songselect-bottom

songselect-bottom is the background layer of the bottom part. The default asset is only 180px high, but you can make it a touch higher if you want. But, you need to keep in mind that this asset obstructs mouse clicks from interacting with elements below it, so making it too tall will results in parts of your screen not being clickable. You can extend it to roughly ~220px without it covering too much. It also stretches to fit 100% of the user’s screen width, so you do have to keep that in mind. If you want to have gaps on the sides or the bottom, you simply need to add some empty space while counteracting the stretching by making the asset be as wide as the screen (2732px wide in case of 16:9).

Selection buttons

selection-mode/mods/random/options are the buttons on the left. You can make them look like buttons, or you can make them look like not-buttons, for example take some assets related to the theme of your skin. As long as you give them proper labels, icons, or the hitboxes are more or less in their original place, people won’t have much trouble using them.

Buttons

Not-buttons

All of the buttons have their anchor points at their bottom left corner, meaning they can be extended all the way up to the upper right of the screen. But, there are two things you need to be aware of when doing this. First, if you go too high you might cover the leaderboards or beatmaps.

The second thing you need to look out for are hitboxes. The hitbox of the buttons is defined by the size of their -over images. Try to make the -over variant more or less the same size as your actual button. If you make it too big, it may break the interactivity by hovering over a different button rather than the one you intended. You can add a little bit extra space if your buttons themselves are small or if you’re trying to do somy funky layout, but make sure everything works correctly.

User Profile

Now your buttons should be done, so let’s move to the profile area, which does not have its own dedicated file. But, skinners use clever ways to skin it and make it look good. The two files we’re looking at are once again, songselect-bottom, and selection-mode. So, if you want to put something behind the user profile, you should do so on the songselect-bottom file since it’s layered below the profile area, and then add any overlays like custom labels for PP, Accuracy, Level, and fancy borders for the avatar need to be skinned on selection-mode, since this one is layered above. With the help of the templates mentioned earlier you should be easily able to align the text labels, as well as make a nice cover for the profile picture if you so wish.

Note: Just make sure you use a simple font for the small labels.

The cookie is very simple to skin. While it does not have a skinnable file, you can use selection-mode to make a cover on top of the existing one. You will need to extend its canvas far enough to the right, until it reaches the end of the screen (~2285px wide for 16:9). It’s very often the most eye-catching part of song select, so people put some nice detail relating to the theme, something as simple as the skin’s name, or in case of anime skins, a render of the character the skin is themed around.

You can’t remove the default osu! cookie, or prevent it from appearing on hover.

The hovered state of the default cookie also doesn’t fade out completely. Its afterimage is more visible on some skins than others, usually the more simplistic ones suffer the most.

The phtoshop template we provided, has a “subtraction” layer, which you can turn on to make the afterimage less apparent. It’s not perfect, and if you look very hard you can still kinda see it. But, if your skin has a very “busy” cookie, that afterimage won’t be visible even if you tried your best looking for it. That’s why most people don’t realize this is even a thing, until they make a simpler UI.

Top part

Now onto the top part. This one often is a bigger problem for beginners, but it shouldn’t be that hard to understand if you read carefully. The top part only has very few editable files:

There are a a few gimmicky things you can do with the top part, shape change, floating details around song select, custom selection-tabs, custom search bar, things dropping down when entering a map, and changing or covering the group and sort text.

Transparent

selection-mode overlays

songselect-top shape change + selection-mode overlays

selection-mode overlays (static tabs)

songselect-top

We’re gonna use songselect-top for the main background of the top part. You can technically skin it however you want.

change its shape

use it to make cool overlays

add random details to portions of the song select

or what became popular once these elements became skinnable, make them partially or fully transparent

partial transparency

full transparency

There is only one catch that comes with partial transparency… The file is repeating its rightmost 20-ish pixels from somewhere around its halfway point, and the repetitions are layered onto themselves. We don’t know the exact point which they are repeating from, it seems like it’s changing with the users in-game resolution, but if we ever find it out and confirm it, the wiki will be updated to reflect it. So the only thing you need to watch out for when skinning this file is the transparency thing, and before you ask “WhY iS tHiS eVeN a ThInG”, here is the only explanation you will need.

Games often reuse assets in different places to save on memory. This also makes it easier for the programmers since they don’t need to wait for the designers to create new assets for something. So what probably happened, when peppy was making the game, he chose to use the rightmost side of the default songselect-top to make a repetitive “stretch” for the song select. This saves him the trouble of making multiple assets to fit different screen resolutions.

Speaking of the default songselect-top. The PSD Template, as well as the PNG Template, have the default skin curve available for you to use if you’d like to have a more “vanilla” look.

Group/Sort dropdowns

These are not directly editable, but you can use selection-mode yet again to make an overlay on top of them. When using a template, simply layer your assets over them and export the file to inspect in-game. If you’re not using a template, you will have to expand your canvas until it’s tall enough to reach the top of your screen, and then align your assets by trial and error.

selection-tab

selection-tab is used for the sorting tabs you can see in the top right below the grouping/sorting dropdowns. They get multiplicatively tinted with red when they are inactive, and white when they are active. While the text gets tinted white when inactive and black when active. If you want to blank them out you need to give them properly sized transparent asset. Making them 1x1 px big will also cause their hitbox to be 1x1 and thus preventing you from clicking them.

You can once again use selection-mode to make an overlay for that part. This will allow you to have a more sophisticated design without color tinting, and a font which fits your skin more. Just remember to label them correctly, or if you use icons, make sure they are somewhat reminiscent of what the tab is supposed to represent. By making the tabs this way, you lose that one bit of visual input they provide, which is not that great for the overall user experience. But, there is one way to retain color tinting, and it’s either extending the selection-tab itself until it’s visible, or masking out parts of your selection-mode overlay to show the tabs below. Just be mindful since selection-tab also appears in multiplayer lobbies, so doing too much with it will look weird there.

The last thing selection-mode can cover is the search box. Not much to say there either, just make a box, add an icon and some text. Boom, search box done.

You only need to watch out for the text that pops up when the game shows you how many results match your search. You can either try to make a slim search bar to show it fully, or make something that completely covers it.

To make people’s lives easier, I also like to add a list of keywords the game recognizes in my skins. This also teaches the newbies that this indeed is a feature the game supports.

rank-forum

To finalize the top part, we’re gonna cover rank-forum. This is the button right next to the leaderboards dropdown. It opens the currently selected song’s web page or the modding discussion. It’s just a button so you’re not gonna be able to do much with it, but it has one restriction when it comes to its size, which is capped at 50x50. Everything after that gets cropped. If you have the need to make something bigger. Just make another overlay on selection-mode.

Overlays coming down

You may notice that when you start a map, these overlays have an animation of coming down instead of up. That’s the side-effect of using selection-mode which, if you don’t remember, is anchored to the bottom of the screen. There is no way around this. We would need to have a properly layered file in the top part of song select for this to not be an issue. But! That allows you to add things that make it seem more intentional. Like a “Good Luck!”, or some other easter egg. You need to extend selection-mode once again, and then add your text, or whatever else you want to add.

Song Carousel

The carousel mainly consists out of menu-button-background, star, ranking-{x}-small (where {x} is the grade achieved), and 2 ini commands. There are a few things you should know before you start making your song carousel:

menu-button-background is the background of the song cards on the carousel. It is color coded according to the map’s playstate, and you can check what the colors mean on the wiki. This feature sadly cannot be disabled. The only way to somewhat work around this is to remember the colors are applied multiplicatively. So using mainly black and dark greys for this asset will tone down the color change. This however doesn’t work that well with really colourful themes. You will have to try out yourself if a black one or a colourful one will fit your theme better.

Usually people just make menu-button-background a rectangle since that’s the only shape that fits the format in every place it’s used. But feel free to make them a bit more abstract, just don’t stray too much from their basic form.

Thumbnails are sized at 230x170, and are positioned 18px away from the left side of the HD (@2x) asset.

You can also choose to enable or disable thumbnails from the in-game options, as long as your skin is using a Version: higher than 2.1 (which it should because you should be skinning on 2.7 AND NOT ON Version: latest!). With thumbnails disabled one way or another, everything gets shifted to the left edge. It’s recommend to include a version of the menu-button-background in an extra folder inside your skin that does not have a window for the thumbnail, because there are people who disabled thumbnails in the osu settings.

menu-button-background is also used in a few other places. Like both the leaderboards on the left side of song select, and the gameplay ones. As well as the currently selected song in a multiplayer lobby.

Lastly you may notice that even though you made your file fully opaque it is slightly see-through in-game. That is another hard coded thing, and this time we can’t do anything about that.

Stars & Text

Stars are super simple to skin. It’s just one star png file. Not much to say about it, besides the fact that there are 2 ways these can be displayed.

The skin.ini file we are using has its Version: set to 2.7, which for the star file means it will be scaled in as the star rating increases. But there is another way the stars can be displayed, and it’s by changing the Version: to 2.1. This will make the stars “fill in” from left to right.

Version: 2.1

Version: 2.7

And you may think that’s cool, but what’s not cool is losing a lot of the skinning functionalities. If you go to the versions page on the skin.ini section of the wiki, you will find exactly which features are being taken away, but mainly, you will lose thumbnail support. Which is the main way some players recognize maps in song select (according to xooty).

If you plan to add a box around the stars, you need to be aware of the stars shifting. If you have a rank on it or if the map is for another game mode, the stars will be shifted to the right. So you need to leave space for 11 stars.

To change the color of the stars as well as the song info text you will need to add 2 new options to your [Colours] section in skin.ini:

Both of these take an RGB value.

Note: The stars and text colors get changed together and can’t be separated. But, you need to remember the color is applied multiplicatively, which means that some cleaver trickery makes it possible for stars and text to have “different colors”.

The entire song info section can move quite a bit depending on a few factors. Like whether the beatmap has a local score, or in the case of any non-standard game modes, you may notice a small icon appear to show the user what gamemode the beatmap is made for.

Grades

The last thing I need to mention are the small ranking letters. They get shared between the song carousel, the leaderboard, and the gameplay, with different anchor points for some of them. Wiki link.

All you need to know about them is that they’re named ranking-{grade}-small. The SS grades are actually addressed with X within the files, and In the case of the S/SS grades for the plays that use Hidden or Flashlight mods, you’re meant to add an H after the letter, so it becomes SH and XH.

Most of the time people wait with making the small grades until they’re done with the ones on the ranking panel, and then just scale them down to fit on song select since that saves a bit of time and effort. But you may want to make them from scratch and give them a unique look. Depending on the complexity of your ranking panel ones, it may even be impossible to fully transfer them to song select without losing detail. So if you can, make them at their native resolutions.

Note: in the case of any non-osu! game modes, the grades are shifted down a bit, because a small icon appear to show the user what gamemode the beatmap is made for.

You can use the varying anchor point for a certain gimmick. Where people made color coded blocks that highlighted the entire menu-button-background file with the grade’s color.

Or made two “different” grades for the leaderboards and song info

The only problem with that gimmick is the broken state the gameplay is left in, since it also displays the small grades during breaks leading to the very weird look of it and some players assuming it was done unintentionally (which it kinda was, but it’s more of a trade-off rather than negligence).

Leaderboard

There isn’t a lot you can do with the leaderboard. And for some reason, the leaderboard does not use scoreentry numbers for it’s numbers. Basically the only thing you can do is to add a frame or background around the whole leaderboard. Like this:

can do this by adding it onto mode-osu-small. the placement can be found on the png song selection template.

Mode icons

mode-{x} (where {x} is either osu, taiko, fruits, or mania) can be found between the leaderboard and the song carousel. It shows the currently selected game mode. Most people either blank it out or leave it as it is. But there are some gimmicky things that can be done with it. The aforementioned frame on the leaderboard can be done with it as well and you can add some background effects to the song selection.

Mode Selection

There are three main styles for the mode selection. Icons only, complete box and fullscreen, or a combination of those. You can also live some sort of window in the mode-selection, since the 4 options will get tinted purple when hovered over, which would be visible trough some sort of window.

There are two ways of skinning the mode selection. You can split it all up into their files or blank out three of them and use one for everything. The four files are mode-osu-med, mode-fruits-med, mode-mania-med and mode-taiko-med. I recommend using this template, made by Galvit if you plan to go with only one file.

Credits