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

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

Вступление

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

SteamFriendsPatcher

Для начала скачиваем программу SteamFriendsPatcher по ссылке. Нужно скачать последнюю версию для Windows с архивом SFP_UI, распаковать и запустить программу, чтобы пропатчить несколько файлов, находящихся в папке \Steam\steamui\css\. Патчить файлы нужно потому, что если просто вносить изменения в тот же файл стилей 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 файлы с заменой в папку \Steam\steamui\css\, перезапустить программу.

Скачать 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]

Шрифт

Некоторым не нравится шрифт 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]

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

[Gumball]

не понятно

[Telesfor]

руководство было обновлено.

[Telesfor]

Ссылки доступны. SteamFriendsPatcher 0.0.14 на данный момент придется погуглить самим, в поиске выдает по первой ссылке на сайте github

[Telesfor]

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

[Telesfor]

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

[Telesfor]

до следующего обновления руководства скины будут работать с ошибками (на скриншотах, при входе и т.д.)

[ᴋᴀꜱꜱᴠØʀ]

Реально пашет! От души, братан!

[MeowYen]

Всё работает!
Огромное спасибо за этот гайд!

[Telesfor]

Руководство было обновлено