Appearance Tab: Profile

Overview

The settings in the profile tab allow you to customize the appearance of user profiles on your site. These settings are global, meaning they apply to all user profiles, but they can be overridden on a per-form basis if needed. This gives you the flexibility to set a default appearance for user profiles while also allowing for specific customizations as required. To configure the settings, go to  wp-admin>Ultimate Member>Settings> Appearance> Profile Tab.

Profile Form-Specific Settings Priority

Ultimate Member allows you to configure appearance settings individually for each Profile Form. When settings are defined at the profile form level, they take the highest priority over global profile appearance settings. This means that if you customize the appearance within a specific profile form, those settings will override the global profile settings applied site-wide. You can configure these settings in wp-admin > Ultimate Member > Forms by editing the desired profile form and adjusting the appearance options accordingly.

Template

To ensure compatibility with plugin updates, you can add custom profile templates by placing them in a child theme. This allows them to appear in the Template dropdown when customizing profile forms. Learn more here: Adding Your Custom Profile Templates. 

The template section in the profile tab enables you to customize the user profile template and size. These settings provide control over the layout and dimensions of user profiles on your site, ensuring they are displayed as desired. The settings include:

Profile Default Template

This setting allows you to choose the default template for displaying user profiles. The options typically include different layouts or designs for the profile page, such as "default template," profile 4," "profile 3," "profile 2," and "profile side menu." Selecting one of these options will set it as the default template for all user profiles on your site unless overridden on a per-form basis.

Profile Maximum Width

This setting specifies the maximum width that the profile shortcode can occupy on a webpage. This means that when you display a user profile using the specified shortcode, the profile's width will not exceed this value, ensuring that it fits within the designated space on the page. The default maximum width is set to 1000 pixels.

Profile Area Maximum Width

This setting defines the maximum width of the profile area inside the user profile page, specifically below the profile header. This means that any content, such as user information or profile details, displayed in this area will be constrained to a maximum width. The default maximum width is 600 pixels. This setting helps ensure that the profile area remains visually appealing and consistent with the overall design of your site.

Profile Photo

This section in the profile tab enables you to customize aspects of the profile photo component on user profiles. The settings below provide flexibility in managing profile photos, allowing you to control the default image, enable or disable photo uploads, and set the default size for profile photos displayed on your site.

Default Profile Photo

This setting allows you to change the default profile picture that is used for user profiles across your site. This means that if a user does not upload their profile picture, this default image will be displayed instead. The setting specifies that the default photo should be 300x300 pixels in size, ensuring it is appropriately sized for display in the profile picture area. 

By clicking on the "Select" button, you can drop files or select files from your computer to upload your default photo.

Profile Photo Upload

This setting allows you to enable or disable the ability for users to upload their profile photos. If the is setting on or unchecked (enabled), users will be able to upload a photo to use as their profile picture. If you switch it off or check (disabled), users will not have the option to upload a photo, and the default profile picture (if set) will be used for all profiles.

Profile Photo Size

This setting allows you to define the global default size for profile photos on your site. You can select different sizes for the profile photo, such as 190x190 pixels, 40x40 pixels, and 80x80 pixels. This means that by default, profile photos will be displayed at these sizes unless overridden by individual form settings. For example, if a specific form or section of your site requires a different size for profile photos, you can customize the size for that specific form without affecting the global default settings.

Cover Photo

This section of the profile tab lets you customize aspects of the profile cover photo on user profiles. The settings below provide control over the appearance and display of cover photos on user profiles, ensuring they are visually appealing and consistent with your site's design.

Default Cover Photo

This setting allows you to change the default cover photo that is used for user profiles across your site. This means that if a user does not upload their cover photo, this default image will be displayed instead. It's important to ensure that the default cover photo is large enough and respects the ratio you are using for cover photos to ensure it looks good and fits well within the profile layout.

Profile Cover Photo

This setting allows you to enable or disable the display of cover photos on user profiles. If you switch this setting on (enabled/checked), users will have the option to upload a cover photo for their profile, and the cover photo will be displayed on their profile page. If you switch it off (disabled/unchecked), users will not have the option to upload a cover photo, and the cover photo area on their profile page will not be displayed. If enabled, additional settings will become available:

Profile Cover Size

This setting allows you to define the global default width for cover photos on user profiles. In this case, the default width is set to 300 pixels, with a height that adjusts based on the aspect ratio (commonly 2:1), you also have an option to select 600 pixels. This setting determines the size of the cover photo displayed on user profiles unless overridden by individual form settings. If you have specific requirements for the size of cover photos on your site, you can set them globally here, and they can be adjusted on a per-form basis if needed.

Profile Cover Ratio

This setting allows you to choose the aspect ratio for cover photos on user profiles. Aspect ratio is the ratio of the width of an image to its height. For example, if you choose the ratio 2.7:1, it means that the width of the cover photo will be 2.7 times greater than its height. Similarly, a ratio of 1:6:1 means that the width is 1 unit, the middle section is 6 units, and the last section is 1 unit. By selecting a specific ratio from the options below, you can control how cover photos are displayed on user profiles, ensuring a consistent and visually appealing layout across your site.

  • 2.7:1 
  • 1:6:1 
  • 2:2:1 
  • 3:2:1

Header

This section in the profile tab allows you to customize various aspects of the user profile header component. The settings below allow you to customize the content and layout of the user profile header, providing flexibility in how user information is displayed on your site:

Profile Header Meta Text Icon

This setting allows you to control whether icons are displayed for related user meta fields in the header of the user profile. User meta fields are additional pieces of information about a user, such as their job title, location, or any custom fields you've added.

When this setting is enabled (checked), icons will be displayed next to or instead of the text labels for these meta fields in the header. This can be useful for adding visual cues or improving the overall design and readability of the user profile header.

Display name in profile header

This setting allows you to control whether the user's display name is shown in the header of their profile.
When this setting is enabled (checked), the user's display name will be visible in the profile header. If it's disabled (unchecked), the display name will not be shown in the header, and only other elements, such as the profile photo, social links, and user description, will be displayed.

Social links in profile header

This setting allows you to control whether social links are displayed in the header of the user profile.
When this setting is enabled (checked), social links, such as linked icons to the user's social media profiles (e.g., Facebook, Twitter, LinkedIn), will be visible in the profile header. If it's disabled (unchecked), the social link icons will not be shown in the header, and only other elements, such as the profile photo, display name, and user description, will be displayed.

User description in profile header

This setting allows you to control whether the user's description is shown in the header of their profile.
When this setting is enabled (checked), the user's description will be visible in the profile header. If it's disabled (unchecked), the description will not be shown in the header, and only other elements, such as the profile photo, display name, and social links, will be displayed. If enabled, an additional option becomes available: 

  • User description maximum chars: This setting allows you to specify the maximum number of characters that are allowed in the user's description field in the header of their profile. For example, if you set this to the default 180, users will be limited to entering 180 characters in their description. This can help ensure that the description is concise and fits well within the layout of the profile header. If a user tries to enter more than the specified number of characters, they may receive an error message or the input may be truncated.

HTML support for user description

This setting allows you to control whether HTML tags are allowed in the user's description field in the profile header. When this setting is enabled (checked), users can use HTML tags in their descriptions to format text, add links, insert images, or apply other HTML styling. This provides users with more flexibility in customizing the appearance of their descriptions. If it's disabled (unchecked), HTML tags will not be allowed in the description field, and only plain text will be permitted. This can help maintain consistency and security by preventing users from adding potentially harmful or disruptive HTML code.

Profile Header Menu Position

This setting allows you to specify the position of the menu in the profile header.
  • "Bottom of Icon" means that the menu will appear below the icon or other content in the header.
  • "Left of Icon (right if RTL)" means that the menu will appear to the left of the icon or other content unless the site is using a right-to-left (RTL) language, in which case it will appear to the right.

Note: The incompatibility of themes suggests that some themes may not display the menu correctly if it opens from the bottom. In such cases, you can enable the option to make the menu open from the left instead. This ensures that the menu is displayed correctly regardless of the theme's compatibility.

Buttons & Fields

This section in the profile tab allows you to customize the layout and appearance of user profile buttons and fields. The settings below provide flexibility in customizing the user profile form layout and messages, allowing you to create a more personalized and user-friendly experience for your site visitors.

Profile Primary Button Text

This setting allows you to specify the text that will appear on the primary button used for updating the user profile. The default text is set to "Update Profile," which means that the button users click to save changes to their profile will display this text. This setting allows you to customize the button text to better fit the functionality or wording that is most appropriate for your website or user base.

Profile Secondary Button

This setting allows you to control whether the secondary button is displayed in the user profile form.
When this setting is enabled (checked), the secondary button will be displayed, giving users the option to perform a secondary action, such as cancelling or undoing changes. If this setting is disabled (unchecked), the secondary button will not be displayed, and users will only see the primary button for updating their profile. If enabled the additional option below becomes available:

  • Profile Secondary Button Text: This setting allows you to specify the text that will appear on the secondary button in the user profile form. In this case, the default text is set to "Cancel," which means that the button users click to cancel or undo changes to their profile will display this text. This setting allows you to customize the button text to better fit the functionality or wording that is most appropriate for your website or user base.

Profile Field Icons

This setting provides several options for how icons are displayed in the user profile form, specifically in edit mode. Here's what each option means:

  • Show inside text field: Icons will be displayed inside the text fields themselves. Users will see the icon directly inside the input box, providing visual cues or additional information about the field.
  • Show with label: Icons will be displayed alongside the field labels. Users will see the icon next to or near the label associated with the input box, rather than inside the input box itself.
  • Turn off: Icons will be disabled and not displayed at all in the user profile form. Users will not see any icons associated with the input fields, regardless of whether they are inside the text field or shown with the label.

Custom message on empty profile

This setting allows you to control whether a custom message is displayed when a user's profile is empty.
When this setting is enabled (checked), you can provide a custom message that will be shown to users when their profile does not contain any information. This message can be used to prompt users to fill out their profile or provide additional information. If this setting is disabled (unchecked), no custom message will be displayed when a user's profile is empty, and the profile page will be displayed without any additional messaging. If enabled, an additional option becomes available:

Custom message emoticon

This setting allows you to control whether an emoticon (specifically a sad face) is displayed above the custom message on an empty profile. When this setting is enabled (checked), the sad face emoticon will be shown above the custom message. This can be used to visually indicate to users that their profile is empty and encourage them to fill it out.

If this setting is disabled (unchecked), the emoticon will not be displayed above the custom message, and only the text of the custom message will be shown.

Deprecated Articles: Older articles have been moved to the Deprecated category and may no longer be relevant due to recent updates in Ultimate Member. However, they remain available for historical reference.

For the previous version of the Appearance Tab documentation, you can view the old article here. Please note that it may contain outdated information that has since been updated.