SteamNite 2.0

[Le Mal]

Hi everyone !

So I've been working on this little project for a few days now. I likes the new Steam UI Update but the whole thing was sluggish and prone to crashes. Playnite is way more efficient when it comes to performance and memory management. 

So I decided to create a skin largely inspired by the new Steam UI. Entering

SteamNite

- Screenshots -

[/align]

Grid View Demo

DOWNLOAD HERE

How to install

Just double click the file or drag and drop the .pthm file into Playnite's windows

Usage

The whole interface is based on the new Steam UI, which means you can use assets you used on your Steam library with this skin.

If you want to achieve the same look as in the screenshots, here are my recommended settings :

 

Games' icon are used as logos. Unfortunately, you can't change logos' location or size in Playnite itself. You can do it by editing an XAML file, however this applies to every logo. Here's how :

- Head to your Playnite's install directory (by default C:\Users\"User"\AppData\Roaming\Playnite)

- Go to Themes > Desktop > SteamNite > Views and open "DetailsViewGameOverview.xaml"

- Go to line 39, where it says "Name="PART_ImageIcon". You can edit logos' size with "MaxHeight" and "MaxWidth" values, as well as logos' location by editing "VerticalAlignment" and "HorizontalAlignment". Accepted values are Center, Top, Bottom and Center, Left, Right.

- Don't hesitate to report bugs and give me feedbacks. I'll try to polish the skin as much as possible. Also don't hesitate to edit the skin yourself if you know how to use Microsoft Blend.

Latest changelogs on the download page

2.0.4: - Fixed group bars colors

2.0.3: - Fixed transparent bar not visible on the entirety of the screen
                     - Added fixes for high-res screens

2.0.2: Game genres/tags/categories are now scrollable

2.0.1: Game genres won't go out of the info box anymore

2.0: *Changes marked with a * are meant to resemble Steam's interface :

       - *Game covers now react in Grid view when hovering the mouse over a game
       - *Tahoma font is now recommended
       - *Fixed info button placement
       - Game's informations are now properly aligned in Details View
       - *Background behind game infos
       - Fixed margins in Details View
       - *Game's links are now under game's infos box
       - *Clock icon at the left of "Time played"
       - *"Last played", "Time played" and "Completion" are now all caps
       - *Transparent bar under game logo
       - *Filter panel and explorer panel now match Steam library's color scheme
       - *Filter button now matches Steam library's one
       - Fixed menu button size

1.0: Official release, now out of BETA ! Added SteamNite Alt for different screen resolutions

BETA 0.9 : - Play/Install button now in all Caps

                    - Install/Launching button now stylized properly

BETA 0.8.8 : Fixed Install button and launched/launching buttons disappearing

BETA 0.8.7 : Fixed Steam friends button disappearing

BETA 0.8.6 : Fixed misaligned Play Button

BETA 0.8.5 : Fixed hero background not scaling properly (Stretch = "UniformToFill")

BETA 0.8 : Initial release

[Spoobs Gohstly]

The background images do not seem to fit correctly regardless of settings.

[Le Mal]

Please make sure the background image you're using is identical to Steam Library's hero, with a resolution of 1920X620 or 3840x1240.

[yoshinatsu]

This is really great though.

[ADAM]

First off, great theme! I like it a lot. I do have one tip and one suggestion.

1. If you set fade image stretch = UniformToFill it'll solve the the background not render to fit properly if the resolutions are off.
2. Don't get rid of the install button. Make it display for games that are not installed.

[Le Mal]

Thanks for the feedback ! I'll fix the image issue in a few hours.
As for the install button disappearing, this is one of the issues that I haven't managed to fix. Pretty sure I can fix that easily, but I'll do that later. I want to have a proper release.

[darklinkpower]

This theme may make me switch to the new steam covers, it looks pretty good. I have opened an issue on github suggesting to add the new logos and backgrounds, hopefully they get added in the future. Great job and thanks for sharing and btw, I think Crow fixed .pthm files not being possible to add as an attached file in the forum, in case you don't want to use google drive.

edit: I have a bug to report, the "Steam Friends" icon doesn't work

[Le Mal]

Hmmm, I didn't really edit the Steam friends button, so that issue might be on your end, it works perfectly for me. I tried on the two computers I have.

[Crow]

If the friends button icon you use come from font (instead of being an image file), then maybe darklinkpower doesn't have that font present on their system.

[darklinkpower]

That's weird, I'm seeing a different icon than the one used in the default theme but a restart fixed the issue.

[darklinkpower]

You can see how they look different for me here:

[Le Mal]

Oh, that icon change is intended. I can revert it if you don't like (always taking feedback). Also, I pushed an update that fixed the disappearing button.

[ADAM]

Hello. I decided to edit your DetailsGameOverview view style to give more emphasis to the cover and background images. It's a personal preference and i won't share it as a fork of your theme, but here is the code anyways. You might find it useful, I dunno. Keep up the good work.

https://pastebin.com/1j6XVUve

[Le Mal]

I don't exactly have the time to try it, would it be possible to have a screenshot ? This might be interesting

[ADAM]

https://imgur.com/WmdnH9J
https://imgur.com/jkZ3iak

[Le Mal]

Oh, pretty cool ! The covers are really emphasized. But I'll keep everything close to the Steam interface.

[rudy208]

how do you do the gradient on the background photo?

[Le Mal]

This is taking care of it in DetailsViewGameOverview.xaml

<FadeImage x:Name="PART_ImageBackground" Stretch="UniformToFill" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                                <FadeImage.ImageOpacityMask>
                                    <RadialGradientBrush GradientOrigin="0.5,0" Center="0.5,0" RadiusX="2" RadiusY="1">
                                        <RadialGradientBrush.GradientStops>
                                            <GradientStop Color="Black" Offset="0.9" />
                                            <GradientStop Color="Transparent" Offset="1" />
                                        </RadialGradientBrush.GradientStops>
                                    </RadialGradientBrush>
                                </FadeImage.ImageOpacityMask>
                            </FadeImage>

[Xrckjx]

Im having an issue,

The details at the bottom are not aligned and everything is off.

The details seem low down and cut off as well.

Ive attached an image.

[Le Mal]

That's because your screen resolution is less than 1080p or you have DPI scaling enabled. If your screen has a resolution of less than 1080p, unfortunately the theme will look off. I'm working on a version for sub-1080p screens (though I don't expect any release time soon), so you'll have to wait for that one.