How to edit CSS for Ultimate Member directory filters

@wesmed

Try to add the field’s meta-key for testing the content.
This will give you the key name after each field.

Modify the line 99 to:

<code>user['<?php echo $key; ?>']</code><?php echo ' Key=' . $key; ?>

@missveronicatv

Like this?

<# if ( typeof user['<?php echo $key; ?>'] !== 'undefined' ) { #>
     <div class="um-member-tagline um-member-tagline-<?php echo esc_attr( $key ); ?>"
          data-key="<?php echo esc_attr( $key ); ?>">
         user['<?php echo $key; ?>']</code><?php echo ' LO_acre=' . $key; ?>
	  <?php if( $key == 'LO_acre' ) echo 'Acreage: '; ?>
                user['<?php echo $key; ?>']
	</div>
<# } #>

• This reply was modified 1 year, 9 months ago by wesmed.
• This reply was modified 1 year, 9 months ago by wesmed.
• This reply was modified 1 year, 9 months ago by wesmed.

@wesmed

<# if ( typeof user['<?php echo $key; ?>'] !== 'undefined' ) { #>
	<div class="um-member-tagline um-member-tagline-<?php echo esc_attr( $key ); ?>"
			data-key="<?php echo esc_attr( $key ); ?>">
			<?php if( $key == 'LO_acre' ) echo 'Acreage: '; ?><code>user['<?php echo $key; ?>']</code><?php echo ' Key=' . $key; ?>
	</div>
<# } #>

@missveronicatv

Sorry, I can’t get the code block to format correctly. This may make more sense:

line99 user['<strong><?php</strong> echo $key; <strong>?></strong>'] <?php echo ‘ LO_acre=’ . $key; ?>

line100 <?php if( $key == ‘LO_acre’ ) echo ‘Acreage: ‘; ?>

line101 user['<strong><?php</strong> echo $key; <strong>?></strong>']

@missveronicatv

I see that UM has resolved the template override paths with version 2.6.4; however, I am still unable to get the modified members-grid.php template to reflect the profile tagline labels with the code provided most recently on this thread. Does the newest UM version require a different approach from the what’s been discussed above? Thank you!!

@wesmed

You can try to use this members-grid.php which I have tested with UM version 2.6.7.
Update the nextkey1, nextkey2 to their real meta-key names and update their Custom texts. You will find these lines at 99,100 in this template:

<?php
/**
 * Template for the members directory grid
 *
 * This template can be overridden by copying it to yourtheme/ultimate-member/members-grid.php
 *
 * Page: "Members"
 *
 * @version 2.6.1
 *
 * @var array  $args
 * @var bool   $cover_photos
 * @var bool   $profile_photo
 * @var bool   $show_name
 * @var bool   $show_tagline
 * @var bool   $show_userinfo
 * @var bool   $userinfo_animate
 * @var bool   $show_social
 * @var array  $reveal_fields
 * @var string $no_users
 */
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$unique_hash = substr( md5( $args['form_id'] ), 10, 5 ); ?>

<script type="text/template" id="tmpl-um-member-grid-<?php echo esc_attr( $unique_hash ) ?>">
	<div class="um-members um-members-grid">
		<div class="um-gutter-sizer"></div>

		<# if ( data.length > 0 ) { #>
			<# _.each( data, function( user, key, list ) { #>

				<div id="um-member-<code>user.card_anchor</code>-<?php echo esc_attr( $unique_hash ) ?>" class="um-member um-role-<code>user.role</code> <code>user.account_status</code> <?php if ( $cover_photos ) { echo 'with-cover'; } ?>">

					<span class="um-member-status <code>user.account_status</code>">
						<code>user.account_status_name</code>
					</span>

					<?php if ( $cover_photos ) { ?>
						<div class="um-member-cover" data-ratio="<?php echo esc_attr( UM()->options()->get( 'profile_cover_ratio' ) ); ?>">
							<div class="um-member-cover-e">
								<a href="<code>user.profile_url</code>" title="<# if ( user.display_name ) { #><code>user.display_name</code><# } #>">
									<code>user.cover_photo</code>
								</a>
							</div>
						</div>
					<?php }

					if ( $profile_photo ) { ?>
						<div class="um-member-photo radius-<?php echo esc_attr( UM()->options()->get( 'profile_photocorner' ) ); ?>">
							<a href="<code>user.profile_url</code>" title="<# if ( user.display_name ) { #><code>user.display_name</code><# } #>">
								<code>user.avatar</code>
								<?php do_action( 'um_members_in_profile_photo_tmpl', $args ); ?>
							</a>
						</div>
					<?php } ?>

					<div class="um-member-card <?php if ( ! $profile_photo ) { echo 'no-photo'; } ?>">
						<?php if ( $show_name ) { ?>
							<# if ( user.display_name_html ) { #>
								<div class="um-member-name">
									<a href="<code>user.profile_url</code>" title="<code>user.display_name</code>">
										<code>user.display_name_html</code>
									</a>
								</div>
							<# } #>
						<?php }

						// please use for buttons priority > 100
						do_action( 'um_members_just_after_name_tmpl', $args ); ?>
						<code>user.hook_just_after_name</code>

						<# if ( user.can_edit ) { #>
							<div class="um-members-edit-btn">
								<a href="<code>user.edit_profile_url</code>" class="um-edit-profile-btn um-button um-alt">
									<?php _e( 'Edit profile','ultimate-member' ) ?>
								</a>
							</div>
						<# } #>

						<?php do_action( 'um_members_after_user_name_tmpl', $args ); ?>
						<code>user.hook_after_user_name</code>

						<?php if ( $show_tagline && ! empty( $tagline_fields ) && is_array( $tagline_fields ) ) {
							foreach ( $tagline_fields as $key ) {
								if ( empty( $key ) ) {
									continue;
								} ?>

								<# if ( typeof user['<?php echo $key; ?>'] !== 'undefined' ) { #>
									<div class="um-member-tagline um-member-tagline-<?php echo esc_attr( $key ); ?>"
									     data-key="<?php echo esc_attr( $key ); ?>">
										<?php if( $key == 'multi__key' ) echo 'Desired Land Type: '; 
										      if( $key == 'nextkey1' ) echo 'nextkey1 Custom text: ';
										      if( $key == 'nextkey2' ) echo 'nextkey2 Custom text: ';
										?>
										<code>user['<?php echo $key; ?>']</code>
									</div>
								<# } #>

							<?php }
						}

						if ( $show_userinfo ) { ?>

							<# var $show_block = false; #>

							<?php foreach ( $reveal_fields as $k => $key ) {
								if ( empty( $key ) ) {
									unset( $reveal_fields[ $k ] );
								} ?>
								<# if ( typeof user['<?php echo $key; ?>'] !== 'undefined' ) {
									$show_block = true;
								} #>
							<?php }

							if ( $show_social ) { ?>
								<# if ( ! $show_block ) { #>
									<# $show_block = user.social_urls #>
								<# } #>
							<?php } ?>

							<# if ( $show_block ) { #>
								<div class="um-member-meta-main">

									<?php if ( $userinfo_animate ) { ?>
										<div class="um-member-more">
											<a href="javascript:void(0);"><i class="um-faicon-angle-down"></i></a>
										</div>
									<?php } ?>

									<div class="um-member-meta <?php if ( ! $userinfo_animate ) { echo 'no-animate'; } ?>">

										<?php foreach ( $reveal_fields as $key ) { ?>

											<# if ( typeof user['<?php echo $key; ?>'] !== 'undefined' ) { #>
												<div class="um-member-metaline um-member-metaline-<?php echo $key; ?>">
													<strong><code>user['label_<?php echo $key;?>']</code>:</strong> <code>user['<?php echo $key;?>']</code>
												</div>
											<# } #>

										<?php }

										if ( $show_social ) { ?>
											<div class="um-member-connect">
												<code>user.social_urls</code>
											</div>
										<?php } ?>
									</div>

									<?php if ( $userinfo_animate ) { ?>
										<div class="um-member-less">
											<a href="javascript:void(0);"><i class="um-faicon-angle-up"></i></a>
										</div>
									<?php } ?>
								</div>
							<# } #>
						<?php } ?>

					</div>
				</div>

			<# }); #>
		<# } else { #>

			<div class="um-members-none">
				<p><?php echo $no_users; ?></p>
			</div>

		<# } #>

		<div class="um-clear"></div>
	</div>
</script>

@missveronicatv

With all of your help and guidance I was able to successfully modify the labels of the directory filters. I really appreciate your patience/persistence with helping me resolve this!