steamui css gamelist spacing

[Ult0r]

Hi,

I'm currently trying to change some of the underlying css to make the horrible new UI atleast somewhat bearable. Does anyone know the element (or class of that element) that causes the gap between gamenames in the gamelist (library view)? The element containing the text has no additional spacing and it doesn't seem to be a property of the surrounding divs either. My assumption right now is, that it's a grid-element with a fixed row-height causing it, but i didn't find anything like that.

For the ones interested, i could eliminate some of valves new nastyness that they call "upgrade" with the following added to Steam\steamui\css\libraryroot.css (parts are copy-pasted from reddit, steam forums and stackoverflow):

/* shrinks the picture at the top when having selected a game */
.sharedappdetailsheader_TopCapsule_NZMJ6 {
height: 150px!important;
}

/* removes icons from the gamelist */
.gamelistentry_GameIcon_ga1hy {
display:none!important;
}

/* removes what's new container */
.libraryhome_WhatsNewContainer_gdZT7 {
display:none!important
}

/* removes workshop section in game details*/
.appdetailsworkshopsection_WorkshopSection_2PfKa {
display: none;
}

/* removes discussion section in game details*/
.appdetailsbroadcastsection_BroadcastBox_9nwsC {
display: none;
}

[Jonius7]

Originally posted by SotiCoto:

I had to extend the length of my modified version by about 24,000 characters to fit the new size.
It definitely got bigger.

Ok, I had another look, so the old version was around 839 KB, and it's now 864KB

Though, what modified version of CSS are you using? Would you not be happening to use Tharon's deCSSer or SteamFriendsPatcher to add in your CSS tweaks, for instance

[SotiCoto]

Originally posted by Jonius7:

Originally posted by SotiCoto:

I had to extend the length of my modified version by about 24,000 characters to fit the new size.
It definitely got bigger.

Ok, I had another look, so the old version was around 839 KB, and it's now 864KB

Though, what modified version of CSS are you using? Would you not be happening to use Tharon's deCSSer or SteamFriendsPatcher to add in your CSS tweaks, for instance

I'm just using a CSS file I manually modified and have been padding with junk characters commented out at the end.

[Jonius7]

Originally posted by SotiCoto:

I'm just using a CSS file I manually modified and have been padding with junk characters commented out at the end.

I would recommend to keep track of what you changed compared to the original.

If you still have the original your modified CSS file is based on, you can use WinMerge [https://winmerge.org] to see all the differences between two files. I've used it extensively for comparing files and extracting my CSS and JS tweaks from the original files.

[Jonius7]

GUI for my Tweaks is now out:
I'm already thinking of changing the features a bit to allow you to include your custom css but not sure on that yet.

https://steamcommunity.com/groups/for_a_better_steam_client/discussions/0/2970650017896633625/

Originally posted by Jonius7:

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

In the README, there are links to a YouTube guide (which I plan to update soon), and also a link to a build of 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

[HighSquid]

First of all, the Gui app if perfect, nicely explained with preview pictures, and there is anything needed for someone who wants to have a older feeling about the library. It is way easier and quicker than the previous methods!

I still use some tweaks that I need to have the perfect library to my eyes, which I added at the very end of libaryroot.custom.css. Some lines could probably be deleted or simplified but I am not sure how to do this. (List at the end)

You allowed me, in the matter of less than 5 minutes, reverting my library to 95% of the old horizontal grid view we used to know! https://imgur.com/gallery/Q5YQukn

Just one thing to note: when you resize the window to the smallest, the buttons on top of the list are kinda squished, constricted. It's a very small that doesn't need a quick update, but you can probably figure how to "fix" that in a future update! https://imgur.com/gallery/vokwDFQ

You made an incredible work doing this. Probably no one else here on earth took the time, the care to build such a thing. You will truely help people like me who like simple things or/and really couldn't handle the new library and the ton of new Ui stuff.

/* Hide the pop-up when hovering a game */ 
.appportraithover_AppPortraitHover_2sGn0 {display:none}

/* Colors of the links in game page (Store, Community, etc) */
.appdetailsprimarylinkssection_LinkInner_7k4qm .appdetailsprimarylinkssection_Link_1b6LY:hover .appdetailsprimarylinkssection_Text_2sNDj {color: #70d61d}
.appdetailsprimarylinkssection_LinkInner_7k4qm .appdetailsprimarylinkssection_Text_2sNDj {color: rgba(89, 255, 94, 0.78)}

/* Remove Extra Scroll */
.smartscrollcontainer_Body_3lDcz.libraryhome_InnerContainer_2AUVZ {height: 110% !important}

/* Hide Add Shelf Button */
.libraryhomeshowcases_AddShowcaseRow_3SkuN {display: none}

/* Hide left list */
.library_LeftListSizableContainer_9sPoV {display: none}

/* Library Background Color */
.libraryhome_LibraryHome_3Sb2o {background: radial-gradient(20% 100% at 45% 45%, #1b2838 0%, #171a21 100%)}

/* Hiding the sorting button and the line next to it */
.libraryhomeshowcases_ShowcaseHeader_23Snl .libraryhomeshowcases_SortingDropDown_30PVt {display: none}
.libraryhomeshowcases_ShowcaseHeader_23Snl .libraryhomeshowcases_Collapser_3sz4L {display: none}
.libraryhomeshowcases_ShowcaseHeader_23Snl .libraryhomeshowcases_Rule_1PhK8 {display: none}
.libraryhomeshowcases_ShowcaseHeader_23Snl .libraryhomeshowcases_DragHandle_1OGfH {display: none}

[Jonius7]

Hmm, yes, I removed some margin between those rows of buttons so that it'd look better on maximised window, but it does look a little too close on the smallest size window.

So I'll change it so that the spacing scales better with window size. It'll be in the next update, but for now, if you want to fix it yourself:

old code

/* Search bar 100% width, padding especially top, reduced */

.gamelistsearchbar_Container_20QAC {
  width: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-top: -6px;
}

new code

/* Search bar 100% width, padding especially top, reduced */

.gamelistsearchbar_Container_20QAC {
  width: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-top: -0.3vh;
}

I'll have a look with your own tweaks some time, but they should be more than fine with you putting them at the bottom of the file.

There is an option at the top to turn off the sidebar called --ShowLeftSidebar
I plan to put this in the GUI app in the future, but for now CSS modification will do fine.

[Jonius7]

In other things, I'm working on another theme:
https://imgur.com/a/ZfCGohH

Overall it's looking pretty good, but could use some fine tuning.

I still have Acrylic Theme 2.0 to work on (from EliteSkylu's concept)

[Demian DeVile]

If you, like me, have your changes saved and copy them to the end of the .css you need to do this with 5.css too
cause there make some backup but it is the same .css as the libraryroots

[Phantom]

Originally posted by Demian DeVile:

If you, like me, have your changes saved and copy them to the end of the .css you need to do this with 5.css too
cause there make some backup but it is the same .css as the libraryroots

Why not just use the patcher?

[HighSquid]

Originally posted by Demian DeVile:

If you, like me, have your changes saved and copy them to the end of the .css you need to do this with 5.css too
cause there make some backup but it is the same .css as the libraryroots

I do have tweaks saved at the end of the .css file, after last update they didn't work anymore. The only way for me was to check the case "Steam Beta" in the SteamFriendsPatcher settings.
Thanks to the man Jonius7 again.