Playnite Forums
SteamNite 2.0 - Printable Version

+- Playnite Forums (https://playnite.link/forum)
+-- Forum: Extension Database (https://playnite.link/forum/forum-3.html)
+--- Forum: Themes - Desktop (https://playnite.link/forum/forum-8.html)
+--- Thread: SteamNite 2.0 (/thread-58.html)

Pages: 1 2 3 4


SteamNite 2.0 - Le Mal - 12-08-2019

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 -

[Image: Xb2Pqw7.png]

[Image: VDJuW9m.png]
[/align]

[Image: NMgH912.png]





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.

[Image: lucOPx2.png]
If you want to achieve the same look as in the screenshots, here are my recommended settings :

 [Image: v1msy5v.png]
[Image: BPRqtm0.png]
[Image: BBfAijh.png]
[Image: gMZzYiS.png]
[Image: XKv8JRd.png]

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



RE: SteamNite [BETA] - Spoobs Gohstly - 12-10-2019

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


RE: SteamNite [BETA] - Le Mal - 12-10-2019

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


RE: SteamNite [BETA] - yoshinatsu - 12-10-2019

This is really great though.


RE: SteamNite [BETA] - ADAM - 12-10-2019

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.


RE: SteamNite [BETA] - Le Mal - 12-10-2019

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.


RE: SteamNite [BETA] - darklinkpower - 12-10-2019

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


RE: SteamNite [BETA] - Le Mal - 12-11-2019

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.


RE: SteamNite [BETA] - Crow - 12-11-2019

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.


RE: SteamNite [BETA] - darklinkpower - 12-11-2019

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


RE: SteamNite [BETA] - darklinkpower - 12-11-2019

You can see how they look different for me here:

[Image: EkYFWMv.jpg]
[Image: JVGLy9I.jpg]


RE: SteamNite [BETA] - Le Mal - 12-11-2019

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.


RE: SteamNite [BETA] - ADAM - 12-16-2019

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


RE: SteamNite [BETA] - Le Mal - 12-16-2019

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


RE: SteamNite [BETA] - ADAM - 12-16-2019

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


RE: SteamNite [BETA] - Le Mal - 12-16-2019

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


RE: SteamNite - rudy208 - 03-09-2020

how do you do the gradient on the background photo?


RE: SteamNite - Le Mal - 03-09-2020

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>



RE: SteamNite 2.0 - Xrckjx - 04-28-2020

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.


RE: SteamNite 2.0 - Le Mal - 04-29-2020

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.