SteamUI-OldGlory

A set of customisable Steam Library tweaks, with an installer.
Also a reference that you can use to learn how to make your own tweaks.

Download Latest Version | Quick Guide | Wiki | Known Issues | Troubleshooting

Check /dev branch for in-progress tweaks.

Video Guide and GIF

Showcase of Tweaks

(click to expand)

Condensed sidebar buttons

Show more games

Fix blurred images

Improved game page layout

Show more DLC and screenshots

Play bar moved up into box

Classic Layout

Quick Guide

Patching and CSS

Install SteamFriendsPatcher. NOTE: (Since v0.1.36-beta, "Steam Beta" in Settings, needs to be ticked.) Run it, it will patch some files.
Download SteamUI-OldGlory. Extract the files to a folder, and run old_glory.exe
Select the options you want to use, then click Install.
[Release 5.5] If using Shiina's steam-library theme:
Whenever the Steam Client updates, you'll need to use the Remake JS option in Settings if you were previously using any JS tweaks.
OldGlory should prompt you to download new files as "small updates" when they are released. Main updates will be notified in the log window.
To fix all your blurry game portrait images, use this build of Steam Missing Covers Downloader.

Manual Editing (CSS/SCSS)

HOW TO: Enable/Disable CSS modules and features

More details

variables.css contains a list of CSS variables that tweak certain parts of the Library.
A few of these can be configured using the GUI, but there are additional options here you can set manually.
If you manually edit the file, use the Reload Config button to load them into the Configurer.

scss/libraryroot.custom.scss contains the @imports for each of the CSS "modules", that each cover a different part of the Steam library.
You can enable and disable certain modules by adding // to the beginning of the line
Click Install in the Configurer to apply your changes.

OldGlory Configurer (GUI)

Main Options

Install CSS Tweaks - main layout tweaks will be applied to Steam Library
Box Play Button - turns the Play Bar into a floating box in the header
Vertical Nav Bar - turns the Navigation/Links bar into a floating vertical menu in the header, on the right side
Classic Layout - Vertical Nav Bar is now aligned with the game page content, with the Friends Activity/News column pushed to the bottom of the page.
Landscape Game Images - changes Portrait Game Images in the HOME page to Landscape ones.
Library Theme

Actions

Install - Will install selected CSS and JS tweaks. If no JS options have changed, will just install the CSS tweaks (which is faster than installing both CSS and JS)
- The app will copy the needed files to and from steamui folder as need.
Reload Config - If you have modified fixes.txt variables.css or old_glory.json manually, then Reload Config will grab these new values and update the checkboxes and values in the GUI (CSS Options + JS Options), without having to restart the GUI app. Changing files in /scss or /themes doesn't require Reload Config.

In Advanced -> Quick Links:

Open OldGlory folder - open the OS file explorer to the main folder where OldGlory and files are located .
Open steamui folder - open the steamui folder within Program Files/Steam where the library files are located.
Apply config.css: This option has been added to accommodate those who might have their own config.css in [steamdir]/steamui already. If you are instead editing the config.css in themes/, clicking this button will copy config.css over to [steamdir]/steamui.
- This may change in the future

In Settings and About:

Remake JS - Deletes local JS files and re-applies JS tweaks. Use this when some JS tweaks may not apply due to new JavaScript. Usually:
- after a Steam Client update, or
- switching between Steam Stable and Steam Beta
- Technical details: clear_js_working_files - deletes local library.js, libraryroot.js, libraryroot.beaut.js run_js_tweaker - recreates libraryroot.beaut.js and applies JS tweaks
Reset - triple click to reset the steamui directory back to using default library theme. Useful if something screws up or you want to test a clean slate.

CSS Options

What's New - Changes position and display of What's New
Game List Zoom - Compact rows for Left Sidebar (Games List)
Show Left Sidebar - Show/Hide Left Sidebar (Games List)
Glare/Shine - Removes glare/reflection on HOME page images
Game Image Transition - Fade in time for HOME page images
Home Page Grid Spacing
Game Page Layout - Swap Game page columns or default
Game Image Opacity - HOME page: Dim Game Images, or Uninstalled Game Images
[Open variables file] - opens variables.css using OS default text editor
[Open scss file] - opens scss/libraryroot.custom.scss using OS default text editor

JS Options

Home Page Grid Spacing - sets grid spacing to 8px 5px (default 24px 16px)
Increase Number of Screenshots and DLC displayed - On game page: Screenshots: 4 -> 8, DLC 6 -> 12
HoverPostion Fix for GameListEntry - Hover position fix if using 75% Game List Zoom in CSS Options
Scrolling Tweak - Scroll past ADD SHELF Button on load
Change Game Image Grid Sizes - Change the size of Game Images on the HOME page, based on width in pixels. There are 3 values here to change, corresponding to Small, Medium, Large sizes in settings. Defaults are:
- Small 111
- Medium 148
- Large 222
Vertical Nav Bar - corresponds to Main Option Vertical Nav Bar. No need to configure manually.
Landscape Images JS Tweaks - corresponds to Main Option Landscape Game Images. No need to configure manually.
Stop What's New Events from Loading - removes loading of What's New Events
HOME page Scrolling, reduce number of ComputeLayout calls - Improve smoothness of HOME page Scrolling
Game Properties Window Size - Reduce width of Game Properties window to closely match old one
CLASSIC Sticky image background and spillover into sidebar - Game Header image will stay in background as you scroll, and is visible through the Left Sidebar (Games List)
**Experimental** Don't load HOME game images, only alt text - Can improve performance by not loading images and only the alt text
**Experimental** Remove Game Page Bloat - Game pages will only load the Play and Navigation bars. May improve performance.

Included files:

old_glory.exe - App to apply SteamUI-OldGlory's tweaks
variables.css - CSS variables to customise
fixes.txt - JS tweaks
libraryroot.custom.css - output CSS file. Do not edit this directly, use the \scss folder files
\scss - (New in Release 5.0)
- libraryroot.custom.scss - contains all the @imports for smaller .scss files. The GUI handles enabling/disabling _module_playbarbox, _module_verticalnavbar, _module_landscapegameimages, _module_classiclayout. Manually comment out the other modules (for now)
- _user_module1.scss- put your custom CSS code here
- _user_module2.scss - put your custom CSS code here
\themes - Folder containing theme files
- _shiina.scss and config.css.original - Shiina's steam-library dark theme
- _spiked.scss - Thespikedballofdoom's Dark Library theme
- _acrylic.scss - Theme based on EliteSkylu's Acrylic Steam concept
- _crispcut.scss - (WIP) Theme by Jonius7, emphasising white app section boxes
old_glory_data.json data for old_glory.exe. Editing it is not required but it allows some data to be updated/hotfixed outside of having to rebuild the .exe

Other files are copied from theSteam\steamui directory as required.

config.css for Shiina's steam-library theme will be created from config.css.original the first time you enable the theme. Alternatively, you can put your existing config.css file here and the app will use it.

JavaScript Tweaks

Some tweaks are disabled by default. Under JS Options, you can select which options to enable/disable.

Manual Editing (JS - fixes.txt)

More details

fixes.txt contains the list of JavaScript tweaks.
Each tweak is under its own Section Heading marked with the line starting ###.
Tweaked lines are the original JS separated by two spaces from the tweaked JS:
[original js]██[tweaked js]
Remove the ### for each line under the Section Heading to enable.
When old_glory applies the JS tweaks, commented lines with ###, and blank lines are ignored. You can use this to make fixes.txt more readable.
NEW (Release 5.5): You can now use the previous line of JS to search for the line you want. Just separate the two lines with ~~

Format: [previous line JS]~~[original JS]██[tweaked JS]

(Planned, coming soon): Using any single variable letter with $^

Eg: Lo.searchSuggestions becomes $^$^.searchSuggestions

Fix Blurred Game Images

Download Steam Missing Covers Downloader and run missing_cover_downloader

Quick Links

steam-library Support

Shiina's steam-library theme is included as one of the starting themes you can choose from.

https://github.com/AikoMidori/steam-library

Troubleshooting

If Library is not working, try one of these things (and restart Steam if necessary). If it still doesn't work, try the next thing in the list.

Check SteamFriendsPatcher has patched the library CSS:
- Also check it is patching the right file: (5.css Steam Stable, 6.css Steam Beta Update)
- use the Clear Steam Cache button if necessary.
Go to Task Manager and End Task on Steam Client WebHelper (let it restart)
Try these Steam Settings (and restart Steam)
- Downloads -> Clear Download Cache
- Web Browser -> Delete Web Browser Cache
Use Remake JS button under Settings and About (this should also be done when Steam Client updates and the JS has changed)
Use Reset button under Settings and About
Delete steamui folder
- Optional: Try these Steam Settings (and restart Steam)
  - Downloads -> Clear Download Cache
  - Web Browser -> Delete Web Browser Cache

If none of these steps work, please open an Issue

State whether you are on Steam Beta Update or not.
Which CSS Options/JS Options you have enabled/disabled.

The program can't start because api-ms-win-crt-math-l1-1-0.dll is missing from your computer.

Install Microsoft Visual C++ Redistributable 2015-2019

Dev Notes

For more details, go to Story.

CSS Changelog

SteamUI-OldGlory Wiki

Debugging Steam Library Yourself

To debug the Steam Library yourself, run Steam with the -dev tag.

Create a shortcut to Steam -> Right Click -> Properties.
In Target, after Steam.exe" add -dev so the end of Target looks like this: Steam.exe" -dev
After opening Steam, open up the Dev Tools by clicking in the library window and pressing F12.

Build `old_glory`

Requires Python 3.8+

Install pyinstaller: pip install pyinstaller

Install libraries using pip: pip install jsbeautifier jsmin rjsmin pillow requests requests_oauthlib libsass pyyaml schema rich

Build old_glory.exe: pyinstaller -w --icon=steam_oldglory.ico --clean --onefile old_glory.spec

The .spec file is included in the repository.

Advanced

Sometimes you may need to install pyinstaller like this: Building PyInstaller Bootloader Windows Compilers

This is mainly for me to try and get an .exe that doesn't trigger false positives on virustotal.com

In the future, I may try to build using cx_freeze instead.

What does `js_tweaker` do?

the JS goes through this process:

libraryroot.js - original file
libraryroot.beaut.js - beautified js using jsbeautifier
libraryroot.modif.js - beautified js with modified tweaks from fixes.txt
libraryreet.js - minified libraryroot.modif.js using jsmin

Limitation that the script reads libraryroot.beaut.js line by line, so some complex tweaks are unavailable to be added at the moment.

js_tweaker will use libraryroot.beaut.js if it already exists. This means:

you can experiment in libraryroot.beaut.js (make a backup first) and delete it afterwards if you want to go back to the clean version libraryroot.beaut.js

New (5.7.3) library.js is also now being used. The modified file is called librery.js

JunkiEDM/SteamUI-OldGlory