[Developer Guide] How to skin the new Chat

[Darth]

This guide is for developers only. I can't provide user support.

All Valve needs to do is step 3 on their end (ideally to each of the CSS files used by the client) and it'll instantly work for everyone with no 3rd party tools needed.

1. Make sure Steam's web cache is up to date with Chat resources
2. Find https://steamcommunity-a.akamaihd.net/public/css/webui/friends.css in your Steam CEF cache folder. It'll need un-gzipping, and re-gzipping when finished editing, so CEF uses it.
3. Add

@import url("https://steamloopback.host/friends.custom.css");

to the top of friends.css
4. Put a new friends.custom.css file in your Steam client's 'clientui' folder and add some CSS to verify it works, for example

div {outline:red solid 1px;}

5. Close and re-open any Steam Friends/Chat panels to see the updated CSS.
6. Redo steps 1-3 when Valve updates serverside.

I don't want to manage a tool/script for this so I'm sharing my research in hope that there are developers who can benefit from it. Best case would be for Valve to add it but I can't get in contact with them.
If anyone finds a better way or can improve on this please post here.

tldr for users: This is a first step in making Steam Skins available for chat, please give developers some time to get this to you. These instructions are for developers.

[Phantom]

Have you actually tested this or is this just theoretical? Could you clarify where the Steam CEF cache folder is? Are you referring to Steam/package?

Thanks a lot for your efforts, I was trying to brainstorm ways to get theming working as well since it apparently still works out of the box on linux and osx, and if this method works it's way simpler than my previous ideas.

[76561198812909282]

Originally posted by Phantom:

Could you clarify where the Steam CEF cache folder is? Are you referring to Steam/package?

Isn't the CEF cache supposed to be in the following directory?

C:\Program Files\Steam\appcache\httpcache

[Phantom]

Originally posted by Stealth M4ss:

Isn't the CEF cache supposed to be in the following directory?

C:\Program Files\Steam\appcache\httpcache

Yeah I thought that might have been what he was referring to, however as far as I can tell I only have images stored in there.

[Darth]

The folder with the CEF cache is located in your Windows profile's AppData\Local\Steam\htmlcache - not sure where it is on Linux and Mac. The one in the actual Steam directory seems to be just for game icons and avatars.

Originally posted by Phantom:

Have you actually tested this or is this just theoretical?

This is fully tested and works! :D
I use it to add a 1px black border around the Friends/Chat windows (better matches the Steam Client) and to add some padding to the top of the chat window. That's boring for screenshots though so here is a background image on context menus https://i.imgur.com/7upeHJR.png

[Phantom]

Originally posted by Darth:

The folder with the CEF cache is located in your Windows profile's AppData\Local\Steam\htmlcache - not sure where it is on Linux and Mac. The one in the actual Steam directory seems to be just for game icons and avatars.

Ah thanks, I did look in that folder when I first found your thread but didn't know how to view chrome cache files at that time and forgot about it when I figured it out.

Now I just need to read up on how to modify them and maybe I can put together a tool to automate it, but chrome cache files are completely new to me.

I did get css working with Steam dev mode, but the process needs to be redone whenever the friends window is closed so it's definitely not ideal: https://i.imgur.com/T5IihEP.png

[Darth]

CEF's cache files are gzipped. I use "-d -k -f" to uncompress, then edit it, then "-k -f" to recompress. You'll need to do some temporary renaming with extensions.
And unfortunately you need to do every single file until you locate the friends.css file, so before doing it I strongly recommend running "Clear Steam Browser Cache" and then log back in to Friends (to have it re-cache friends.css) before looking through them. My tool generally catches it around "f_000003".

[Phantom]

Thanks again for your help! Works great and I have a pretty good idea of how to automate the process.

[Darth]

@developers - This method has been proven to be reliable and functional for many months now. Assuming Valve do similar things for the upcoming Client beta update, it will still be possible to skin and I'll post any additional details here.

If you develop an injection tool please try follow a standard format of using "originalfilename.custom.css" of the file that is being modified, eg "friends.custom.css" or "shared_application.custom.css". For full skin packs where the skin is provided please use a subfolder like "exampleskin/anything.css".

[Tharon]

Darth, you forget something.

Valve developers don't want the Chat UI and the upcoming library UI to be skinned or modified. It's not a matter of what they can do, but of what they WANT to do.