//SamSoftware + Home       
+ Portfolio  
+ Photography
- Hacks      
+ Blog       
/* Back to Hacks */

Redesigning Steam on OS X
From the release date of Steam on OS X, there have been many complaints about the appearance of the client. And to be honest about it, the client leaves something to be desired. What I started off trying to achieve is allowing people to create their own experience with the client.

I began digging and started to tweak small aspects of the steam files to see how they would react. In the case of the application's icon, it will reinstall the entire client in the instance that it does not use the stock icon. Please make note that trying to lock it from editing will cause a recursive creation of the steam client instead of the steam client, this doubling the size of the program.

While you edit these files, please back them up! They will be overwritten during updates to the client.

Images (Beginner)

To start it all off, I am going to explain how to edit the image resources that steam uses. If you right click on the Steam application and select "Show Package Contents" you can then navigate to "Contents>MacOS>graphics". This folder contains most of the images that steam uses for the UI. You can open these and edit them in photoshop. Edits must follow this criteria:
  • Images must have the same number of layers as they started with. (1 layer).

  • You MUST only use the "save" feature, you cannot use "save as" because this will generate a new image file and the client will reject it.

  • Tip: always look at the channels of the images, especially the alpha channel. Many images use the alpha channel to "appear" on the client's UI. So if your edits do not work then always go back and check your alpha channel and apply the same edits to it.


Styles (Advanced)

This is the more advanced part of the tutorial on how to edit steam. This is more advanced because of the care you have to take in editing the style files. From what I can determine from testing the style files in the steam client, you can only make edits on the following parameters:
  • Edits can only be done on a line by line basis. This means that you can only edit the contents of one line at a time.

  • Everything must remain the same length as it was originally. That means if you edit a line that has 15 characters in it, that line must have 15 characters when you are finished editing. This is really restrictive, but otherwise the client will reject the file hash on launch and overwrite it.

  • All *.styles, *.res, *.txt can be edited within reason. You must follow the same editing parameters on them all, or they will stop working and the Steam client will update and over-write all of your edits.

Sample Downloads:

Tutorials:
  • Fast Closing Windows:
    • Goto /Contents/MacOS/resource/styles and open the file "steam.styles". Find the following the lines and replace the values with the ones that are shown.
      • Frame.FocusTransitionEffectTime -> "0"
      • Frame.TransitionEffectTime -> "0.00"
      • Notifications.FadeInTime -> "0.00"
      • Notifications.FadeOutTime -> "0.00"

  • Changing Display Font:
    • Goto /Contents/MacOS/resource/styles and open the file "steam.styles". Find the line: "// cool we can define font-families here as well". Under this line are two lines that start with "basefont=". On OS X we will want to edit the second line (the one that ends in "[$OSX]"). The tricky thing about this edit is that you will need to replace the font name with one of the same length. The default is "Helvetica", you can change it to another font with either 9 or 10 characters in the name.

    • Even though "Helvetica" is only 9 characters long, you can achieve a 10 character font name by removing the space between the closing quotation mark in the font name and the "[" in "[$OSX]".

  • Changing Display Text:
    • Goto /Contents/MacOS/public/ and open the file "steamui_%your_language%.txt". I am going to use the "steamui_english.txt" in this example because that is my native language. I don't know if this works for all other languages or not.
      • A very simple example of editing this is to change the client from saying "Exit" to "Quit". You can search this file and replace the instances of the value "Exit" with "Quit". The values are the second set of quotations on each line. The first set are tied back to the client, if you edit the first set it will break the client and the client will not work.
Email: sam@samsoftware.info | Twitter: Dirk_Gently | About Me | All code is released under this license