CSS Tweaks - Jonius7/SteamUI-OldGlory GitHub Wiki

This page documents a list of quick CSS Tweaks.

Steam Discussions: https://steamcommunity.com/discussions/forum/0/2451595019863406679/

Add Custom CSS to existing SteamUI-OldGlory

Go to scss/_user_module1.scss and scss/_user_module2.scss where you can insert in your custom CSS.

Afterwards, Install the updated CSS.

Open Chrome Tools (Dev Mode)

You can debug and find the CSS you're looking by opening Steam in Dev Mode

What I do is copy a new shortcut to Steam, right click -> Properties. In the Target box, add -dev at the end (so it should say ...\Steam\Steam.exe" -dev)

When you run Steam, you should see a CONSOLE tab, that's how you know you're in Dev mode. Then, click in the main window area and Ctrl + Shift + I (or F12) to open the Chrome Dev tools.

-- Jonius7

Hide What's New container

.libraryhome_WhatsNewContainer_gdZT7 {
  display: none !important;
}

Zoom out GameList container

.gamelist_Container_1ijTa {
  zoom: 75%;
}

Hide ReviewContainer

.appdetailsspotlight_ReviewContainer_3LE-6 {
  display : none !important;
}

Hide Post-Game Summary

.appdetailsoverview_Container_27RcN .appdetailsoverview_Spotlights_11kuV {
    display: none !important;
}

gamelistbar_Container_3x1Hk is the main sidebar background color under background-image

gamelistsectionheader_Container_2sYIg collapseicon_CollapseIconParent_ehAsU is the category header under background

.gamelistentry_Selected_1UBpA.gamelistentry_Container_2-O4Z, .gamelistentry_Selected_1UBpA .gamelistentry_Container_2-O4Z

has the active game selected background-color

Hide the hovering box with the screenshots when the mouse is over a game

.appportraithover_AppPortraitHover_2sGn0 {
  display:none;
}

Resize the tooltip of games exceeding the GameList width

- 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.

-- Tharon

I don't think it's possible to get the correct y value of the tooltip with just CSS, it would need JavaScript.

So a CSS only alternative would be to fix the hover to the bottom of the screen.

.gamelistentry_Container_2-O4Z.gamelistentry_HoverOverlay_3cMVy {
  position: fixed;
  height: 28px;
  bottom: 0;
}

Similar thing for the FriendStatusHover:

.gamelistentry_FriendStatusHover_2iiN7 {
  bottom: 0;
}

Make Left Sidebar 100% width

.library_LeftListSizableContainer_9sPoV {
  width: 100% !important;
}

Change Font

body {
    font-family: Arial, Helvetica, sans-serif;
}

Remove Zoom when hovering over game images

Default:

.appportrait_HoversEnabled_54PuC .appportrait_LibraryItemBox_WYgDg:hover:not(.appportrait_Landscape_3VOR2) {
    transform: rotateX(3deg) translateZ(15px);
    filter: brightness(1.1) contrast(0.95) saturate(1);
    box-shadow: 0px 14px 12px 0px rgba(0, 0, 0, 0.3);
    z-index: 12;
}

Remove effects:

.appportrait_HoversEnabled_54PuC .appportrait_LibraryItemBox_WYgDg:hover:not(.appportrait_Landscape_3VOR2) {
    transform: none;
    filter: none;
    box-shadow: none;
    z-index: 12;
}
⚠️ **GitHub.com Fallback** ⚠️