Steam

Steam

Not enough ratings
Дизайн библиотеки Steam 2023
By Telesfor
Редактируем CSS, steam.styles и libraryroot, делаем свой скин для Steam
   
Award
Favorite
Favorited
Unfavorite
Вступление
В старой версии Стима было проще редактировать скины - все настройки были в одном файле. Теперь это уже не так легко. В этом руководстве я постараюсь доступно объяснить, как самостоятельно редактировать цвет библиотеки.




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\, и Стим перекачает их заново при следующем запуске. Всё устанавливать и патчить придётся сначала.


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



< >
20 Comments
Telesfor  [author] Mar 23 @ 6:11pm 
Руководство обновлено :savedisk:
Telesfor  [author] Feb 7 @ 5:25am 
обновлено :savedisk:
Telesfor  [author] Nov 16, 2022 @ 11:11pm 
Руководство и архивы были обновлены :savedisk:
Telesfor  [author] Aug 9, 2022 @ 9:15pm 
Руководство и архивы были обновлены :savedisk:
ConfeTTi May 21, 2022 @ 3:45am 
Я понял, спасибо за объяснение
Telesfor  [author] May 19, 2022 @ 1:00pm 
собственно, в этих двух файлах libraryroot.custom.css и libraryroot.original.css теперь и находятся основные настройки, а написаны они там теперь не по строкам а в длину, что сильно затрудняет объяснение самостоятельных настроек. можешь скачать архив Cyan и через Ctrl F поискать в этих файлах 00ffff и поменять на свой цвет.
Telesfor  [author] May 19, 2022 @ 12:53pm 
она работает.. суть в том что 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 May 18, 2022 @ 2:51pm 
В общем программа теперь не рабочая.. А то я удивлялась почему не работает, да и программа выбивала ошибки.. Эхх, а я себе такую красивую синюю тему делал..
Telesfor  [author] May 15, 2022 @ 1:50pm 
Руководство и архивы были обновлены :savedisk:
Telesfor  [author] Dec 7, 2021 @ 8:45am 
прочитай внимательно Строки DevTools, там сразу написано как самому поменять шрифт. "разукрасить" названия игр я думаю не получится, так как за эту настройку отвечает всего одна строка 13535. единственное что можно попробовать это сделать цвета установленных игр и неустановленных разными.