Support us on Patreon
PayPalDid you know you can change the boot animation on the Steam Deck? Well you can and the community has naturally gone and done some pretty amazing things with it.
After messing around for a little while, I've come up with a full and hopefully easy enough guide to follow both in video and text form for anyone interested in doing it themselves. This was directly inspired by a Reddit post on it where the user changed their Steam Deck bootup to a Futurama animation with the Steam Deck wording which is pretty fantastic.
YouTube videos require cookies, you must accept their cookies to view. View cookie preferences.
Direct Link
Direct Link
Text Guide:
- First, you need a .webm video file of an animation, whatever you want. You can easily convert videos to webm using services like CloudConvert, your favourite video editor or even ffmpeg scripts.
- In your Home folder in a file manager, unhide the files. CTRL+H or via the options menu in the top right.
- Head to .local/share/Steam/steamui/movies/ and make a backup of deck_startup.webm if you wish.
- Get the filesize of the deck_startup.webm by right click -> properties and make a note of the one in brackets.
- Replace the original deck_startup.webm with your chosen video file, using the same name.
- Open a terminal window inside this folder (right click -> open terminal) and run this command (with the correct filesize you noted):
truncate -s 1840847 deck_startup.webm - Go into .local/share/Steam/steamui/css/ and make a backup of library.css and again make a note of the filesize. This file tends to change filesize between Steam Deck updates.
- Open the library.css file, go to the line that has "video" and edit just after it to read like this:
video{flex-grow:1;width:100%; height:100%; z-index:10} - Now open a terminal inside this folder as you did before, then run this (with the correct filesize you noted):
truncate -s 38492 library.css
Now you're done. You can reboot and watch your new boot video! Enjoy.
Article taken from GamingOnLinux.com.
Some you may have missed, popular articles from the last month:
The comments on this article are closed.
Sep 26, 2022
very cool
edit: what happens if the files are not truncated? Does the video just not load or does the boot error out?
Last edited by Pendragon on 26 September 2022 at 4:54 pm UTC
edit: what happens if the files are not truncated? Does the video just not load or does the boot error out?
Last edited by Pendragon on 26 September 2022 at 4:54 pm UTC
0 Likes
mr-victory Sep 26, 2022
Quoting: Pendragonvery coolSteam notices the file is modified and redownloads it.
edit: what happens if the files are not truncated? Does the video just not load or does the boot error out?
2 Likes, Who?
Quoting: mr-victoryYep, this exactly. It’s there to ensure it’s right on what Steam expects.Quoting: Pendragonvery coolSteam notices the file is modified and redownloads it.
edit: what happens if the files are not truncated? Does the video just not load or does the boot error out?
0 Likes
Philadelphus Sep 26, 2022
Pretty cool idea. Do you need the CSS line with flex-grow if you render the video natively at 1280×800?
Also, clearly it works so I must be missing something, but how does truncating the CSS file after you've added something to it not cause something important to be truncated from the end?
Also, clearly it works so I must be missing something, but how does truncating the CSS file after you've added something to it not cause something important to be truncated from the end?
2 Likes, Who?
Quoting: PhiladelphusPretty cool idea. Do you need the CSS line with flex-grow if you render the video natively at 1280×800?I'm curious how truncating the css file doesn't cause problems as well. It's a source file with information in it. What happens to that information?
Also, clearly it works so I must be missing something, but how does truncating the CSS file after you've added something to it not cause something important to be truncated from the end?
Truncating the video file makes a bit more sense, but still makes me wonder if setting the file size in an editor isn't better/safer. I'm not that familiar with the truncate command, but I guess it closes the file properly? Some files like RTF, PDF, and some image files have footer information and simply truncating bits/bytes at the end of the file can corrupt it.
Anyway, I guess it works and the video explanation by Liam is very well done so my pedantic concerns aside, well done!
1 Likes, Who?
As I understand it, the main point is ensuring parity with the default files otherwise Steam will overwrite it and it won’t work. Yes it will overwrite any extras you put in it but the purpose of this guide was this alone.
3 Likes, Who?
Used your method and turned my boot screen in to a PS2 boot, with SteamDeck instead of PlayStation2, worked like a charm, if anyone wants a vid of it, I can upload it to youtube at some point for others to use
3 Likes, Who?
Quoting: randylQuoting: PhiladelphusPretty cool idea. Do you need the CSS line with flex-grow if you render the video natively at 1280×800?I'm curious how truncating the css file doesn't cause problems as well. It's a source file with information in it. What happens to that information?
Also, clearly it works so I must be missing something, but how does truncating the CSS file after you've added something to it not cause something important to be truncated from the end?
The change you're supposed to apply actually makes the file a bit smaller (you edit `0` to `1` and `300px` to `100%` twice), so the point of that truncate command is to make the file larger again to match the original size.
5 Likes, Who?
ElectricPrism Sep 27, 2022
What KDE theme is that on dolphin? Ye olde steam theme looks pretty legit.
Last edited by ElectricPrism on 27 September 2022 at 9:48 am UTC
Last edited by ElectricPrism on 27 September 2022 at 9:48 am UTC
1 Likes, Who?
Quoting: Liam DaweAs I understand it, the main point is ensuring parity with the default files otherwise Steam will overwrite it and it won’t work. Yes it will overwrite any extras you put in it but the purpose of this guide was this alone.Yeah, I got that and it's a cool article. I hope my questions didn't come across as trying to undermine your tutorial. I was just curious about the technical details. It's a very cool hack.
Quoting: dosThanks for the info and explanation. I didn't realize truncate would resize and not just cut as the name implies. It isn't something I've used. This makes a lot more sense now.Quoting: randylQuoting: PhiladelphusPretty cool idea. Do you need the CSS line with flex-grow if you render the video natively at 1280×800?I'm curious how truncating the css file doesn't cause problems as well. It's a source file with information in it. What happens to that information?
Also, clearly it works so I must be missing something, but how does truncating the CSS file after you've added something to it not cause something important to be truncated from the end?
The change you're supposed to apply actually makes the file a bit smaller (you edit `0` to `1` and `300px` to `100%` twice), so the point of that truncate command is to make the file larger again to match the original size.
2 Likes, Who?
See more from me