PhantomGamers/SFP

New Steam Big Picture - steamloopback.host

LaserFlash opened this issue · 3 comments

New Steam Big Picture

Steam is updating its Big Picture UI, this new design is entirely html & css and based on the UI the steam deck uses.

This update is no longer only in beta, but does need a launch arg to enable it.

Updated Big Picture is now available for testing. You can read more about it in this blog post. Modify your Steam client shortcut and add -gamepadui on the command-line to automatically start Steam in the new Big Picture Mode. Alternatively, pass -newbigpicture to start in Desktop mode and have access to the new Big Picture Mode at any time.

Investigation

We finally have a steamloopback.host, and so can enable our approach to skinning. This host is in Steam/steamui, the same directory the library currently uses.

It also looks like the new UI shares most of the code the existing friends/chat use.

Desktop Friends/Chat

<link href="https://community.akamai.steamstatic.com/public/shared/css/shared_global.css?v=ovy6qNJipq47&amp;l=english" rel="stylesheet" type="text/css">
<link href="https://community.akamai.steamstatic.com/public/css/webui/friends.css?v=mHhi5-MxW4Rq&amp;l=english" rel="stylesheet" type="text/css">

Desktop Library

<link href="/css/library.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css\156.css">
<link rel="stylesheet" type="text/css" href="/css\1010.css">

Big Picture - one set of imports

<link href="https://community.akamai.steamstatic.com/public/shared/css/shared_global.css?v=ovy6qNJipq47&amp;l=english" rel="stylesheet" type="text/css">
<link href="https://community.akamai.steamstatic.com/public/css/webui/friends.css?v=mHhi5-MxW4Rq&amp;l=english" rel="stylesheet" type="text/css">
<link href="/css/library.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css\156.css">
<link rel="stylesheet" type="text/css" href="/css\1010.css">
<link rel="stylesheet" type="text/css" href="/css\5742.css">

So Big Picture uses the same CSS files, plus one additional file. Presumably 5742.css contains the styles applied to the new big picture mode specific UI.


An existing Library skin works to some degree (when looking at a specific games page).

However, a friends/chat skin does not. This is primarily due to the files for the friends list needing to be in the Steam/steamui directory when theming Big Picture mode.
If the files are located in that directory they will be applied and work.

Thanks for looking into this. In the next release I'll at least have SFP automatically create a steamui/friends.css so that the list doesn't break when SFP is applied. Maybe I'll even just symlink them together, though I'm not sure if that is the best approach.

@LaserFlash Super late to this but some of the dependencies on SFP have been updated so I've been going through and working on the next update for it. Are you saying that if the friends.custom.css is put in steamui/ that it should just work for the big picture friends list currently? Because I just tested this on my end and it doesn't seem to be working hm

On the flip side though the friends and chat aren't broken at least like they used to be in the old big picture mode, they just have the default skin for me.

Yes, that was the case (when I investigated)

When I originally posted this, I also needed to put the friends.original.css in steamui/ if I wanted the chat/friends to load, other wise it was broken in the same way the old big picture was.

If that's no longer the case it could be they have changed the setup.