I've been playing with the CSS of the new client UI and it seems almost everything regarding the UI itself can be customised with CSS - if you can locate the corresponding code. I suspect in the coming months there will be many guides detailing how to add / remove / edit various parts of the UI floating around as well as many easily editable skins.

I've seen many posts asking for information on how to remove logos / icons, remove / resize overly large game headers and edit the font colour of games which are not installed for easier readability. This guide will tell you how to do these things.

For the changes made in this guide to apply after you've restarted Steam, right click your steam shortcut and add -noverifyfiles to the "target" text field. This will stop Steam attempting to "verify" that you're using their version of the libraryroot.css file. Some users have stated that setting the file to "Read-only" will also have the same affect.

Go to \Steam\steamui\css and open libraryroot.css (it's probably worth making a copy of this file at this point, before any edits have been made).

Scroll to the very bottom of the text file you've just opened and add the CSS below.

This will remove the large header image and logo seen when selecting any game.

.sharedappdetailsheader_TopCapsule_NZMJ6 {
display:none!important;
}



If you don't want to completely remove the header and logo images, you can resize this element by using the CSS below and adjusting the size in pixels however you wish.

.sharedappdetailsheader_TopCapsule_NZMJ6 {
height: 150px!important;
}

This will remove the small game icons to the left of every game in your library list.

.gamelistentry_GameIcon_ga1hy {
display:none!important;
}

This will change the width of the list of games located on the left, change "400px" to whatever width you like.

.library_LeftListSizableContainer_9sPoV {
width: 400px!important;
max-width: 50%;
}

.gamelistentry_Installed_2ws8D {
color: #fff!important;
}

You can use any hex colour here, #fff (white) is the default.

.gamelistentry_Uninstalled_5YTBr {
color:#888!important;
}

You can use any hex colour here, #A9A9A9 (darkgray) is the default.

This will remove the "What's New" section from your library.

.libraryhome_WhatsNewContainer_gdZT7 {
display:none!important
}

The entire UI is designed using CSS, so any CSS property will work (underlines, italics, element sizes, colours etc.)

e.g.
Change font style: font-family:Arial;
Change font size: font-size: 15px;
Bold font. font-weight:bold;
Underlined text: text-decoration: underline;
Italic text: font-style: italic;

If your changes aren't being applied, add !important before the closing semicolon.

I've edited some of the CSS and created a dark theme of sorts. Screenshots below show the differences. Simply replace the libraryroot.css file with my version which you can download using the Google Drive link below. I've also included a copy of Steam's default libraryroot.css file.



⠀

Download link:

https://drive.google.com/open?id=1rlguI9kfqGzIxjnJ6qncTGhVXDebPm1z