The widget is deliberately plain so it inherits your theme. When you do want to change its size, shape or colours, there are two routes: shortcode attributes for a single placement, and CSS custom properties for everywhere.
Shortcode attributes #
Both shortcodes accept size (the avatar’s width and height in pixels), radius (its corner radius) and class (extra class names on the container, for your own CSS). The uploader also accepts upload_text, remove_text and capture_text for the button labels.
[wpmake_advance_user_avatar size="150" radius="50%"]
[wpmake_advance_user_avatar_upload size="120" class="my-profile-avatar"
upload_text="Choose a photo" remove_text="Remove photo"]Leave an attribute out and the stylesheet default applies — 96 pixels square, square corners.
CSS custom properties #
Every size, shape and colour in the widget is read from a custom property on its container, so one rule in Appearance → Customize → Additional CSS restyles it everywhere. No !important is needed.
.wpmake-advance-user-avatar-container {
--wpmake-aua-avatar-size: 150px; /* avatar width and height */
--wpmake-aua-avatar-radius: 50%; /* round the avatar */
--wpmake-aua-width: 100%; /* the container box */
--wpmake-aua-height: auto;
--wpmake-aua-padding: 0;
--wpmake-aua-btn-primary-bg: #2f7d32; /* Upload file button */
--wpmake-aua-btn-primary-bg-hover: #27682a;
--wpmake-aua-btn-padding: 6px 12px;
--wpmake-aua-btn-font-size: 13px;
--wpmake-aua-btn-radius: 999px;
}The rest follow the same naming: --wpmake-aua-align, --wpmake-aua-avatar-spacing, --wpmake-aua-btn-border-width, --wpmake-aua-btn-primary-color, --wpmake-aua-btn-capture-color, --wpmake-aua-btn-capture-color-hover, --wpmake-aua-btn-remove-border, --wpmake-aua-btn-remove-border-hover, --wpmake-aua-btn-remove-color and --wpmake-aua-btn-remove-bg-hover.
To restyle one placement only, give it a class with the shortcode’s class attribute and set the properties on that class instead.
Avatars elsewhere on the site #
Avatars that WordPress renders itself — in comments, author boxes, the admin bar — are sized by whatever asked for them, not by this plugin. A theme asking for a 48-pixel avatar gets a 48-pixel file. Style those with your theme’s own CSS, as you would a Gravatar.
