Дизайн библиотеки Steam 2025

Редактируем CSS, steam.styles и libraryroot, делаем свой скин для Steam

Вступление

В старой версии Стима было проще редактировать скины - все настройки были в одном файле. Теперь это уже не так легко. В этом руководстве я постараюсь доступно объяснить, как самостоятельно редактировать цвет библиотеки.

SteamFriendsPatcher

Для начала скачиваем программу SteamFriendsPatcher по ссылке. Нужно скачать последнюю версию для Windows с архивом SFP_UI, распаковать и запустить программу, чтобы пропатчить несколько файлов, находящихся в папке C:\Program Files (x86)\Steam\steamui\css\ - либо на другом диске, смотря где установлен Steam. Патчить файлы нужно потому, что если просто вносить изменения в тот же файл стилей library.css, то после перезапуска Steam снова его обновит на стандартную настройку, но после патча уже всегда будет переадресовывать свой запрос на новые созданные файлы из папки \Steam\steamui\css\, которыми мы и будем в дальнейшем пользоваться. Запускаем программу, нажимаем Patch. Steam перезапустится, в папке появятся пропатченные файлы. Программу можно закрыть.


После июньского обновления 2023 года лучше скачивать версию 0.0.14[github.com] и не обновляя саму программу, сделать патч.

Архивы

Расцветка Стима теперь состоит как бы из двух половин - первая, как и раньше, находится по адресу \Steam\skins\, а вторая - в крупных CSS-файлах стилей. Теперь нужно скачать любой архив со скином, который я сделал сам. В архиве находится папка и css файлы. Папку с названием скина (например, Cyan) нужно скопировать в папку \Steam\skins\, а файлы стилей library.original.css и остальные нужно копировать с заменой в папку \Steam\steamui\css\. После этого, в настройках Стима, в разделе Интерфейс, выбрать оформление клиента Cyan, нажать OK и перезапустить Стим.


После июньского обновления 2023 года папку Skins убрали из интерфейса, все настройки "переехали" в css-файлы стилей. Нужно так же скачать архив, и, после патча, копировать css файлы с заменой в папку C:\Program Files (x86)\Steam\steamui\css\, перезапустить Steam.

Скачать Cyan[drive.usercontent.google.com]

Скачать Lime[drive.usercontent.google.com]

Скачать Magenta[drive.usercontent.google.com]

Скачать Gold[drive.usercontent.google.com]

Скачать Red[drive.usercontent.google.com]

Скачать Blue[drive.usercontent.google.com]

Скачать Violet[drive.usercontent.google.com]

Шрифт

Некоторым не нравится шрифт Comic Sans MS . Чтобы поменять шрифт, откройте Блокнотом файл chunk~2dcc5aaf7.original.css из папки \Steam\steamui\css\ , нажмите Ctrl F и в поле поиска вставьте Comic Sans MS, нажмите Найти далее и поменяйте шрифт на тот, который вам по душе.

Редактирование steam.styles

Для создания своего скина рассмотрим самое упрощенное редактирование. Для примера возьмем всё тот же Cyan. Откройте папку \Steam\skins\Cyan\resource\styles\, в этой папке откройте блокнотом файл steam.styles. Для того чтобы получить в библиотеке нужный цвет, необходимо знать его RGB-расцветку. Для стиля Cyan его RGB-расцветка будет 0 255 255 255.

Загуглите любой сайт с "RGB Онлайн", выберите нужный цвет для стиля. Допустим, вы выбрали розовый цвет. Его RGB - 255 105 180 255. Нажмите одновременно кнопки Ctrl и H, откроется окно замены. Впишите "Что" - 0 255 255 255 , "Чем" - 255 105 180 255 , нажмите "Заменить все".

Теперь закройте окно замены, но ещё не всё. В файле steam.styles есть ещё строчки

• Focus0
  
• Focus
  
• Focus2
  
• Focus3
  
• Focus4
  
• FocusGrid
  
• Friends.InGameHoverColor
  
• Friends.OnlineHoverColor
  
• Friends.OfflineHoverColor

в которых нам нужно будет вручную, между кавычками,
поменять 0 255 255 100 на 255 105 180 100. После этого закройте файл с сохранением, и перезапустите Стим. Можете переименовать папку Cyan на Pink, чтобы не запутаться.

Редактирование libraryroot.custom.css

Чтобы редактировать файл libraryroot.custom.css, создайте ярлык для Стима
с параметром -dev . Для этого создайте ярлык, откройте свойства ярлыка, в строчке
"C:\Program Files (x86)\Steam\steam.exe" допишите -dev после кавычек. Вместо диска С может быть D или E, смотря где установлен Стим.

Запустите Стим через этот ярлык, нажмите одновременно клавиши Ctrl Shift I, должно открыться вот такое окно DevTools. В левой колонке выберите файл libraryroot.custom.css. Здесь нам тоже придется вручную поменять несколько значений, но уже не в RGB, а в HEX формате.
Как правило, на сайтах в интернете сразу указаны как RGB так и HEX варианты расцветок. Поскольку мы выбирали розовый RGB 255 105 180 255, его HEX будет записан как #ff69b4.
HEX #ff69b4 копируем в буфер клавишами Ctrl C, начинаем редактирование libraryroot.custom.css.

Строки DevTools

Строка 26977 - это шрифт библиотеки. В нашем файле выбран шрифт Comic Sans MS. Откройте блокнот, нажмите Формат, Шрифт, выберите и скопируйте любой шрифт, какой вам нравится и впишите вместо Comic. Вы сразу же увидите как меняется шрифт.

Строка 13505 - размер шрифта библиотеки.

Строка 3043 - шрифт слов Активность, Друзья, Скриншоты.

Кстати, шрифт в файле steam.styles тоже имеет стиль Comic Sans MS. Можете заменить его на любой другой,он находится в строчке basefont="Comic Sans MS".


Строки 14111 и 14120 - цвет слова Библиотека.
Строка 13863 - цвет слов Игры и программы.
Строка 13535 - цвет установленных игр.
Строка 752 - цвет шрифта свойств игр.
Строка 4206 - цвет слов Последний запуск, Достижения и т.д.
Строки 4145 и 5416 - цвет полоски достижений.
Строка 3025 - цвет слов Активность, Друзья, Скриншоты.


Во всех этих строках нужно заменить #00ffff на #ff69b4.
Выделяем мышкой #00ffff, жмём Ctrl V и вставляем #ff69b4.


Остальные строки, в которых изменялись хексы в архивных файлах:


Строка 4244 - цвет слов Время игры и т.д.
Строка 13519 - цвет бегающей полоски в левом меню.
Строка 13604 - цвет полоски выбранной игры в левом меню.
Строка 13607 - цвет полоски выбранной игры в левом меню при наведении.
Строка 713 - цвет фона свойств игр.
Строка 14148 - цвет фона под играми в левом меню. В этой строке два хекса - первый это оттенок шапки, второй базовый цвет.
Строка 10340 - цвет фона Активность в правом меню. В строке также два хекса - первый это базовый полупрозрачный цвет, второй - оттенок нижней панели.


После всего этого ОБЯЗАТЕЛЬНО жмём мышкой на libraryroot.custom.css, выбираем Save as.. и выбираем наш собственный libraryroot.custom.css из папки \Steam\steamui\ чтобы он перезаписался. Сохраняем и выходим из DevTools.

Дизайн коллекций

Снова запускаем Стим через созданный ярлык, жмём Ctrl Shift I , выделяем наш libraryroot.custom.css.


Строка 1604 - цвет фона Ваши коллекции. В строке также два хекса, базовый цвет и оттенок.

Строка 1659 - цвет плиток коллекций. Поменяйте хекс, или вместо хекса напишите слово transparent , и плитки станут прозрачными.

Строка 1802 - подсветка плиток коллекций при наведении мышки. Вместо хекса также можете вписать transparent , чтобы сделать прозрачной. transparent нужно писать без # .

Строка 1786 - цвет названий коллекций. По умолчанию white, меняем при желании на нужный хекс.

Строка 1793 - цвет числа игр коллекций.

Строка 13342 - цвет фона внутри коллекций. Два хекса - базовый и оттенок.

Строка 13356 - цвет названия коллекции внутри коллекции.

Совет

Самое главное - если вы что-то сделали не так, не там написали или что-то где-то удалили, вы в любой момент можете удалить все файлы из папки \Steam\steamui\, и Стим перекачает их заново при следующем запуске. Всё устанавливать и патчить придётся сначала.


Приятного пользования!

[Telesfor]

архивы обновлены, так как в прошлых версиях перестали кликаться ссылки оверлея

[Telesfor]

это шрифт Arial , шрифт нужно поменять в нескольких местах

[Интернетный бог]

спасибо за ответ. а как называется обычный шрифт который использует стим, хотелось бы поставить его

[Telesfor]

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

[Интернетный бог]

почему что то зачеркнуто?

[Telesfor]

руководство обновлено, добавил ещё два скина - Blue и Violet

[Telesfor]

28 января было обновление клиента, скины немного устарели, на днях обновлю архивы. по ссылке на гитхаб скачивается SFP_UI-SelfContained-win10-x64.zip там внутри программа SFP_UI.exe . её надо запустить, нажать Patch и закрыть.

[The < blank >]

exe файла нет в SteamFriendsPatcher, что я должен откpывать?

[Telesfor]

Архивы обновлены

[Telesfor]

скины были обновлены, так как после очередного обновления были баги с окнами скриншотов и видеозаписей