Directory styling
-
Hi, I’m trying to apply css to a returned value in the extra user information section of a directory, so that I can have the output in a different colour. For example when the returned value is No it is shown in red. When I inspect the elements I want to style I see:
<div class="um-member-metaline um-member-metaline-fee_received"> <strong>Membership Fee Received:</strong> No </div>But because No is in the same div class as Membership Fee Received I can’t target it in css, and also if my returned value is Yes then I wouldn’t want it being targeted. Has anyone had a similar question and achieved it?
Thanks
Viewing 4 replies - 1 through 4 (of 4 total)
-
You can try this custom
members-list.php<?php /** * Template for the members directory list * * This template can be overridden by copying it to yourtheme/ultimate-member/members-list.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-list-<?php echo esc_attr( $unique_hash ) ?>"> <div class="um-members um-members-list"> <# 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> <div class="um-member-card-container"> <?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_list_in_profile_photo_tmpl', $args ); ?> </a> </div> <?php } ?> <div class="um-member-card <?php echo ! $profile_photo ? 'no-photo' : '' ?>"> <div class="um-member-card-content"> <div class="um-member-card-header"> <?php if ( $show_name ) { ?> <# if ( user.display_name_html ) { #> <div class="um-member-name"> <a href="<code>user.profile_url</code>" title="<# if ( user.display_name ) { #><code>user.display_name</code><# } #>"> <code>user.display_name_html</code> </a> </div> <# } #> <?php } ?> <code>user.hook_just_after_name</code> <?php do_action( 'um_members_list_after_user_name_tmpl', $args ); ?> <code>user.hook_after_user_name</code> </div> <?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 ); ?>"> <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 ) { echo ' no-animate'; } ?>"> <div class="um-member-meta"> <?php foreach ( $reveal_fields as $key ) { ?> <# if ( typeof user['<?php echo $key; ?>'] !== 'undefined' ) { #> <?php if ( $key == 'fee_received' ) { ?> <# if ( user['<?php echo $key; ?>'] == 'Yes' ) { #> <div class="um-member-metaline um-member-metaline-<?php echo $key; ?>"> <strong style="color:green !important"><code>user['label_<?php echo $key;?>']</code>: <code>user['<?php echo $key;?>']</code></strong> </div> <# } else { #> <div class="um-member-metaline um-member-metaline-<?php echo $key; ?>"> <strong style="color:red !important"><code>user['label_<?php echo $key;?>']</code>: <code>user['<?php echo $key;?>']</code></strong> </div> <# } #> <?php } else { ?> <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 } ?> <# } #> <?php } if ( $show_social ) { ?> <div class="um-member-connect"> <code>user.social_urls</code> </div> <?php } ?> </div> </div> <# } #> <?php } ?> </div> <div class="um-member-card-actions"> <# if ( Object.keys( user.dropdown_actions ).length > 0 ) { #> <div class="um-member-cog"> <a href="javascript:void(0);" class="um-member-actions-a"> <i class="um-faicon-cog"></i> </a> <?php UM()->member_directory()->dropdown_menu_js( '.um-member-cog', 'click', 'user' ); ?> </div> <# } #> </div> </div> </div> <div class="um-member-card-footer <?php echo ! $profile_photo ? 'no-photo' : '' ?> <?php if ( $show_userinfo && $userinfo_animate ) { ?><# if ( ! $show_block ) { #>no-reveal<# } #><?php } ?>"> <div class="um-member-card-footer-buttons"> <?php do_action( 'um_members_list_just_after_actions_tmpl', $args ); ?> </div> <?php if ( $show_userinfo && $userinfo_animate ) { ?> <# if ( $show_block ) { #> <div class="um-member-card-reveal-buttons"> <div class="um-member-more"> <a href="javascript:void(0);"><i class="um-faicon-angle-down"></i></a> </div> <div class="um-member-less"> <a href="javascript:void(0);"><i class="um-faicon-angle-up"></i></a> </div> </div> <# } #> <?php } ?> </div> </div> <# }); #> <# } else { #> <div class="um-members-none"> <p><?php echo $no_users; ?></p> </div> <# } #> </div> </script>
Viewing 4 replies - 1 through 4 (of 4 total)
The topic ‘Directory styling’ is closed to new replies.
