Powered by

# How to customize any skin that you install

To check if your skin has it or doesn't check if it has this inside the library.custom.css file:

@import url('config.css');

After confirming this, you can customize the skin, to create this file and customize your skin read the below guide

Add it after all the skins' own @imports
Example:

/* comments or whatever blahblahblahblahblahblahblahblahblah */
/* made somewhere in idkwhere by this person in the year of today */
@import url(http://stars.chromeexperiments.com/)
@import url(https://sandspiel.club/)
@import url(https://thecodetherapy.com/)
@import url('config.css'); <-------- YOU WILL ADD IT HERE, AFTER ALL THE OTHER @imports

# Customizing

  1. In Steam/steamui/<YOUR SKIN> create a config.css file
    • If you don't know how right click an empty space, under New select Text document, then rename it to config.css
  2. Open the config.css file with a text or code editor
    • If you don't have anything open it with Notepad, it's preinstalled on windows
  3. Add any code customization you want
  1. In Steam/steamui/<YOUR SKIN> open the libraryroot.custom.css file with a text or code editor
    • If you don't have anything open it with Notepad, it's preinstalled on windows
  2. Add any code customization you want
  1. In Steam/steamui/ create a libraryroot.custom.css file
    • If you don't know how right click an empty space, under New select Text document, then rename it to libraryroot.custom.css
  2. Open the libraryroot.custom.css file with a text or code editor
    • If you don't have anything open it with Notepad, it's preinstalled on windows
  3. Add any code customization you want

# Customization examples

# Changing the variables in this example changes the accent color of the skin 

:root {
    --custompurple: purple;
    --customtransp: purple;

    --libraryhome: var(--custompurple); /* Highlight library color */
    --libraryhometransp: var(--customtranspurple); /* Highlight library color with opacity */
    --scrollbar: var(--custompurple); /* Scrollbar color */
    --progressbar: var(--custompurple); /* Progressbar color */
    --gamelist: var(--custompurple); /* Game list selected color */
    --titlenamehover: var(--custompurple); /* Game list title hover name color */
    --textcolor: var(--custompurple); /* Text color */
}

or with hex colors (click here) :

:root {
    --custompurple: #6624e2;
    --customtransp: #6624e2b3;

    --libraryhome: var(--custompurple); /* Highlight library color */
    --libraryhometransp: var(--customtranspurple); /* Highlight library color with opacity */
    --scrollbar: var(--custompurple); /* Scrollbar color */
    --progressbar: var(--custompurple); /* Progressbar color */
    --gamelist: var(--custompurple); /* Game list selected color */
    --titlenamehover: var(--custompurple); /* Game list title hover name color */
    --textcolor: var(--custompurple); /* Text color */
}

Changing --YourLibraryName changes the name of home button

:root {
    --YourLibraryName: "YOUR LIBRARY" !important;
}

This step requires you to atleast know what CSS is and how to "code" in it.

  1. Open SFP and enter the menu
  2. In Steam launch args add the following -dev
    • This will make it so whenever you edit the config.css it should reload the page
      • In case it doesn't you'll have to edit directly on steam using CTRL+SHIFT+I or F12 aka the devtools
  3. As any kid did with their low budget laptop on a random school site to seem like they're hacking you can go ham with css here and change whatever you want, just remember the classes you want to change and make sure you save them in config.css