Home

sebie edited this page Jan 12, 2017 · 62 revisions
Clone this wiki locally

Installation

Windows (here be no dragons)

  • 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 (warning, here be dragons)

  • 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 (here be more dragons)

  • 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 are my hidden games?

You can access the hidden games category using the small dropdown caret next to the Library menu item (this will only appear while actively viewing your library).

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.

Friends list shortcut

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\layout\steamrootdialog.layout
  • In the layout section, update the height to 30 on both of these controls:
place {
    control=online_friends region=header align=right y=11 margin-right=34 end-right=account_balance
    height=0
}
place {
    control=view_friends region=header align=right y=11 width=60 margin-right=34 end-right=account_balance
    height=0
}
  • Save your changes and restart Steam.

Hide wallet balance

  • Open this file in a text editor:
\Steam\skins\Air-for-Steam\Resource\layout\steamrootdialog.layout
  • In the layout section, update the height to 0 on this control:
place { control=account_balance region=header align=right y=11 height=30 margin-right=24 end-right=InboxButton }
  • 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:
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.

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, the account balance disappears if you have $0 in your Steam wallet. Nevertheless, you can always access it by going to the market and checking on the top right of that page.

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

- Outsetini/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