Utilizing the Database

The database can be found in this repository at /dist/usrbg.css

How Each Entry is Stored

This is a typical database entry.

/*User#0001*/

.root-SR8cQa [data-user-id="000000000000000000"],
.userPopout-3XzG_A [data-user-id="000000000000000000"] {
	--user-background: url('');
	--user-popout-position: left/right/center !important;
}

There are three main parts of this entry.

• The first line is a comment with the users name and discriminator. This is to find the user at a later date if they wish to have an entry deleted, or if an entry was improperly implimented.

• The second part is the User ID. The User ID is an 18 digit string of numbers, which is assigned to each user when their account is created. This is used for identifying which user to apply the background to. The reason there are two lines associated for the User ID, is because USRBG is designed to be compatible with both BetterDiscord and Powercord. These two injectors have a different method of applying data attributes. For BetterDiscord, DevilBro's BDFDB library is required to see backgrounds. This is because BD doesn't natively add data attributes to avatars. BDFDB is included in every one of his plugins.

• The third line is the entry data. Entries are stored through CSS variables. The --user-background variable is used to identify which background the user requested. A URL tag is required for this variable. The second variable is the popout positioning variable. Some users have backgrounds that do not fit on both a wide, and narrow aspect ratio. This means the content might not be visible on both a user popout and profile modal. This variable will tell you where to align the backgrounds on the x-axis in the event of working with a narrow field of view. The default value is center.

Importing the Database

If you are a theme developer, and wish to utilize USRBG, you will want to impliment the database before anything. Simply add this import tag before your source code.

@import url('https://discord-custom-covers.github.io/usrbg/dist/usrbg.css');

However, importing the database alone will not do anything. You will either have to add custom implimentation for user backgrounds, or use one of our snippets.

User Popouts

@import url('https://discord-custom-covers.github.io/usrbg/snippets/userPopouts.css');

Profile Modals

@import url('https://discord-custom-covers.github.io/usrbg/snippets/modals.css');