Metro for steam how to install

Тема metro для steam

Доброго времени суток! Хочу презентовать вам саму популярную (не только, на мой взгляд, а, по мнению всего сообщества) тему metro for steam. Скачать ее вы сможете абсолютно бесплатно и воспользоваться для небольшого украшения клиента.

Зачем она нужна и для чего metro использовать?

Ни для кого не секрет, что дизайн стим уже давненько не обновляется. Valve обещает новое обновление, тем не менее, когда оно выйдет в общий свет никто не знает. Для всех кто хочет уже слегка преобразить дизайнерские решения, то вы всегда сможете воспользоваться работами сообщества steam. В этой теме вы найдете одну из самых лучших тем – metro. Скин metro это не только изменение цветов, а большая проработка и изменения некоторого функционала, что будет очень удобным для многих пользователей.

Как установить metro в Steam?

Если у вас возникли проблемы или дополнительные вопросы по установке, вы можете просмотреть полную статью про установку темы metro

Итак, надеюсь, вам понравилась данная работа, и вы остались довольными новым обновлением клиента.

Как установить тему оформления в Steam

Клиент Steam — не самое эстетически приятное приложение в любом смысле этого слова. Он медленно запускается, и навигация не самая удобная. Ускорить запуск Steam невозможно, возможно только ускорить загрузку игр в Steam. С удобством использования нечего не поделать, но с помощью тем оформления (скин) можно изменить внешний вид.

В этой статье я покажу, как установить самую популярную тему для Steam Metro.

Как найти темы для Steam

Темы для Steam похожи на темы для Windows 10 или скины для Minecraft. К сожалению нет одно определенного места где было вы возможно их всех просмотреть и скачать. Есть много различных мест, откуда можно скачать темы для Steam. Хороший тема Steam содержит много файлов и папок, поэтому она будет распространятся в виде zip-файла. В данной статье мы рассмотрим популярную тему Metro для Steam.

Как установить тему в Steam

Шаг 1: Скачайте лубую тему, и распакуйте ее. В этом примере я буду устанавливать тему Metro. После извлечения папки вы можете переименовать папку как хотите. Это имя будет отображаться в настройках выбора скина для Steam.

Шаг 2: После распаковки скопируйте папку и вставьте в папку скинов в Steam. Многие устанавливают Steam на системный диск Windows, который как правило является диском C, в то время как другие предпочитают устанавливать его на другие диски жесткого диска. Перейдите в папку «Steam» —> «Скины».

Шаг 3: Если вы никогда не устанавливали тему Steam, эта папка будет пустой, за исключением одного текстового файла. Вставьте извлеченную папку скина сюда. Вставьте всю папку в папку «Скины» вместо копирования файлов из нее.

Шаг 4: Откройте Steam и перейдите в меню Steam. Выберите Настройки. В окне настроек выберите вкладку «Интерфейс» и откройте раскрывающийся список под заголовком «Выберите скин, который вы хотите использовать в Steam». Выберите скин, который вы только что добавили в папку «Скины», и перезапустите Steam, когда вам предложат.

Шаг 5: Перезапустите Стим.

Когда Steam перезапустится, он будет иметь новый вид.

После установки тема не правильно отображается

Ранее я упоминал, что в хорошем теме Steam будет много файлов и папок. Если вы устанавливаете скин, а некоторые части клиента Steam все еще используют старый пользовательский интерфейс или что-то выглядит не так, возможно. Это происходит по причине того, что разработчик темы не изменил эту конкретную часть пользовательского интерфейса Steam.

К сожалению это невозможно исправить. Вы можете попробовать скачать и использовать другую тему или если это незначительная деталь попробовать обойтись без недостающего элемента оформления.

На этом все. Надеюсь данная статья была полезна, и вы смогли установить тему в Steam.

Metro for steam how to install

This skin enhances the default skin by giving the interface a clean yet modern look and feel based on Microsoft’s ‘Metro’ Design Language (now superseded by Fluent). To be honest, Steam’s default skin is quite ugly and out-of-date.

This complete guide works for all Steam platforms and operating systems (Windows, macOS and Linux). Some applications may require additional dependencies or only works on some operating systems. Check the repos linked for additional instructions or resources.

** New Name: SFP. Please use the new patcher, see the relevant section for more info.

There are a bunch of different styles and looks to choose from. Click the example screenshot link to see a preview of the skin.

Alternatively, you can use the Automatic Installer for Metro for Steam [github.com] to install the base skin and the unofficial patch at the same time. For instructions see the ‘Automatic Installer’ section. Make sure that you download the most recent version of the installer.

If manually installing, check the ‘Manual Installation’ section and this forum post on the Steam Group.

For the lazy, there’s an all-in-one package that contains a mix of everything here [github.com] by Hyoretsu/Bucetossauro.

Linux and macOS:
For Linux and macOS users, installing the mod is much easier, especially the Library and Friends/Chat skins. See their relevant sections for details.

For those that do not know any website creation whatsoever here is a short explanation of what certain abbreviation means.

CSS (Cascading Style Sheets) [www.w3schools.com] : Cascading Style Sheets as the name implies describes the style and look of a web page in HTML.

HTML (HyperText Markup Language) [www.w3schools.com] : Hypertext Markup Language creates the layout and the skeleton of a webpage. It is not a programming language but rather a markup language.

Javascript (often shortened to JS): [www.w3schools.com] Not to be confused with Java, a completely different programming language is a popular programming language for the web.

To enter into this mode, create a Steam shortcut and add ‘-dev’ (without quotes) to the ‘target’ field next to the location target address. Kill the current Steam process by either right-clicking the icon in the System Tray and selecting ‘Exit’, or going into the Hamburger Menu and selecting ‘Exit’. Click on the newly-created shortcut. Steam should launch and you should see ‘Console’ in the top row and when you press F6, the VGUI editor would popup. This is used to edit the base skin and view its properties.

When you enter the Store, Library, Chat or Friends List, press F12 to view the ‘DevTools’. This allows you to edit and view the code for the Store, Library, Friends List and Chat. In Library or Friends List press F5 to refresh the ‘page’ after an edit.

To exit out of ‘Dev Mode’ kill the current Steam process and launch a new instance of Steam from another shortcut.

See the relevant section.

The unofficial patch also has some extras to install, check the ‘Manual Installation’ section and this forum post on the Steam Group for a list of extras.

You would need the base skin and the unofficial patch. There are some extras that are only available using the manual installation method. This is a recommended method on macOS and Linux.

On Windows:

Extract the base skin file. Move the base Metro skin folder to the skin folder where Steam is installed on your computer. The default installation on Windows is C:\Program Files (x86)\Steam\skins. If the folder does not exist, just create one with the name ‘skins’ and place the skin there.

On macOS:
Place the skin folder in

/Library/ApplicationSupport/Steam/Steam.AppBundle/Steam/Contents/MacOS/skins or by right-clicking the app bundle ‘Steam.app’ located in Applications folder, then click ‘Show Package Contents’ where Steam is installed (usually in the Applications folder) and browse to /Contents/MacOS/skins.

On Linux:
Place the skin folder in

Optional: Then, choose and select any extras. (To see a preview of the extra, enter into the folder of an extra of your choice and find an image file.) Drag the files contained in the extra to the root directory of the Metro skin folder. Accept the overwrite of files. To remove/uninstall the extra, replace the files from the Main Files folder in the patch that you had replaced or reinstall the skin.

To update the entire skin, repeat the instructions.

If the update is small like a minor bug patch or a minor feature upgrade, download and replace the required file(s) stated on the ‘Announcements’ channel on the Unofficial Metro for Steam Discord. Head to the master folder on GitHub and find the stated file. Click on the file. Click on ‘Raw’ on the right-hand side of the page next to ‘Blame’ and ‘History’. Then right-click to save the file to the location where the skin is installed in the same location as where you had downloaded the file on the master folder (ie: \MetroSkin\resource\filename.res). Make sure to overwrite that file. Repeat if there is more than one file that needs updating.

This would reduce the need to replace or reinstall the entire skin. Not only this decreases file duplicates but also declutter your Downloads folder by only requiring you to replace the required file(s) needed for the update.

Run the application.

Click on the ‘Next’ under the Patched version.

Wait until the extras are loaded and select your extras to install. Make sure to check the checkbox to save the selected extras. Click ‘Install Now’.

Wait for the installation to complete.

Now it’s finished. Exit the application.

In the default Steam skin, go to the hamburger menu and click on settings, then Interface and in the dropdown box change from ‘default skin’ to ‘MetroSkin’. Steam will require you to restart.

The Automatic Installer would have a popup box indicating to you that there is an update to download. I recommend that you update the installer.

To update the skin, wait for an update to the installer and run the installer as normal. Check the patch notes on the releases page of the repo for details. Alternately, follow the instructions in the ‘Updating the Skin’ part of the ‘Manual Installation’ section of the guide if you want to quickly update the skin.

It looks like this!

Beware that the styles/decals for the library do not work anymore. Decals break the generated file, so it’s best not to select any decals. If you are going to use a custom font, make sure that the custom font is installed on your computer first, or it would default to the base font for Metro for Steam (a sans-serif font likely Segoe UI in Windows, Helvetica or Arial in macOS and Linux).

Click on ‘Save’ to download the file. Head to the location where your skin is installed (usually C:/Programs Files (x86)/Steam/Skins/MetroSkin for example). Override the file named ‘custom.syles’ and restart Steam.

Copy the hex code (e.g. for teal it’s 00aba9) or the RGB (Red Green Blue) code (e.g. for teal it’s 0,171,169) on the colour picker and paste them in their respective location(s) in the CSS file either next to

for teal and the hash (#) before the hex code.

Click the download link. It should be a CSS file names ‘webkit.css’. Right-click the lines of text/code and select ‘Save As’. Find a suitable location to save the file (e.g. Downloads).

If following from the repo, look for a file names ‘webkit.css’. Click on ‘Raw’ on the top right then right-click and choose ‘Save As’. Find a suitable location to save the file (e.g. Downloads).

Just move the file called ‘webkit.css’ in the folder to C:/Programs Files (x86)/Steam/Skins/MetroSkin/resource (or wherever Steam is installed) and overwrite the file. Restart Steam to see the changes.

If there is an update to the mod, replace the file ‘webkit.css’.

Replace or copy ‘webkit.css’ to:

Remember to add back the Library and Friends List/Chat modifications back to the ‘webkit.css’ when you update the Dark Mode mod.

NOTE: This section has been rewritten based on the new patcher, please uninstall the old one!

You will need the SFP formerly Steam Friend Patcher and the Metro for Steam modifications (‘libraryroot.custom.css’, ‘config.css’ [basically the Library modifications] and ‘friends.custom.css’ [the Friend’s List/Chat modifications]). Extract the files if needed to a safe place for easy access.

Click on ‘Windows’ if you’re using a Windows computer, ‘Linux’ if you’re using a Linux PC or ‘macOS X’ if you’re using a Mac. Ignore the last two files, you do not need them.

Open the application, you’ll be greeted by a screen with a log and three buttons ‘Patch’, ‘Start Scanner’ and ‘Reset Steam’. ‘Patch’ applies the modifications and resets Steam. ‘Start Scanner’ starts the scanning process manually in case there are any changes in the background or detect any issues with the process. ‘Stop Scanner’ stops it from scanning in the background. ‘Reset Steam’ just restarts Steam and empties the cache of the files to default (unmodded) in case something goes wrong.

Firstly, go into the ‘Settings’ tab and you’ll see some buttons and some commands. Fill in the line next to ‘Steam Directory’ by clicking on ‘Browse’ to change the location where Steam is installed. Find the location where Steam is installed (usually C:\Program Files (x86)\Steam\) and Click ‘Select Folder’. Make sure that ‘Patch Friends’, ‘Patch Library’ and ‘Patch on App Startup’ are checked. Click ‘Save’ at the bottom to save changes. These are critical to ensure that the modifications are patched every time you start your PC up. ‘Start minimised’ although optional should be checked as it allows the patcher to run in the background without annoying you. ‘Reload’ just resets the settings to default changes.

Extract and drag the CSS files named ‘libraryroot.custom.css’ and ‘config.css’ in the downloaded zip ‘steam-library-master’ to C:\Program Files (x86)\Steam\steamui (or wherever Steam is installed). Accept the override of the files.

Move the CSS file named ‘friends.custom.css’ to C:\Program Files (x86)\Steam\clientui (or wherever Steam is installed). Accept the override of the files.

After finishing, click on ‘Force Check’ option in the patcher and reload the Library and Friend’s List/Chat menus. You’re done!

Patcher is only required for the Library. You’ll need to follow below to modify the Friends List/Chat.

First, create a backup of the original ‘webkit.css’ or the ‘webkit.css’ with the Dark Mode mod installed in case something goes wrong by renaming the file from ‘webkit.css’ to ‘webkit.css.bak’ or creating a copy elsewhere. You can rename it back to ‘webkit.css’ to revert any changes.

To install the friends’ skin of your choice, copy or replace the contents named ‘friends.custom.css’ in the same location as above. Make sure to leave a gap under the main ‘webkit.css’ code. ‘YourSkinName’ would be the Metro Skin.

For the Library follow the earlier set of instructions.

Optional:
Leave some gaps in the CSS file. Add some comments like

for example, underneath or above the code to easily distinguish and identify between the mods for updating or editing.

You may need to add additional CSS code or files to override or replace the original code if you intend to customise or personalise the skin, which may require CSS knowledge. Not a recommended method to install the mods due to the lack of customisation. Only recommended for people that want an easy way to update the mods.

Repeat these instructions in the relevant sections above if you are updating the mod(s). Check the Discord for regular updates and patch notes or in the repo of the mod.

You can edit the CSS file(s) to your preferences at your own risk. Knowledge of CSS may be required. ‘Config.css’ is the CSS file to edit for the Steam Library. Make sure you know what you’re doing and read the headings or comments in green. Keep backups just in case.

When choosing colours, I recommend that you use the accent colour that you chose in the ‘Personalisation’ section of the guide. To modify the Steam Library, insert the code in ‘Libraryroot.custom.css’ make sure to add

(this line modifies the top header of the navigation bar in the Steam Library).

You can enable ‘Small Mode’ of the Library by clicking the Steam logo and selecting it in the dropdown menu (if you are using the latest version of the unofficial patch) and you can go back to the large mode by selecting ‘Large Mode’.

Oh, Jonius7 created an application [github.com] that changes the layout of the library via CSS and JS. Here’s a video tutorial on it and make sure to read the description of the video and the repo.

After making the changes, make sure to save and reload the Library by leaving the library to the Store or Community Hub and then re-entering back into the library.

I recommend deleting all unused downloaded files from this guide and cleaning up your Downloads folder after the installation has completed.

These are optional extras for your Steam Library!

These white logo covers and artwork look like this!

Check out https://www.steamgriddb.com/ to download more covers and share them with others. Download the manager [www.steamgriddb.com] to change the covers of your installed games.

Here is an application that finds game covers: Steam Grid Cover Finder [github.com] created by AriJKh. Make sure to install GraphicsMagicK [www.graphicsmagick.org] if you want the app to automatically create a game cover when the app can’t find one.

Here’s another cover ‘grabber’: Steam Grid [github.com]

Also, check out r/steamgrid as well for extra resources, links or just to share!

To change the covers: right-click the game cover and select ‘Manage’ then ‘Set custom artwork’. Choose the artwork.

Metro for steam how to install

A set of fixes and extras brought to you by RedSigma and the former member K12T6

This non-official addon for Metro for Steam 4.x [www.metroforsteam.com] fixes bugs with the current version and adds optional content for you to choose from.

Check out the Discord server to be up to date [discord.gg]

Supports Steam Beta

In case of bugs report them on the discord channel or github [github.com]

The extras that are formatted as A + B are for extras that modifiy the same files. For example if you want to use the extra «Big Picture Button» as well as «Green Notification Box» you would use the files within «Big Picture Button + Green Notification Box»

All extras and main files have the folders premade. You only need to drag and drop the files within the main files folder, and for extras, the files within the Install folder

A skin for Steam inspired by Microsoft’s Metro UI.

My curiosity got the best of me so I looked into adding support for the new library. I was initially planning to wait for the stable release for fear it would break Metro users not yet on the beta, but it turns out that fear was unwarranted! A fix is possible that supports both the stable and beta releases! This release also includes a couple of layout bugs I found while looking around the client. Check out out the full changelog below!

Edit:
Getting a few questions in the comments about what this update means. Without it, if one uses the Steam Library beta release with Metro 4.3.1 installed you’ll get a blank screen with some strange bits in the upper-left corner. If you’re on the beta release and have 4.4 installed, you’ll notice that it adds support for the new Steam library as-is with some additional layout fixes. If you’re on the stable release, you should only notice the layout fixes. This update won’t enable the new library automatically.

In regards to skinning the new library, I’m reading that it’s possible by overwriting default Steam files. That’s pretty dang cool, but I have no plans to release any Metro updates utilizing this method. I’m hoping that in the future Valve will add a skin system/selector similar to what Steam supports now. Until then, we’ve got a bit of a hybrid thing going on!

I just wanted to drop in and share some details regarding Metro and the new Steam Library beta.

We are, indeed, approaching the end of an era as Valve introduces newly overhauled portions of Steam. With these overhauls comes the lack of ability to officially theme the client like we could in the past. One can hope that Valve reintroduces theming support at some point in the future! Should they not, then I would be remiss if I didn’t say that this was one hell of a ride! That said, I’m really glad we experienced it together.

Until next time,
Dom

Edit:
Reading through the comments is always so heartwarming. Y’all are so kind.