Zeke edited this page Aug 5, 2018 · 78 revisions

Installation

Windows

  • Due to the unpredictable nature of the internet, download from OFFICIAL SOURCES only!
  • Extract the Air-for-Steam folder from the downloaded zip archive into your Steam skins directory.
C:\Program Files (x86)\Steam\skins
  • Install the additional fonts included in the fonts folder of the zip archive (Air-for-Steam/+Extras/Fonts), by selecting them all then choosing "Install" from the right-click menu. Only required on first-time installations.
  • In Steam, go to Settings › Interface and select Air as the skin you would like to use.
  • Select OK and restart Steam.

--

Mac

Disclaimer: Air was developed for Windows and may not function 100% on other operating systems.

  • Due to the unpredictable nature of the internet, download from OFFICIAL SOURCES only!
  • Extract the Air-for-Steam folder from the downloaded zip archive into your Steam skins directory, and please note that you will have to replace the files manually. You can access the skins folder by going to
/Users/<username>/Library/Application Support/Steam/Steam.AppBundle/Steam/Contents/MacOS/skins/
  • Install the additional fonts included in the fonts folder of the zip archive by double-clicking each font file and selecting "Install". Only required on first-time installations.
  • In Steam, go to Settings › Interface and select Air as the skin you would like to use.
  • Select OK and restart Steam.

--

Linux

Disclaimer: Air was developed for Windows and may not function 100% on other operating systems.

  • Due to the unpredictable nature of the internet, download from OFFICIAL SOURCES only!
  • Extract the Air-for-Steam folder from the downloaded zip archive into your Steam skins directory.
~/.local/share/Steam/skins/
  • Install the additional fonts included in the fonts folder of the zip archive. You may need to install the font manually by copying it to /usr/share/fonts (system-wide) or ~/.fonts (current user) and executing fc-cache -fv in a terminal.
  • In Steam, go to Settings › Interface and select Air as the skin you would like to use.

Customization

Themes

You can now choose between a light, dark, and blue theme for Air.

  • Browse to the +Extras folder:
\Steam\skins\Air-for-Steam\+Extras
  • Open the Themes folder and select your desired theme.
  • Copy and paste the contents of this folder into the main Air-for-Steam directory. Select yes when asked to overwrite files.
  • If you are on OS X, you may need to manually replace the contents of the folders and not simply the folders themselves (e.g. Air/+Extras/Themes/Dark/Friends/loop_1.tga should replace Air/Friends/loop_1.tga).
  • Lastly, browse to config.ini and follow the instructions in the Themes section to enable your theme:
\Steam\skins\Air-for-Steam\config.ini
  • Save your changes and restart Steam.

--

Colors

You can view the available colors here.

  • Instructions can be found in config.ini which is located in your Air-for-Steam directory:
\Steam\skins\Air-for-Steam\config.ini
  • Read the instructions carefully and select your preferred color.
  • Save your changes and restart Steam.

For those Materially inclined, the themes are very similar to the spec colors here:

  • sky = Material Blue
  • sea = Material Teal
  • breeze = Material Light Blue
  • slate = Material Blue Grey
  • truffle = Dark Brown
  • gunmetal = Black
  • silver = Material Grey
  • grass = Material Green
  • rose = Material Pink
  • cinnabar = Material Red
  • lavender = Material Indigo
  • lilac = Material Deep Purple (Kinda)
  • deeppurple = Material Deep Purple (For real)
  • steamblue = Steam Blue
  • youtubered = YouTube Red
  • spotify = Spotify Green. Contributed by Mamulokki (Compatible with the Dark Theme ONLY)

Questions

Can I still use Air Classic?

Absolutely! Air Classic will continue to be supported, albeit slower to receive updates. You can download the latest version on the Steam Community Group.

--

How do I use family view with Air?

If you have family view enabled you'll need to look for a circular lock/unlock icon in the upper right corner of the client. It is designed to be unobtrusive and can easily be overlooked on first use making it difficult to continue using Steam as desired.

--

Where is the URL bar?

The URL bar was removed from the main client because it doesn't provide any unique functionality. You can copy a page's URL by right-clicking on any web page within Steam and selecting "Copy Page URL."

--

How do I access the developer console?

The developer console can be opened through the Windows taskbar jumplist. Simply click on the Steam icon in your taskbar and drag upwards to reveal the jumplist and select the Console option. Make sure you have developer mode (-dev) enabled.

#Modifications

Add your own focus color

  • Browse to the user color styles folder:
\Steam\skins\Air-for-Steam\Resource\colors\user
  • You will need to create a new .styles file with your desired color name. I would recommend making a copy of an existing .styles file in this folder and renaming it.
  • Open your new .styles file and you will see something like this:
colors {
	Focus="0 188 212 255"
		//

	Focus2="77 208 225 255"
		//lighter hue (+28 +37 +36)

	Focus3="0 172 193 255"
		//darker hue (-5% brightness)

	A2TextFocus="Focus"
		//

	A2TextFocus2="Focus2"
		//
}
  • You can follow the formulas in the code block above to calculate Focus2-3 once you have your desired Focus color in RGB format. If you need help finding your RGB color value, try using this online color picker tool. Lastly, the two bottom styles are available if you need to change the focus text color separately from the main focus color.
  • Once you have that set, save the changes and browse to config.ini:
\Steam\skins\Air-for-Steam\config.ini
  • Under the "User contributed themes" section, add an include for your new color and enable it (disabling the others first, of course).
include "resource/colors/user/your-new-color.styles"
  • Save your changes and restart Steam.

--

Change chat font size

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\styles\_fonts.styles
  • Search for "ChatListPanel RichText"
  • Add your desired font size between the brackets and remove the // from the beginning of the line. Default is font-size=16
  • Save your changes and restart Steam.

--

Change notification position

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\styles\steam.styles
  • In the colors section, search for this line:
Notifications.PanelPosition    "BottomRight"
  • Update to your desired value. Can be BottomRight, BottomLeft, TopRight, TopLeft
  • Save your changes and restart Steam.

--

Change notification stack count

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\styles\steam.styles
  • In the colors section, search for this line:
Notifications.StackSize    "1"
  • Update to your desired value.
  • Save your changes and restart Steam.

--

Reorganize sections in details mode

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\layout\steamrootdialog_gamespage_details.layout
  • In the layout section, search for this line:
place {
	control=welcomedetails,turnnotifications,nonsteamdetails,achievementsdetails,friendsdetails,dlcdetails,clouddetails,communityfilesdetails,newsdetails,screenshotsdetails
	region=detailsbody
	dir=down
	width=max
}
  • Update the list to your desired ordering.
  • Save your changes and restart Steam.

--

Change fade of uninstalled games in grid mode

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\styles\steam.styles
  • In the styles section, search for this line:
"GameItem_Uninstalled GamesGridImage" {
	alpha	120
}
  • Update the alpha to your desired value (between 0 and 255).
  • Save your changes and restart Steam.

--

Re-enable game filters dropdown (for browsing categories)

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\layout\uinavigatorpanel.layout
  • In the layout section, find this code block:
place {
  control=label_store,label_library,label_community,label_me
  region=nav start=back height=44 spacing=16 x=10 margin-top=-7
}

place { control=library_filters height=0 width=0 margin-left=-9999 }
  • Replace it with this:
place {
  control=label_store,label_library
  region=nav start=back height=44 spacing=16 x=10 margin-top=-7
}

place {
  control=library_filters
  region=nav start=label_library height=30 width=15 x=0 y=7
}

place {
  control=label_community,label_me
  region=nav start=library_filters height=44 spacing=16 x=10 y=0 margin-top=-7
}
  • Save your changes and restart Steam.

--

Make inbox icon invisible when no unread messages

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\layout\steamrootdialog.layout
  • In the styles section, remove the render_bg style from these code blocks so they look like this:
inbox_button {
	textcolor=none
}

inbox_button:selected {
	textcolor=none
}
  • Save your changes and restart Steam.

--

Friends list square avatars

  • Browse to the +Extras folder:
\Steam\skins\Air-for-Steam\+Extras
  • Copy the contents of the Square Avatars folder into the Air-for-Steam\Graphics directory and select yes when asked to overwrite files.
  • Delete these two files from the Graphics directory: avatarBorderNotificationDesktop.tga, avatarBorderNotificationOverlay.tga
  • Restart Steam.

--

Friends list hover effect

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\layout\friendpanel.layout
  • Add these lines of code to the styles section:
CFriendPanel:selected {
	render_bg {
		0="fill( x0 - 99, y0, x1, y1, A2Ribbon )"
	}
}
  • Save your changes and restart Steam.

--

Friends list status on three lines

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\layout\friendpanel.layout
  • In the layout section, make these changes:
place { control=NameLabel,FriendsNameInstanceLabel,ClanStatusImage x=53 y=3 spacing=4 }

place { control=StatusLabel x=53 y=17 }
place { control=GameLabel x=53 y=31 }
place { control=AcceptLink,IgnoreLink,BlockLink x=53 y=31 spacing=8 }
place { control=ControlPanelLink x=53 y=31 }

place { control=BigPictureStatusImage,MobileStatusImage,WebStatusImage,BigPictureStatusImageInGame,MobileStatusImageInGame,WebStatusImageInGame start=StatusLabel }
  • Save your changes and restart Steam.

--

How to fix overlay text being cut off in other languages

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\layout\overlaydesktop.layout
  • In the layout section, find these lines:
place { control=FriendsDetailPanel width=301 }
place { control=AchievementsDetailPanel width=207 }
place { control=CommunityHubDetailPanel width=191 }
place { control=ScreenshotsDetailPanel width=174 }
  • You will need to do a little bit of guesswork here. The width values of each section needs to be adjusted until the text in your preferred language is no longer cropped. As a side note, both the View Friends and View Players links are included in the FriendsDetailPanel, so you will need to account for the spacing between these entries in your final calculation.
  • For this specific instance, you do not need to restart Steam after making each edit. Simply save your current changes and launch a game to test the overlay.
  • Values for Italian translation can be found here.
  • Values for Greek translation can be found here.
  • Values for French translation can be found here.
  • Values for German translation can be found here.
  • Values for Polish translation can be found here.

--

How to restore the Avatar and other features to the friends list in Air Classic

  • To restore some optional features and tweaks to Air Classic, check out the README file in Options folder.

--

Put avatar in the bottom of the chat window

  • Available in for only Air Classic, the chat window layout for is controlled in this file: \Air-for-Steam\Friends\ChatRoomDlgFriend.res, and group chat layout is controlled by ChatRoomDlg.res.

--

Missing Wallet balance

  • In Air for Steam, you can access your wallet balance through the account icon in the top-right of the client.

  • Whilst in Air Classic, the balance is NOT enabled by default. To enable it, check out the README file in the Options folder.

--

SteamVR and Big Picture buttons

Sorry guys, I know it can be a bit of an inconvenience, but this is something I won't be adding to the official release to keep with the simplicity of Air. Big Picture can be enabled from the main menu and SteamVR can be launched from the VR Library.

- Inhibitor

--

Header Capitalization

By following the steps below, the header navigation buttons can be capitalized to further customize the skin.

  1. Open Resources\styles\_fonts.styles with a text editor.
  2. Search for "CUINavButton" (should be at line 555-556)
  3. Replace "font-style=regular" by "font-style=uppercase"

Steps provided by @Spidersouris in #139

--

Revert to the vanilla Steam overlay

Check out these instructions on the Community Group: http://steamcommunity.com/groups/airforsteam/discussions/1/2333276539614474542/

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.