Can You Chnage The Backgrounds Of Osu Songs?

Song Selection

Again, yous can beginning skinning wherever you want to. Near people start with any they've got an thought for, which would exist gameplay or the vocal selection in most cases. I will begin with the song option, considering it is a major part of whatsoever skin, which will besides have a huge touch on the overall feel.

It'south fabricated out of several parts, which are:

Top and Bottom Part

Manner Choice

Leaderboard

Vocal Carousel

Lesser Part

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

[email protected]
[email protected], [electronic mail protected], [electronic mail protected], [email protected]
[email protected], [email protected], [email protected], [electronic mail protected]
[email protected], [email protected], [email protected], [email protected]

But what do they all do? menu-back and pick-mode/mods/random/options are the buttons on the left, the -over images are the ones that get shown when you lot hover over the buttons (although, the back button doesn't accept i, information technology just gets a bit brighter) and the mode-osu/fruits/taiko/mania-small images are the small mode indicators, shown on top of selection-mode. There are many ways of designing the song option, it'south totally up to you. By and large though, there are 4 main ways of shaping the bottom part.

There aren't that many things you need to know to get either of these 4 results. Whenever you work with the song choice, this template will be of huge help. On there is everything that the vocal selection contains, with its standard sizes. Y'all basically merely need to trace over it, and and then, after you're finished, cutting everything into their corresponding images.

There are a few things you tin can do with the bottom part that goes beyond the intended paradigm sizes. The ii chief things are a height change and a shape change. The default bottom function is only 180px high, just you lot can make information technology higher. All of the buttons accept their anchor points at their lesser left corner, meaning they tin be extended all the way upwards to the upper screen border. But, there are two things you need to be aware of when doing this. Offset, if you go too high you lot might cover the leaderboards or beatmaps. Yous tin extend the bottom part up to roughly ~220px (shown on the correct, 5th row), without covering anything.

Yous could likewise only have certain parts get above 180px, especially in the heart of the screen, that space is more or less empty anyhow.

The second thing y'all need to await out for are hitboxes. The hitbox of the buttons is defined by the size of their -over images, significant it won't be a problem for selection-mode/mods/random/options, merely carte-back doesn't have an -over image. The hitbox of it is defined by the size of the button itself. This is the reason why you can't get in too big, considering then you lot might non be able to click your own topscore on the leaderboard. (The maximum size for menu-back (Hard disk) that I would recommend is something around 220px x 500px)

The other affair I mentioned that you can exercise with the bottom function was changing the shape. This is basically just the same matter as a peak increase, you only increment it only in certain parts.

In that location are just 3 other things I want to talk near regarding the lesser part. Icons, text and the userprofile. One of the most of import things for the icons and the text is consistency. You often see people utilize icons with unlike styles and differently sizes. You should always utilise the aforementioned size for all of your icons, and if you apply a round or square-ish pattern for them, use that blueprint for all of them. It'due south bad pattern when three icons are ane mode and the quaternary i has a different mode. You too should go along their spacing consistent. And if the icons use a lot of lines/curves you lot use should use roughly the same line thickness. If they are thicker or smaller information technology will feel unbalanced overall.

The same goes for text: never use dissimilar text sizes. People often utilize dissimilar sizes to fit the text for buttons with longer names (e.g. options and random). You should rather endeavour to either brand all of the text pocket-sized or abbreviate random and options. Mutual abbreviations are OPT, OPTN, OPTS and RAND, RND, RNDM. Other abbreviations should be fine, every bit long equally information technology'due south articulate what they mean.

Note: This evidently doesn't simply hold truthful for the bottom role, these are some general design guidelines you should follow. I will not mention this again for the other parts of tutorial, please go along it in heed.

Then the last thing regarding the bottom function should be the user profile. There are two things that I want to talk about. The elements of information technology and the outline. In that location are a few options to chose from hither. Some people just make a cut-out and leave it like information technology is, merely that tin can look a bit lazy. In that location are nicer ways to work with the user contour. You should either add some sort of transition to the edge, a proper edge or make it expect seamless. You can simply add together some transparency onto the function with the user profile. Non bully, merely still improve than nothing. A nice border or a seamless alloy would be the all-time. For the seamless blend I used transparency. The part with the user profile actually is highly transparent white. But thanks to the transparency information technology looks like light greyness, this also works colours other than greyness.

For the elements you lot simply take to comprehend the default ones. This allows you to add together a tint to the levelbar by using a transparent color, reshape the profile image and covering upward the default text. When y'all cover up the text you just take to make sure to leave plenty space for 100.00% accuracy, PP amounts over 10000 and levels over 99.

Top office

At present onto the pinnacle part. This one oft is a bigger problem for beginners, only it shouldn't be that difficult to sympathise if y'all read advisedly. The height part only has one editable file, [electronic mail protected], which is used for the sorting tabs you tin can see in the top right with the grouping/sorting options. They get tinted red when they are inactive and white when they are active, while the text gets tinted white while beingness inactive and black while existence active. If you want to blank them out do not make them 1 ten 1 pixels big, their size defines the hitbox. Also, if your selection-tab is black or completely transparent, the text on it will not be visible while its selected. In that location are 3 main things yous can practice with the top office:

Yous can colour the outline, yous can add a background and you tin can change the shape. The pinnacle part isn't directly editable, the file for information technology is non skinnable. Meaning nosotros will need a workaround. To change the colour of the outline and add a background all we demand is the mode-x-pocket-size elements (abridgement for mode-osu-minor, mode-fruits-minor, way-taiko-small, mode-mania-small). The important factor is that it is in additive alloy mode and doesn't have a size restriction.

To change the colour we basically just demand to practise a small subtraction to get the color we want (or at to the lowest degree the closest i to it). All yous demand to do to change the color of the topline is to take this file and change its color. You tin can't however change information technology to straight the color yous want the line to be. The blend manner of the style-10-small images comes into play here. Due to the additive blend mode information technology's colour values will ever be added onto the elevation line instead of just covering it. This results in a limitation regarding the colour the superlative line can be. Whatsoever colour that has lower RGB values than the blue of the line (which is 49, 94, 237) tin not be achieved. To the right is a quick overview of the colours that can be achieved.

To become the right colour for the file yous just need to calculate the colours the file needs:

R = R(of the color you want to archive) - 49
G = G(of the colour yous want to annal) - 94
B = B(of the colour you want to archive) - 237

If y'all get a negative value it means that you can not go a perfect fit. Yous, however, merely calculated the nearest possible result. You lot just need replace the negative values with 0. If y'all want, for example, a lite blue colour (78, 216, 247) the top bar should use a dark green (29, 122, 10). If you lot want a scarlet colour (247, 49, 79) you volition non be able to get that exact cherry, the best consequence would be a dark pinkish (198, 0, 158) that would outcome in this pink in-game:

The next thing would be to add a groundwork to the mode-ten-pocket-size. This isn't that hard, all you demand to practice is to have your layer with the outline and beneath information technology a layer with the background. We don't really have any restrictions for the background, thanks to the background of the default top function being black. At that place are however a few things you should look out for. If the background is besides bright you will have a hard time reading any of the song information.

To counter this y'all either will have to cull something else for the background, or y'all could darken the areas where the vocal information is.

The last bones matter we can do with the top part is to change its shape. The simply two elements that cover the whole screen are menu-back and manner-x-small. The problem with the mode-x-smalls is that they are in additive blend mode, they won't be able to cover the peak part properly, but nosotros will be still using them for something else. And menu-back's hitbox is defined by information technology's size, and then if you made it cover the whole screen, the whole screen will become the back button. The element we will use is option-fashion. It is placed 448px (HD) from the left screen border, meaning nosotros will simply be able to form the shape from the 449th pixel onward. Selection-mode should only contain a black shape, while the actual image is on manner-osu-small. If we would not do it like this it would be near impossible to properly line upward the two files with each other due to how osu!south rendering works. Mode-osu-minor also allows usa to encompass those leftmost 448 pixels, but we even so accept the same colour limitations as mentioned before. The easiest fashion to explain this is to merely show what nosotros will do with the file.

Note that if you lot don't want to reshape and just want to colour your outline with a colour that is not uniform y'all tin can cover the line with selection-mode, this will make information technology and then that the line from pixel 449 onwards will be black, significant you tin achieve any colour you desire. Just add a blend from any colour yous have on the leftmost 448 pixels of the line into the colour you accept on the rest of the outline. The beatmap info icon gets covered by this, leaving you lot with the opportunity to add together your own.

Y'all might've noticed that the black function that covers the shape doesn't accomplish all the style to the top. There is a reason for that, if y'all brand it higher yous will embrace the map info.

At that place are a a few contemporary things you tin can do with the elevation part, custom option-tabs, custom search bar, skilful luck dropdown texts and changing or covering the group and sort text.

Covering the group and sort text is actually easy. You but need [email protected] for information technology. You have to cover the text. Y'all will take the same problems as with changing the top office shape, roofing data. If you make the cover to loftier it will comprehend longer song names. Simply cutting it of every bit shown on the example for reshaping. If you likewise want to supercede the text and not just cover it up, simply put the new text or icon onto [email protected]. The one thing you need to be wary of is that this will break on different languages, because they have longer/shorter words for grouping/sort.

Custom choice tabs work the same manner basically. Just cover the ones that already exist and put your own ones and your own text onto manner-osu-small. The main point of this is that you lot can change the text and box color with this and use selection-tab styles that normally wouldn't exist possible. You can just brand the actual selection-tab a black/completely transparent box, but don't make it a 1x1 px blank image. As I already mentioned previously, the hitbox of pick-tab is defined by its size. The alignment for where y'all need to place your option tabs tin be found on the song selection template.

The search bar works the same mode as the other gimmicks, encompass up the default and put your ain onto manner-osu-small. The things you have to look out for is that Blazon to search! is on top of choice-mode, meaning it tin't be covered up. The other thing is that the box that is ordinarily effectually the searchbar expands once you type anything in it. And then make sure that your pattern is large enough to cover upwardly the extended state of the search bar.

You may have noticed that if yous skin the superlative part that it will drop downwardly if you enter a beatmap. Information technology sadly is not possible to disable it, merely it also allows us to add things like "Practiced Luck!" to the dropdown. You demand to extend the sheet past the aforementioned amount at the acme and the bottom and then you can simply add a that "Practiced Luck!" text, or whatever else you lot want to add together, outside of the part that is shown on the song selection. On the song selection template the dark-brown part is the exact size of the screen, pregnant you lot need to go to a higher place the brown part.

Song Carousel and Leaderboard

There isn't that much that I need to say about these two parts. The carousel mainly consists out of [email protected], [electronic mail protected] and 2 ini commands nether [Colours]. With the ini commands y'all can set the colour of the text on menu-push button-background. SongSelectActiveText sets the color for the currently selected card, SongSelectInactiveText sets the color for all the non selected cards. There are a few things yous should know before you outset making your song carousel:

The cards in the carousel go tinted in various colours. This characteristic sadly cannot exist disabled. These colours are all on the skinnable files spreadsheet. Basically, the only fashion to somewhat piece of work around this is to use mainly black and night greys for the carte-button-background, this withal doesn't work that well with really colourful themes. You will take to try out yourself if a blackness one or a colourful ane volition fit your theme better.
The thumbnail is placed 17px abroad from the left border of the image. The thumbnail is about 227 10 170 pixel big.
The stars will get slightly bigger the more in that location are.
If you lot plan to add together a box effectually the stars, you need to be aware of the stars shifting. If you lot have a rank on it or if the map is for another game mode, the stars volition be shifted to the correct. So you demand to exit space for eleven stars.
Stars used to have a different behaviour. They used to get partially filled. This however was changed with peel.ini version 2.two, which brought united states thumbnail back up. Every bit such you lot cannot accept thumbnail images and the old star behaviour.
Everything gets shifted to the left border if in that location is no thumbnail. It'southward recommend to include a version of the menu-push-background in an extra folder inside your pare that does not have a window for the thumbnail, considering at that place are people who disabled thumbnails in the osu settings.

There isn't a lot you lot can do with the leaderboard. And for some reason, the leaderboard does not apply scoreentry numbers for information technology's numbers. Basically the just thing you tin do is to add a frame or background around the whole leaderboard. Similar this:

You can exercise this by calculation it onto mode-osu-minor. the placement tin can be found on the song selection template.

[email protected] (and fashion-fruits, -taiko and -mania) can be found between the leaderboard and the song carousel. It shows the current game mode you are playing. Virtually people either bare it out or leave it as it is. But there are some gimmicky things that tin can be done with information technology. The aforementioned frame on the leaderboard can be washed with it every bit well and you tin can add some groundwork effects to the song selection.

The concluding affair I demand to mention are the pocket-size ranking letters. They go shared between the vocal carousel and the leaderboard. They have different anchor points on both. If your font isn't monospaced (fixed-width) it tin be a real nightmare to align them properly, considering if you lot align them to the letters to the left, they volition await weird on the leaderboard. Just the contrary tin happen if you align them to the centre. That is ane of the reason why I would recommend a monospaced font for the ranking messages.

Way Pick

At that place are iii main styles for the fashion selection. Icons merely, complete box and fullscreen, or a combination of those. You lot can besides live some sort of window in the mode-selection, since the four options will get tinted purple when hovered over, which would exist visible trough some sort of window.

There are two ways of skinning the mode choice. Y'all can split up it all up into their files or bare out three of them and use 1 for everything. The four files are manner-osu-med, mode-fruits-med, mode-mania-med and mode-taiko-med. I recommend using this template, made by Galvit if you program to go with but 1 file.