Changing the color, and styles of usernames in the User Page Masthead

This is a guide on how to style your username, or everyone's username site-wide on the User Profile Masthead, Not to be confused with Custom Username Colors which alters all links to your profile (such as in Page History, Top Navigation, and links in articles).

For experienced coders

User-Specific

The code to do this is as follows

.page-User_USERNAME #userProfileApp .user-identity-header__attributes>h1 {
    .STYLES HERE
}

Example

.page-User_Moonwatcher_x_Qibli #userProfileApp .user-identity-header__attributes>h1 {
    color: #82eefd:
}

Wiki-Wide

#userProfileApp .user-identity-header__attributes>h1 {
    .STYLES HERE
}

Example

#userProfileApp .user-identity-header__attributes>h1 {
    color: #82eefd:
}

For beginning coders

User-Specific (for just one user)

So, to start.
First off, you'll need to go to your Wikis Common.css page (You need to have Administrator or Bureaucrat User Rights to edit this page), then click "Edit Source" in the top right(PC, or mobile on full view)/top middle(Mobile and PC on mobile view).
Once in the editor you can copy & paste the following into it:

.page-User_USERNAME #userProfileApp .user-identity-header__attributes>h1 {
    .STYLES HERE
}

You'll need to replace "USERNAME" with the username of the person who's Username you want to alter

Adding Styles

To alter the username you'll need to add what's called attributes (see the link for more info). Some attributes you might want to add are "color," "text-shadow," and "font-family."

Example

.page-User_Moonwatcher_x_Qibli #userProfileApp .user-identity-header__attributes>h1 {
    color: #82eefd;
    font-family: Lato;
    text-shadow: black 0px 3px 3px;
}

color: #82eefd; Makes the Profile Masthead Usernam a light blue
font-family: Lato; Makes the text the font Lato
text-shadow: black 0px 3px 3px; black indicating the shadow color, 0px indicating no horizontal (left-right) offset, 5px indicating a downward (bottom) offset, and 3px indicating the blur radius of the shadow.*/

Site-Wide (for all users)

To do this Site-Wide simply follow the same steps under "User-Specific (for just one user)" but remove .page-User_USERNAME

Example

#userProfileApp .user-identity-header__attributes>h1 {
    color: #82eefd;
    font-size: 50px;
    text-shadow: black 0px 3px 3px;
}

References

This blog is pretty basic right now; I plan to expand it later. For now if you have any questions please contact me here.