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]

Additionally on the game page, I have been able to switch the left column with the right column and make them about 50/50 in width (it was 67/33 before).

This gives Achievements/Friends/Screenshots much more space. They were so squished on the right. Also removed a whole bunch of useless padding.

https://gyazo.com/4209cb4a9d814163fd8e6c0c2e93ac24

Update: more tweaking
https://twitter.com/jhgenius/status/1274357551170301959?s=20

[Tharon]

wow, i really, really love to have more space to the achievements. For many gamer, achievements are a lot more important info than all that social crap.

[Tharon]

My tool is taking shape :

https://imgur.com/a/ipVnl4i

Actual features are :

- Hardcoded popular tweaks (only two for now).
- Editable custom CSS. Edited CSS is appended to the the library CSS, so can be easily tweaked without editing the library CSS.
- Apply Button. Changes are reflected on Steam library every time the apply button is pressed.
- Save. Custom CSS and hardcoded tweaks are saved, so even if Steam overwrite the CSS nothing is lose.
- Autoresize. The tool automatically resize the result CSS (by removing or adding blank spaces) to match the size of the original. Size is automatically acquired, so there is no need to input i.
-autocheck and apply modication. The tool can be launched with the -autocheck parameter. When launched this way it will check the CSS and re-apply the saved modifications if the CSS was reverted, then it will close itself.

[Jonius7]

Excellent work!

I was just updating my pastebin of CSS Tweaks - but I'll have to update it again so it contains just the modified lines, to fit your tool - I left in the extra lines with the intention of someone finding the section in original css and copy pasting over it. Now we don't have to do that.

Anyway here it is: https://pastebin.com/6L5UNzHW

My only concern is appending all the modifications to the end of the file - we should have enough spaces elsewhere to remove to keep the file the same length? Eg: If the total length of the modifications is 10000 characters.

[The HopelessGamer™]

You could have a play around in the webkit.css file in the skins folder as this file never gets overwritten when changed and does allow CSS to style the library from there.

[Tharon]

Injecting the modified code in main CSS block is extremely complex, and can break easily if the code is altered. Also it's difficult to track back the modified code.
Anyway, i've integrated a space character counter in my tool for testing purpose, and there are 52640 space characters usable in libraryroot.css. The tool counted only the spaces used for padding the text, so all of those spaces are safe to deleted.
52640 are a lot of characters for tweaks only. And there are a lot more character usable by compacting the lines by removing useless carriage return characters before the closing bracket "}"

[Tharon]

The HopelessGamer™님이 먼저 게시:

You could have a play around in the webkit.css file in the skins folder as this file never gets overwritten when changed and does allow CSS to style the library from there.

Thank you, i will check it.

[Jonius7]

The HopelessGamer™님이 먼저 게시:

You could have a play around in the webkit.css file in the skins folder as this file never gets overwritten when changed and does allow CSS to style the library from there.

I have tried this now, to create a new skin, and put in a steamui folder, since that's where the original css files are. Unfortunately, I couldn't get it to use the css. Also tried editing the webkit.css file. I think that one is for a small use with the scrollbars?

The skins only cover the outside client, while the inside client is basically a webpage with HTML, CSS and JS.

Since the client actively checks the original steamui folder, I am doubting it would check any other steamui folder at this point.

[The HopelessGamer™]

Jonius7님이 먼저 게시:

The HopelessGamer™님이 먼저 게시:

You could have a play around in the webkit.css file in the skins folder as this file never gets overwritten when changed and does allow CSS to style the library from there.

I have tried this now, to create a new skin, and put in a steamui folder, since that's where the original css files are. Unfortunately, I couldn't get it to use the css. Also tried editing the webkit.css file. I think that one is for a small use with the scrollbars?

The skins only cover the outside client, while the inside client is basically a webpage with HTML, CSS and JS.

Since the client actively checks the original steamui folder, I am doubting it would check any other steamui folder at this point.

Nah not like that. Create a skin with just a webkit.css file in its correct structure. Then add the css to the webkit. Forget the steamui folder.

[Ult0r]

Wow this thread really grew and I'm amazed by the work people put in. I sent you a friend request Tharon, would you be willing to share the source of your tool so me or others could help contribute to it? I like your approach of having toggleable options so it leaves room for customization. Since the original steam-css might be subject to change, it's probably a good thing to be able to set the required length of the result file.

Also tried fiddling a bit with creating a skin but couldn't get it to work. I share Jonius' assumption that skins only handle the outside UI elements.

[Ult0r]

Oh and @Jonius, you're lacking a closing curly brace in lines 67, 167, 187 and 239 of your pastebin v0.5

[Tharon]

Sorry Ult0r but i don't accept friend requests. Nothing personal, but i'm not really a fan of all this social trend, and i prefer to have in my list only people i know and/or i usually play with.

As for the other questions :

- Webkit.css seems to work only on some exposed classes. I don't know what those classes are because i haven't found any documentation about them.

- The tool adjust the size to match the CSS found. So if the CSS is replaced by Valve with a new the correct size is matched.

- I will release the source code with the tool. It's coded in FPC, a free language. Anyway the best help is about the CSS and the tweaks. There is a lot to do.

Actually i'm trying to find a way to :

- Remove the hovering box with the screenshots when the mouse is over a game (i find it annoying).
- Resize the tooltip of games exceeding the gamelist width. When a game title is larger than the gamelist width, a tooltip is showed, but the height and position of the tooltip are wrong calculated if a zoom or different font size is used in the gamelist.

This is what i mean :

https://imgur.com/a/2NU5iWL

[The HopelessGamer™]

Tharon님이 먼저 게시:

Sorry Ult0r but i don't accept friend requests. Nothing personal, but i'm not really a fan of all this social trend, and i prefer to have in my list only people i know and/or i usually play with.

As for the other questions :

- Webkit.css seems to work only on some exposed classes. I don't know what those classes are because i haven't found any documentation about them.

- The tool adjust the size to match the CSS found. So if the CSS is replaced by Valve with a new the correct size is matched.

- I will release the source code with the tool. It's coded in FPC, a free language. Anyway the best help is about the CSS and the tweaks. There is a lot to do.

Actually i'm trying to find a way to :

- Remove the hovering box with the screenshots when the mouse is over a game (i find it annoying).
- Resize the tooltip of games exceeding the gamelist width. When a game title is larger than the gamelist width, a tooltip is showed, but the height and position of the tooltip are wrong calculated if a zoom or different font size is used in the gamelist.

This is what i mean :

https://imgur.com/a/2NU5iWL

Hover over the item to make the box appear, while the element is hovering, put this in the console to freeze the page which will allow you to edit the hovering box:

setTimeout(() => {debugger}, 3000);

For skinning the library and the friendslist, look into this: https://steamcommunity.com/sharedfiles/filedetails/?id=1941650801 That guide allows you to edit pretty much anything without needing to keep the files within a certain size and without preventing steam from updating.

[Jonius7]

The HopelessGamer™님이 먼저 게시:

Nah not like that. Create a skin with just a webkit.css file in its correct structure. Then add the css to the webkit. Forget the steamui folder.

So, webkit.css in the skins/[skin name]/resource folder does appear to work, however it seems to handle some CSS differently compared to modifying libraryroot.css, and likely requires more !important tags to stick. I have curently got most of my tweaks through to the webkit.css. Viewing it in the Chrome Dev tools labels webkit.css code as "injected stylesheet".

However, it's been harder for me to debug and tweak, since I have to restart Steam every time I want to see a change, unless there's an easier way? But this could be the way forward for an "easier to apply" solution in the future.

The HopelessGamer™님이 먼저 게시:

For skinning the library and the friendslist, look into this: https://steamcommunity.com/sharedfiles/filedetails/?id=1941650801 That guide allows you to edit pretty much anything without needing to keep the files within a certain size and without preventing steam from updating.

So from what I can infer - the Steam Library Makeover by Shiina uses Steam Friends Patcher to update libraryroot.css. That could work.

The Metro skin itself is a skin for the outside of the client.

Ult0r님이 먼저 게시:

Oh and @Jonius, you're lacking a closing curly brace in lines 67, 167, 187 and 239 of your pastebin v0.5

Thanks, this is fixed in v0.6 https://pastebin.com/u0L3PDA7

[The HopelessGamer™]

Jonius7님이 먼저 게시:

The HopelessGamer™님이 먼저 게시:

Nah not like that. Create a skin with just a webkit.css file in its correct structure. Then add the css to the webkit. Forget the steamui folder.

So, webkit.css in the skins/[skin name]/resource folder does appear to work, however it seems to handle some CSS differently compared to modifying libraryroot.css, and likely requires more !important tags to stick. I have curently got most of my tweaks through to the webkit.css. Viewing it in the Chrome Dev tools labels webkit.css code as "injected stylesheet".

However, it's been harder for me to debug and tweak, since I have to restart Steam every time I want to see a change, unless there's an easier way? But this could be the way forward for an "easier to apply" solution in the future.

The HopelessGamer™님이 먼저 게시:

For skinning the library and the friendslist, look into this: https://steamcommunity.com/sharedfiles/filedetails/?id=1941650801 That guide allows you to edit pretty much anything without needing to keep the files within a certain size and without preventing steam from updating.

So from what I can infer - the Steam Library Makeover by Shiina uses Steam Friends Patcher to update libraryroot.css. That could work.

The Metro skin itself is a skin for the outside of the client.

Ult0r님이 먼저 게시:

Oh and @Jonius, you're lacking a closing curly brace in lines 67, 167, 187 and 239 of your pastebin v0.5

Thanks, this is fixed in v0.6 https://pastebin.com/u0L3PDA7

Yeah the webkit is a bit odd. I know it works but not for everything. The patcher works really well though.

I have made some of the skins for the friends list that works with the patcher. Shiina is alot better then me with CSS though, He can also write SCSS where i cannot.