CSS Customization

The [user_role] shortcode outputs the current user's role wrapped in a <span> element with the class .user-role. This allows you to target the text specifically without affecting other elements on your page.

Basic Styling

To change the basic appearance of the user role text, you can add the following CSS to your theme's style.css file or via the Appearance > Customize > Additional CSS menu.

/* Change the color and font weight of the user role */
.user-role {
    color: #2271b1; /* WordPress Blue */
    font-weight: bold;
    text-transform: capitalize;
}

Displaying as a Badge

If you want the user role to look like a UI badge or pill, use the following snippet:

.user-role {
    display: inline-block;
    padding: 2px 8px;
    background-color: #f0f0f1;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 0.85em;
    color: #3c434a;
}

Manual Wrapping

If you need to apply specific layout styles or unique identifiers, you can wrap the shortcode in a custom div or span directly within the WordPress editor:

<div class="custom-user-badge">
    Role: [user_role]
</div>

Then, target it in your CSS:

.custom-user-badge {
    padding: 10px;
    border-left: 4px solid #46b450;
    background: #f6fbf7;
}

.custom-user-badge .user-role {
    font-style: italic;
}

Role-Specific Styling (Advanced)

Since the shortcode outputs the role name as plain text (e.g., "administrator"), you cannot target different roles with CSS alone unless you modify the app.php logic to include the role as a class.

For the standard implementation, the styles applied to .user-role will affect all user roles globally across the frontend.