User blog:Moonwatcher x Qibli/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).

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
.STYLES HERE }
 * 1) userProfileApp .user-identity-header__attributes>h1 {

Example
color: #82eefd: }
 * 1) userProfileApp .user-identity-header__attributes>h1 {

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-size."

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

Makes the Profile Masthead Usernam a light blue Makes the text 50 pixels indicating the shadow color,  indicating no horizontal (left-right) offset,   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

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