Steam File Verification

We have commonly been editing steamui\css\libraryroot.css and clientui\css\friends.css to customise the appearance of our Steam Library and Friends List + Chat, respectively.

Using SteamFriendsPatcher

If you use SteamFriendsPatcher you would know about using steamui\libraryroot.custom.css and clientui\friends.custom.css instead to add your customisations.

How does SteamFriendsPatcher work?

I tried out Steam Friend Patcher - which creates libraryroot.original.css and libraryroot.custom.css (basically separates the original css and custom css into separate files) and uses @import in libraryroot.css to use them. Also pads out the rest of the file with blank spaces to match the original file length.

-- Jonius7

5.css, libraryroot.css file structure (SteamFriendsPatcher)

The first lines are as follows:

/*patched*/LF
@import url("https://steamloopback.host/libraryroot.original.css");LF
@import url("https://steamloopback.host/libraryroot.custom.css");LF

NOTE: no carriage returns (CR), just newlines (LF)

Then the rest of the space is filled with tabs (→) or spaces ( ), up to the original file length. This is important, otherwise Steam will detect the file has changed and redownload the original one to overwrite it.

Without SteamFriendsPatcher

How to modify libraryroot.css and keep changes on Steam restart

Steam will reset the css (if not in dev mode) on every restart if it detects the length of the css file is different. So I've been editing and then taking out spaces, and comments along the way. (also keeping a backup) The length of libraryroot.css is currently 803797 bytes [outdated].

-- Jonius7

This is the most comprehensive forum post I could find on how to edit and keep edits in libraryroot.css (before I used SteamFriendsPatcher):

How to get rid of the "What's New", and how to (almost) blank the right (main) part of the new Library UI

Search for the text "WhatsNew". You should be able to find this:

.libraryhome_WhatsNewContainer_gdZT7 {
    position: relative; }

Change BOTH lines, so that they instead say this:

.libraryhome_WhatsNewContainer_gdZT7{
display:none;!important}

(Note how the first line is missing a space, while the second line has an extra character length.)

Alternatively, here's the old method. Change those lines to this:

.libraryhome_WhatsNewContainer_gdZT7 {
height:0%; opacity:0; }

(Note how both lines are exactly the same length as before. In this older version, you only need to modify the second line.)

This old method will cause the Add Shelf button to be broken. The first (new) method doesn't have this problem.

-- Quint the Alligator Snapper

-- Original credit: Taco_Taco, Blitz4

Make sure that you have the exact same number of characters in the replaced file, or else this won't work right and will keep getting reverted every time you restart Steam. The new method subtracts one character from the first line and adds one more to the second line, to fit the code. The old method only changes the second line, and keeps enough spaces to make it the same length. WARNING: Simply doing a copy-paste may change the number of spaces or whether there's a linebreak, so you may need to copy this by hand, or edit it after pasting.

-- Quint the Alligator Snapper

Using a Steam skin instead (webkit.css)

So, webkit.css in the skins/[skin name]/resource folder does appear to work, however it seems to handle some CSS differently compared to modifying libraryroot.css, and likely requires more !important tags to stick. Viewing it [the webkit.css tweaks] in the Chrome Dev tools labels webkit.css code as "injected stylesheet".

-- Jonius7

Yeah the webkit is a bit odd. I know it works but not for everything. The patcher works really well though.

-- The HopelessGamer