GRUP STEAM
For a Better Client [FABC]
Gabung ke Grup
GRUP STEAM
For a Better Client [FABC]
149
ANGGOTA
6
SEDANG BERMAIN
47
ONLINE
Dibentuk
16 September 2020
Bahasa
Bhs. Inggris
Ringkasan Diskusi Event Anggota Komentar
Semua Diskusi > Diskusi Umum > Rincian Topik
 Topik ini telah disematkan, kemungkinan topiknya penting
Jonius7 28 Nov 2020 @ 12:18am
2
SteamUI-OldGlory: CSS and JS Tweaks for the Steam Library + Themes!
Ever since June when the old Library UI would no longer work without converting the PackageInfo, I got to work tweaking the default layout of the new UI and fixing all the big annoyances.

While much of the new UI can be customised with CSS and JS, it requires that the user copy and modify a bunch of files while keeping with the same file size limit, so that Steam does not delete them and redownload the original files on restart.

Well, that is hardly needed anymore, with the release of my GUI application to apply SteamUI-OldGlory tweaks!
https://i.imgur.com/MoimYoT.png


Repository (Code):
https://github.com/Jonius7/SteamUI-OldGlory

Download Page:
https://github.com/Jonius7/SteamUI-OldGlory/releases

Video Guide (new version):
https://youtu.be/foCewvyOszQ

Steam Missing Covers Downloader[github.com] which you can use to download missing cover images from https://steamgriddb.com

So what features do my tweaks provide?
There are many tweaks, but these are the main ones:
- (CSS) Condense Home and Search Buttons in left sidebar down to 2 rows
- (CSS) Make List of games more compact and show more games (like the Old UI)
- (CSS) (GUI) Configurable What's New on/off
- (CSS)(JS) Enable Landscape Game Images and change their sizes!
- (CSS) Remove lots of padding and margins

- (CSS) Swap columns on game page, decreased Header Size, simpler background blur
- (JS) Show more Screenshots and DLC on Game Page
- (JS) Increase number of DLC shown in DLC Manager at a time, from 5 to 12
- (GUI) Easily switch between configurations of CSS + JS (Box Play Button, Vertical Nav Bar, Classic Layout
- (GUI) Choose between themes for your library


What do I want to add in the future?
Some potential tweaks are more complicated and I have not yet figured out "clean" tweaks to include them:

Next
- (GUI) Expanding the Quick CSS options in the GUI
- (GUI) Any other custom modification requirements for the GUI, as they come up
- (CSS) Some tweaks to CSS of Classic Layout

Potentially Simple
- (JS) Adding context menu items[github.com]
- (JS) Add in some keybinds such as pressing Enter to launch games
- (JS) Disabling certain features in the JavaScript (may improve performance)
- (GUI) Having the GUI auto-check for updates and download them
- (GUI) Having the GUI detect when Steam has a client update and act accordingly

Involved
- (JS) Significantly increase scrolling responsiveness on HOME page
- (JS) Coding in a list view

Difficult
- (JS) Coding in a list view, with sortable columns
- (JS) General performance improvements (likely requires reworking of many areas of the JS)
- (CSS)(JS) Providing these options "in-client" instead of separately in a GUI application
Terakhir diedit oleh Jonius7; 7 Des 2020 @ 2:11am
< >
Menampilkan 1-15 dari 102 komentar
Quint the Alligator Snapper 28 Nov 2020 @ 2:30am 
Great work! Disappointing that Valve basically just shoved this work onto fans, but so be it.



(BTW, you see that interface style in your OldGlory configurer? Why can't Steam just be built to use that style? Why does it need all this custom styling on Valve's part?)
#1
Tharon 28 Nov 2020 @ 3:21am 
Great work Jonius. I've pinned the thread to make it more visible.
#2
Tharon 28 Nov 2020 @ 3:25am 
Diposting pertama kali oleh Quint the Alligator Snapper:
(BTW, you see that interface style in your OldGlory configurer? Why can't Steam just be built to use that style? Why does it need all this custom styling on Valve's part?)

Because is unappealing and feels outdated. It's perfect for a tool, but not for a portal/platform like steam.
The old Steam UI was a nice compromise (still bloated, but not so much), but the new is unbearable.
#3
Pepper 28 Nov 2020 @ 11:20am 
Thank you so much for this Jonius7.
#4
Jonius7 28 Nov 2020 @ 4:45pm 
No problem! I am looking for feedback on using the GUI and the tweaks
#5
Jonius7 7 Des 2020 @ 2:09am 
Video Guide on how to use the GUI and apply tweaks now out:
https://youtu.be/foCewvyOszQ
#6
Pepper 7 Des 2020 @ 9:16am 
Great Video.
Unbelievable valve isn't using some of those tweaks you've got Jonius7. Things like dlc height seem no brainier to me. Looks like should be simple for them to have toggle option for landscape game images even with an adjustable size slider. Or even at least have things minimally customizable like they do the store page.
#7
Jonius7 7 Des 2020 @ 10:46pm 
Thank you, and yes DLC Manager row height indeed. It's really impractical having to scroll through 30 DLC when you can only see 5 at a time on the screen, just because having big DLC images for a manager is a higher priority for "Valve Library Devs"

Diposting pertama kali oleh Pepper:
Great Video.
Looks like should be simple for them to have toggle option for landscape game images even with an adjustable size slider. Or even at least have things minimally customizable like they do the store page.

Something like GOG Galaxy's option. It would be easier for them to add a menu or option somewhere rather than me having to mod in said menu or option into the library (which I am still not sure on how I would do)

===

In other news, I have put out a new version 4.0.2 with minor fixes to work with the Dec 8 Steam Client Update.
Terakhir diedit oleh Jonius7; 7 Des 2020 @ 10:47pm
#8
Tigerwolf 15 Des 2020 @ 8:50am 
Hello! I have a problem, when i turn on Vertical Nav Bar, game page show me a error =( (sorry for bad english)


Something went wrong while displaying this content. Refresh
Error Reference: Library_6241052_d867472585d2b173
Cannot read property 'x' of undefined
#9
Jonius7 15 Des 2020 @ 8:09pm 
This error happens if only one of JS or CSS is applied for the Vertical Nav Bar. Both should be configured correctly automatically.

Can you tell me the steps you took to get the error? Which buttons you pressed.
Terakhir diedit oleh Jonius7; 15 Des 2020 @ 8:10pm
#10
Tigerwolf 15 Des 2020 @ 8:55pm 
I check JS settings and fixes.txt, but don't know how check CSS
I use SteamFriendsPatcher, then check all checkbox exclude Theme. In CSS settings choose Hide, and check all checkbox in JS Settings, and then press Install
#11
Jonius7 16 Des 2020 @ 6:46am 
Have you been using SteamUI-OldGlory since before Dec 8? Since there was a Steam update, the JS needs to be reloaded.

There are a couple of buttons under the settings button (bottom right), to Remake JS and Reset to try and get a clean install.

Additionally, if you are on the Beta branch of Steam, themes may not work (but the vertical nav bar should)
Terakhir diedit oleh Jonius7; 16 Des 2020 @ 6:49am
#12
Tigerwolf 16 Des 2020 @ 9:08am 
I don't use SteamUI-OldGlory before...
Trying Remake and Reset< trying reloading SteamUI-OldGlory from github. All tweaks exclude Vertical Nav working, themes working too
#13
Jonius7 16 Des 2020 @ 2:31pm 
Can you copy-paste (Ctrl+C, Ctrl+V) the output from the app when you apply the changes?

Basically all the lines with FIX:

If it is applying the Vertical Nav Bar correctly, the lines
FIX: if (s < c + m && (l++, r++, u = c = 0), true ? p.push({ FIX: x: 0, FIX: y: (n - 10) * d

should appear in the output.

If we can't figure out anything there,
I'll have you send over libraryroot.custom.css and libraryreet.js from C:\Program Files (x86)\Steam\steamui
so I can do a file comparison.
Terakhir diedit oleh Jonius7; 16 Des 2020 @ 2:33pm
#14
Tigerwolf 17 Des 2020 @ 9:14am 
https://drive.google.com/drive/folders/1USofxXK3j7hIcDnX6sEzj84ObObBwqgI?usp=sharing

Running js_tweaker
library.js changed to use tweaked JS.
Finding Fixes...

FIX: }, n = An = "", [4, y.a.get(n, {
FIX: h = (t.children[0] && t.children[0].childNodes[0] && t.children[0].childNodes[0].childNodes[0] && t.children[0].childNodes[0].childNodes[0].classList && t.children[0].childNodes[0].childNodes[0].classList.contains("gamelistentry_HoverOverlay_3cMVy") && t.children[0].childNodes[0].childNodes[0].classList.contains("gamelistentry_Container_2-O4Z")) || (t.children[0].classList && t.children[0].classList.contains("gamelistentry_FriendStatusHover_2iiN7")) ? d.nTop * 0.75 : d.nTop,
FIX: scrollTop: 30
FIX: }, e.m_nScrollTop = 30, e.m_elTarget = D.createRef(), e
FIX: eAssetType: 3,
FIX: eAssetType: 3,
FIX: rowHeight: 40,
FIX: t = t.slice(0, 12),
FIX: eAssetType: 3,
FIX: var e = this.props.details.vecScreenShots.slice(0, 9).map(function(e) {
FIX: if (s < c + m && (l++, r++, u = c = 0), true ? p.push({
FIX: x: 0,
FIX: y: (n - 10) * d
FIX: return 1 == (e = Sa.GetComputedDisplaySize(e)) ? (n = 80, r = !0) : 2 == e ? n = 120 : 3 == e && (n = 160), {
FIX: childHeight: n * 43 / 92,
FIX: eAssetType: 3,
FIX: gridColumnGap: 5,
FIX: gridRowGap: 8,
FIX: o = e.nWidth * 43 / 92,
FIX: o = e.nWidth * 43 / 92,
FIX: gridColumnGap: 5,
FIX: gridRowGap: 8,
FIX: }(n), jd.Initialize(t), this.SetStateLoaded(),document.getElementsByClassName('smartscrollcontainer_Body_3lDcz')[0].scrollTop = 30, [3, 9];
FIX: /*for (var n = [], r = 2; r < arguments.length; r++) n[r - 2] = arguments[r];
FIX: e || s(new Error(d.apply(void 0, Object(l.g)([t], n))), 2), c.apply(console, Object(l.g)([e, t], n))*/

Re-minify JS file
File libraryreet.js written to c:\program files (x86)\steam\steamui
File fixes.txt written to c:\program files (x86)\steam\steamui
Terakhir diedit oleh Tigerwolf; 17 Des 2020 @ 9:16am
#15
< >
Menampilkan 1-15 dari 102 komentar
Per halaman: 1530 50

Semua Diskusi > Diskusi Umum > Rincian Topik
Tanggal Diposting: 28 Nov 2020 @ 12:18am
Postingan: 102
Buat Diskusi Baru

Pedoman dan Aturan Diskusi