How to Zoom the Steam Client

Are you trying to use the Steam Client but find that the text and controls are too small to read and use easily?  Are you dumbfounded why there are no settings or keyboard shortcuts to make everything bigger?  If so, then today is your lucky day…

Before

The above screenshot is what the default skin looks like when you use the Steam Client on a 1920×1080 display.  If you have your face mashed up against the screen then you can read the text no problems.  If, however, you are seated back a bit from the screen, or have a high-resolution screen, or just don’t have eagle-eyed vision, then the text can be really, really hard to read.

There is no setting in the Steam Client that lets you simply make everything bigger.  The community has been asking for one for years, and years, and years but Valve doesn’t seem to care that much.  They ‘recently’ let you, kinda, sorta, make some things bigger in the Library, but that’s of limited value to most people who spend far more of their time exploring their Discovery Queue (or using other parts of the Steam Client).

If you’ve got a couple of minutes of time you can apply a zoom to the body of the interface that turns the above into this:

After

A much better use of space — and much easier to read.

Everything (except the chrome) can be scaled or zoomed up by as much as you like.

On Linux you merely have to issue five commands on the command line to zoom everything a bit larger.  This is all it takes on Ubuntu 18.04 (Windows/MacOS instructions at the end of this post):

cd ~/.local/share/Steam/
mkdir -p skins/bigger/resource/styles
cp resource/styles/steam.styles skins/bigger/resource/styles/
cd skins/bigger/resource/
echo ':root { zoom: 1.5; }' > webkit.css

I chose to name the new skin “bigger” — change it to whatever you like.  A zoom of 1.5 (150%) is what I, personally, prefer — also change it to whatever you like.

In the Steam Client…

  1. Steam » Settings » Interface
  2. change the skin from the default to the “bigger” one
  3. click OK and restart the Steam Client

That’s it.  You’re done.

Enjoy!

PS: If you’re anything like me, and spend most of your Steam Client time exploring your Discovery Queue, then you may want to consider improving that experience further by adding a bit more style to the webkit.css file. Mine looks like this:

:root {
  zoom: 1.5;
}

.breadcrumbs, #application_root, .store_tooltip, 
.queue_reason_description, .queue_btn_ignore_menu, 
.mature_content_notice, .queue_controls_description {
  display: none !important;
}

#store_controls {
  position: fixed !important;
  top: 0px;
  right: 0px;
}

#store_nav_area {
  top: 0px !important;
}

div#store_header, div#store_header .content {
  height: 40px !important;
}

.html5_video_overlay {
  zoom: 0.666;
}

The extra styling gets rid of annoying stuff that long-time users simply don’t need, and it sticks the wishlist in the top-right corner.  I like it.  You may like it too.

Note that the way Valve have coded their video volume slider means that it gets more and more flakey the higher your zoom level.  The only way to make it function normally is to restore it to a normal (effective) zoom of 1.0 — thus .html5_video_overlay has its zoom set to 0.666.  The :root zoom of 1.5 multiplied by 0.666 gets us back to 1.0.  If your chosen :root zoom is giving you problems with the volume slider, set the .html5_video_overlay zoom to:  1 / :root zoom.  Alternatively, control video volume using your keyboard and the system volume.

PPS:  Although the above instructions are for Linux, because the Steam Client’s directory structure is the same on all platforms, you can easily do the same thing on Windows and MacOS.  You just need to make a few directories, copy the default steam.styles file into one of them, and create a webkit.css file in another.  Edit the latter with whatever text editor you prefer.

  • In Windows:
    • The path to the Steam directory should be:
      • \Program Files\Steam\
    • Create all missing directories up to and including:
      • \Program Files\Steam\skins\bigger\resource\styles\
    • Into that last directory, copy the default Steam styles file from:
      • \Program Files\Steam\resource\styles\steam.styles
    • And create the text file for your custom CSS:
      •   \Program Files\Steam\skins\bigger\resource\webkit.css
  • In MacOS:
    • The path to the Steam directory should be:
      • ~/Library/Application Support/Steam/
    • Create all missing directories up to and including:
      • ~/Library/Application Support/Steam/skins/bigger/resource/styles/
    • Into that last directory, copy the default Steam styles file from:
      • ~/Library/Application Support/Steam/resource/styles/steam.styles
    • And create the text file for your custom CSS:
      • ~/Library/Application Support/Steam/skins/bigger/resource/webkit.css

One thought on “How to Zoom the Steam Client

  1. Thanks bro, I’am only having an issue with my wishlist, I have 54 itens in there and as I scroll down the page everything starts to.. how I can say.. like disappear ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s