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

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

Вступление

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

SteamFriendsPatcher

Для начала скачиваем программу SteamFriendsPatcher по этой ссылке[github.com]. Нужно скачать последнюю версию для Windows с архивом SFP_UI, распаковать и запустить программу, чтобы пропатчить несколько файлов, находящихся в папке \Steam\steamui\css\. Патчить файлы нужно потому, что если просто вносить изменения в тот же файл стилей library.css, то после перезапуска Steam снова его обновит на стандартную настройку, но после патча уже всегда будет переадресовывать свой запрос на новые созданные файлы из папки \Steam\steamui\css\, которыми мы и будем в дальнейшем пользоваться. Запускаем программу, нажимаем Patch. Steam перезапустится, в папке появятся пропатченные файлы. Программу можно закрыть.

Архивы

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

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

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

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

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

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

Шрифт

Некоторым не нравится шрифт Comic Sans MS . Чтобы поменять шрифт, откройте Блокнотом файл sp.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]

обновлено

[Telesfor]

Руководство и архивы были обновлены

[Telesfor]

Руководство и архивы были обновлены

[ConfeTTi]

Я понял, спасибо за объяснение

[Telesfor]

собственно, в этих двух файлах libraryroot.custom.css и libraryroot.original.css теперь и находятся основные настройки, а написаны они там теперь не по строкам а в длину, что сильно затрудняет объяснение самостоятельных настроек. можешь скачать архив Cyan и через Ctrl F поискать в этих файлах 00ffff и поменять на свой цвет.

[Telesfor]

она работает.. суть в том что Valve удалили файл 5.css, а настройки программы были сделаны под него. в той папке куда распакован SteamFriendsPatcher, есть файл SteamFriendsPatcher.exe.config, его нужно открыть блокнотом, найти строчку <value>5.css</value> и поменять цифру 5 сначала на цифру 7, пропатчить программой, затем поменять цифру 7 на цифру 2 и снова пропатчить программой. так мы получаем два пропатченных файла 2.css и 7.css, и два файла libraryroot.custom.css и libraryroot.original.css - которые работают ОДНОВРЕМЕННО.

[ConfeTTi]

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

[Telesfor]

Руководство и архивы были обновлены

[Telesfor]

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