Many member detail and list markup changes

diff --git a/assets/email.png b/assets/email.png
deleted file mode 100644 (file)
index 14e0011..0000000
Binary files a/assets/email.png and /dev/null differ

diff --git a/css/front.css b/css/front.css
index 3b00ad8..91e2a7a 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -73,6 +73,7 @@
     margin-top: .5em;
 }
 .glm-member-list-image-wrapper {
+    max-height: 215px;
     padding: 0;
     overflow: hidden;
 }
@@ -89,51 +90,74 @@
 }
 .glm-member-detail-nameAddress {
 }
+#glm-member-detail-info > * {
+  line-height: 1.2;
+}
 #glm-member-detail-info h2 {
-    color: #92a682;
-    font-size: 20px;
+    font-size: 28px;
     padding: 5px 10px;
 }
+#glm-member-detail-info > a {
+    margin-right: 15px;
+}
+#glm-member-detail-container h2 {
+    color: #92a682;    
+}
+#glm-member-detail-sidemenu {
+    border-right: 1px solid lightgrey;
+}
+#glm-member-detail-sidemenu,
 #glm-member-detail-data > div {
     padding: 10px 40px 10px 10px;
 }
 .glm-member-detail-items {
     margin-top: .5em;
 }
-.glm-member-detail-image-wrapper {
+.glm-member-detail-featured-image-wrapper {
     padding: 0;
     max-height: 200px;
     overflow: hidden;
 }
-.glm-member-detail-image-wrapper img {
+.glm-member-detail-featured-image-wrapper img {
     float: right;
     margin: 0 auto;
 }
-.glm-package-detail-image-wrapper img {
+.glm-package-detail-featured-image-wrapper img {
     float: right;
 }
-.glm-member-detail-button {
+#glm-member-detail-images-container img {
+    border-radius: 2px;
+}
+.glm-member-detail-button,
+input[type="submit"].glm-member-detail-button {
     padding: 10px 20px;
-    border-radius: 6px;
+    border-radius: 5px;
 }
 .glm-member-entry-container,
 .glm-member-list-container {
-    background-image: -moz-linear-gradient(top, #ffffff, #E9F0F7);
-    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #E9F0F7));
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E9F0F7');
-    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E9F0F7')";
+    background: #f5f5f5 none repeat scroll 0 0;
     margin-bottom: 5px;
-    border-radius: 5px;
 }
 #glm-member-detail-container {
     background: #f5f5f5 none repeat scroll 0 0;
     border: 1px solid #ccc;
-    border-radius: 5px;
-    margin: 20px 0 50px;
+    margin: 20px 0 0;
 }
-#page-wrapper .glm-member-container { 
+
+.glm-member-container {
+    line-height: 1.3;
+    font-size: 14px;
+    overflow: hidden;
+    position: relative;
+    border-radius: 5px;
     height: auto;
 }
+.glm-member-container ul, ol, dl {
+    font-size: 14px;
+}
+.glm-member-container a:hover {
+    cursor: pointer;
+}
 #glm-member-detail-sidemenu .glm-member-detail-table td {
   cursor: pointer;
 }
@@ -207,21 +231,24 @@
 #glm-directions {
     padding: 1em;
 }
-.glm-member-list-links {
-    display: inline;
+#glm-member-detail-list-links {
+    margin: 10px 0;
 }
-.glm-member-list-links a {
-    color: black;
+#glm-member-detail-list-links a {
+    display: inline;
     text-decoration: underline;
     margin-right: 15px;
 }
+#glm-member-detail-social {
+    margin: 10px 0;
+}
 #glm-member-detail-social a {
     margin-right: 5px;
 }
-
 @media (max-width: 1024px) {
     #glm-member-detail-data > div {
         margin: 0 auto;
+        padding: 10px 0;
     }
     .glm-member-detail-image-wrapper img {
         float: none;
@@ -235,24 +262,74 @@
         border-top-right-radius: 4px;
         border-top-left-radius: 4px;
     }
+    #glm-member-detail-container {
+        margin: 20px 0 50px;
+    }    
 }
 @media (min-width: 1024px) {
-    #page-wrapper .glm-member-detail-image-wrapper {
+    .glm-member-detail-featured-image-wrapper {
         border-top-right-radius: 5px;
     }
-    
     .glm-member-list-image-wrapper {
         border-bottom-left-radius: 4px;
         border-top-left-radius: 4px;
+    }    
+    .glm-member-list-active-info {
+        left: initial;
     }
+    
 }
 
 @media (max-width: 640px) {
+    .glm-member-detail-image-wrapper  {
+        text-align: center;
+    }
+    #glm-member-detail-container {
+        margin: 20px 0 100px;
+    }
     .glm-package-detail-image-wrapper img {
         float: none;
         margin: 0 auto;
     }
+    .glm-member-list-image-border {
+        margin: 0 auto;
+    }
+    #glm-member-detail-container .glm-member-detail-info  {
+        text-align: center;
+    }
+    #glm-member-detail-amenities-container {
+        padding: 10px;
+        text-align: center;
+    }    
+    .glm-member-list-description {
+        padding: 15px;
+    }
+}
+#glm-member-detail-description-container {
+    padding: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+.glm-member-detail-border {
+    border: 1px solid lightgrey;
+    padding: 10px;
+}
+#glm-member-detail-photos {
+    margin-top: 20px;
+    b, .clearing-assembled {
+        padding: 5px;
+    }
 }
+#glm-locationMap-container {
+    margin-bottom: 0px;
+}
+#glm-locationMap {
+    margin: 0;
+}
+.glm-member-list-description {
+    padding: 15px 15px 15px 0;
+}
+    
 /*#glm-locationMap-container {
     margin-bottom: 0px;
 }
@@ -295,9 +372,6 @@
     max-height: 200px;
     max-width: 300px;
 }
-.glm-member-container .glm-member-list-description {
-    padding: 20px 20px 20px 0;
-}
 #glm-member-detail-container {
     .glm-member-detail-info  {
     }
@@ -329,21 +403,4 @@
         padding: 5px;
     }
 }
-.glm-member-package-container .address a,
-.glm-member-package-container .package-info > h3 a {
-    color: #34A9CD;
-}
-.glm-member-package-container .address a.email,
-.glm-member-package-container .member > h2 a {
-    color: #92A682;
-}*/
-div.member div.address a.email {
-    display: block;
-    float: left;
-    width: auto;
-    color: #73BF45;
-    height: 28px;
-    margin: 0 10px 3px 0;
-    padding: 4px 0 4px 32px;
-    background: url(../assets/email.png) 0 50% no-repeat;
-}
\ No newline at end of file
+*/
\ No newline at end of file

diff --git a/views/front/members/detail.html b/views/front/members/detail.html
index ca03ca9..3d9b246 100644 (file)
--- a/views/front/members/detail.html
+++ b/views/front/members/detail.html
@@ -1,6 +1,6 @@
 {include file='front/members/header.html'}
     <script>
-    document.write('<a class="button right glm-member-detail-button" href="' + document.referrer + '">Take me back</a>');
+    document.write('<a class="button glm-member-detail-button" href="' + document.referrer + '">Take me back</a>');
 </script>
 
 
@@ -38,9 +38,9 @@
                     </div>     
                 </div>
                 <div class="row">
-                    <div>
-                        <input type="submit" id="glm-showDirectionsButton" class="button button-secondary glm-button" value="Show Directions">
-                        <input type="submit" id="glm-showLocationButton" class="button button-secondary glm-button glm-hidden" value="Show {$terms.term_member_cap} Location">
+                    <div style="text-align: center;">
+                        <input type="submit" id="glm-showDirectionsButton" class="button button-secondary glm-button glm-member-detail-button" value="Show Directions">
+                        <input type="submit" id="glm-showLocationButton" class="button button-secondary glm-button glm-hidden glm-member-detail-button" value="Show {$terms.term_member_cap} Location">
                     </div>
                 </div>
             </div>
@@ -53,7 +53,7 @@
             <div class="row">
                 <div id="glm-member-detail-info" class="small-12 medium-6 columns">
         <!-- Member name, address, and basic information -->                    
-                    <h2>
+                    <h2 class="glm-member-title">
                     {$member.member}
                     </h2>
                   {if $settings.detail_show_address}
@@ -74,43 +74,37 @@
                     {if $member.region && $settings.detail_show_region}<div><p><b>Region:</b> {$member.region}</div>{/if}
                     <div></div>
                     {apply_filters('glm-member-db-front-members-detail-otherDetailBottom', '', $member.id)}
-                    <div class="glm-member-list-links">
-                        <div id="glm-member-detail-social">
-                            <a href="#" target="_blank"><img src="{$baseURL}/assets/blog.png"></a>
-                            <a href="http://www.blogger.com" target="_blank"><img src="{$baseURL}/assets/blogger.png"></a>
-                            <a href="http://www.facebook.com" target="_blank"><img src="{$baseURL}/assets/facebook.png"></a>
-                            <a href="http://www.twitter.com" target="_blank"><img src="{$baseURL}/assets/twitter.png"></a>
-                        </div>
+                    <div id="glm-member-detail-social">
+                        <a href="#" target="_blank"><img src="{$baseURL}/assets/blog.png"></a>
+                        <a href="http://www.blogger.com" target="_blank"><img src="{$baseURL}/assets/blogger.png"></a>
+                        <a href="http://www.facebook.com" target="_blank"><img src="{$baseURL}/assets/facebook.png"></a>
+                        <a href="http://www.twitter.com" target="_blank"><img src="{$baseURL}/assets/twitter.png"></a>
+                    </div>
+                    <div id="glm-member-detail-list-links">
                         {apply_filters('glm-member-db-front-members-detail-linksTop', '', $member.id)}
                         {if $member.url && $settings.detail_show_url}<a href="{$member.url}"{if $settings.detail_show_url_newtarget} target="_blank"{/if}>Website</a>{/if}
                         {if $member.email && $settings.detail_show_email}<a href="mailto:{$member.email}">Email</a>{/if}
-<!--                        {if $settings.detail_show_imagegallery && $haveImageGallery}<a href="#glm-member-detail-images-container">Photo Gallery</a>{/if}-->
+                        {if $settings.detail_show_imagegallery && $haveImageGallery}<a href="#glm-member-detail-images">Photo Gallery</a>{/if}
                         {if $settings.detail_show_coupons && $coupons}<a href="#glm-member-detail-coupons">Coupons</a>{/if}
-                        {if $settings.detail_show_packages && $packages}<a href="#glm-member-detail-packages">Packages</a>{/if}
                         {apply_filters('glm-member-db-front-members-detail-linksBottom', '', $member.id)}
-</div>
-                    </div>      
+                    </div>
+                </div>      
 
-                    {if $member.logo && $settings.detail_show_logo}
-                    <div class="glm-member-detail-image-wrapper small-12 medium-6 columns">
+                {if $member.logo && $settings.detail_show_logo}
+                <div class="glm-member-detail-featured-image-wrapper small-12 medium-6 columns">
 <!--                            <img class="glm-member-list-image-left" src="http://placehold.it/500x300">-->
-                            <img CLASS="glm-member-list-image-left" src="{$glmPluginMediaURL}/images/{$settings.detail_logo_size}/{$member.logo}">
-                    </div>
-                    {/if}
+                        <img CLASS="glm-member-list-image-left" src="{$glmPluginMediaURL}/images/{$settings.detail_logo_size}/{$member.logo}">
                 </div>
-            
-            
-            <div>
-                <!-- Laury - Here's a filter for the internal page content links -->
-                {apply_filters('glm-member-db-front-members-detail-internalContentLinks', '', $member.id)}
+                {/if}
             </div>
 
             
 <!-- Attributes: amenitities, credit cards, etc -->
-            <div id="glm-member-detail-descr-row" class="row" data-equalizer data-options="equalize_on_stack:false">
+            <div id="glm-member-detail-descr-row" class="row">
                 {apply_filters('glm-member-db-front-members-detail-attributesTop', '', $member.id)}
                 <div id="glm-member-detail-sidemenu" class="small-12 medium-3 columns" >
                     <table class="glm-member-detail-table">
+                        {apply_filters('glm-member-db-front-members-detail-sidemenuTop', '', $member.id)}
                         <th><b>Member Info</b></th>
                         <tr><td id="glm-member-detail-fullprofile-button">Full profile</td></tr>
                         <tr><td id="glm-member-detail-description-button" class="selected">Description</td></tr>
@@ -126,23 +120,15 @@
                         {if $member.categories && $settings.detail_show_categories}
                         <tr><td id="glm-member-detail-categories-button">Categories</td></tr>
                         {/if}
-                        {if $settings.detail_show_coupons}
+                        {if $settings.detail_show_coupons && $coupons}
                         <tr><td id="glm-member-detail-coupons-button">Coupons</td></tr>
                         {/if}
-<!--                        {if $settings.detail_show_coupons && $coupons}
-                        <tr><td id="glm-member-detail-coupons">Coupons</td></tr>
-                        {/if}-->
-<!--                        {if $settings.detail_show_packages && $packages}
-                        <tr><td id="glm-member-detail-packages">Packages</td></tr>
-                        {/if}-->
-                        {if !$havePackages}
-                        <tr><td id="glm-member-detail-amenities-button">Packages</td></tr>
-                        {/if}
+                        {apply_filters('glm-member-db-front-members-detail-sidemenuBottom', '', $member.id)}
                     </table>
                 </div>
                 <div id="glm-member-detail-data" class="small-12 medium-9 columns">
                     <div id="glm-member-detail-description-container">
-                        <div data-equalizer-watch>
+                        <div>
                            {apply_filters('glm-member-db-front-members-detail-descriptionTop', '', $member.id)}
                            {if $member.descr && $settings.detail_show_descr}{$member.descr|nl2br}{/if}
                            {if $member.short_descr && $settings.detail_show_short_descr}{$member.short_descr|nl2br}{/if}
@@ -151,7 +137,7 @@
                     </div>
                     {apply_filters('glm-member-db-front-members-detail-descriptionAfter', '', $member.id)}
                     {if $member.amenities && $settings.detail_show_amenities}
-                    <div id="glm-member-detail-amenities-container" class="small-12 medium-9 columns">
+                    <div id="glm-member-detail-amenities-container" class="small-12 medium-9">
                         <table class="glm-member-detail-table">
                             <tr><th>Amenities & Services</th></tr>
                             {foreach $member.amenities as $a}
@@ -166,7 +152,7 @@
                     {/if}
 
                     {if $member.cc_type && $settings.detail_show_creditcards}
-                    <div id="glm-member-detail-creditcards-container" class="small-12 medium-9 columns">
+                    <div id="glm-member-detail-creditcards-container" class="small-12 medium-9">
                         <p>     
                             <table class="glm-member-detail-table">
                             <tr><th>Credit Cards Accepted:</th></tr>
@@ -179,7 +165,7 @@
                     {/if}
                     
                     {if $member.categories && $settings.detail_show_categories}
-                    <div id="glm-member-detail-categories-container" class="small-12 medium-9 columns">
+                    <div id="glm-member-detail-categories-container" class="small-12 medium-9">
                         <table class="glm-member-detail-table">
                             <tr><th>{$terms.term_member_cap} Categories</th></tr>
                             {foreach $member.categories as $c}
@@ -194,24 +180,16 @@
                     {/if}
 
                     {if $settings.detail_show_coupons && $coupons}
-                    <div id="glm-member-detail-coupons-container" class="small-12 medium-9 columns">
+                    <div id="glm-member-detail-coupons-container" class="small-12 medium-9">
                         <a name="glm-member-detail-coupons"></a>
                     </div>
                     {/if}
 
-                    {if $settings.detail_show_packages && $havePackages && $packages}
-                    <div id="glm-member-detail-packages-container" class="small-12 medium-9 columns">
-                        <a name="glm-member-detail-packages"></a>
-                    </div>
-                    {/if}
-
                     {if $settings.detail_show_imagegallery && $haveImageGallery}
-                    <div id="glm-member-detail-images-container" class="small-12 columns">
+                    <div id="glm-member-detail-images-container" class="small-12">
                         {apply_filters('glm-member-db-front-members-detail-galleryTop', '', $member.id)}
-                        <a name="glm-member-detail-images-gallery"></a>
-                        <div class="small-12 columns">
-                            <b>Photo Gallery</b>
-                        </div>
+                        <a name="glm-member-detail-images-container"></a>
+                        <h2>Photo Gallery</h2>
 
                         <div class="small-12 columns">
                             <ul class="clearing-thumbs small-block-grid-2 medium-block-grid-3 large-block-grid-4" data-clearing>
@@ -223,6 +201,7 @@
                         {apply_filters('glm-member-db-front-members-detail-galleryBottom', '', $member.id)}
                     </div>    
                     {/if}
+                    {apply_filters('glm-member-db-front-members-detail-dataBottom','',$member.id)}
                 </div>
             </div>
             {apply_filters('glm-member-db-front-members-detail-attributesBottom', '', $member.id)}
@@ -238,15 +217,34 @@
         {apply_filters('glm-member-db-front-members-detail-jqueryScriptTop', '', $member.id)}
         
         jQuery(document).ready(function($) {
+
+        $("#glm-member-detail-list-links a").on("click", function( e ) {
+                e.preventDefault();
+                var target = $(this).attr("href");
+                $(target+"-container").show();
+                $(target+"-button").addClass("selected");
+                $("#glm-member-detail-data").show();
+                setTimeout(function() {
+                    $("body, html").animate({ 
+                        scrollTop: $(target+"-container").offset().top 
+                    }, 600);
+                }, 500);
+                    
+        });
+//        $("#glm-member-detail-list-links a").on("click", function( e ) {
+//                e.preventDefault();
+//                $("#glm-member-detail-images-container").show();
+//                $("#glm-member-detail-data").show();
+//                setTimeout(function() {
+//                    $("body, html").animate({ 
+//                        scrollTop: $("#glm-member-detail-images").offset().top 
+//                    }, 600);
+//                }, 500);
+//
+//        });
         
-        $("#glm-member-detail-fullprofile-container").hide();
-        $("#glm-member-detail-images-container").hide();
-        $("#glm-member-detail-creditcards-container").hide();
-        $("#glm-member-detail-categories-container").hide();
-        $("#glm-member-detail-coupons-container").hide();
-        $("#glm-member-detail-packages-container").hide();
-        $("#glm-member-detail-amenities-container").hide();
-        $("#glm-member-detail-images-container").hide();
+        $("#glm-member-detail-data").children().not("#glm-member-detail-description-container").hide();
+    
         $("#glm-member-detail-fullprofile-button").click(function() {
             if ( $("#glm-member-detail-data").css('display') == 'none') {
                 $("#glm-member-detail-data").show().children().show();
@@ -260,6 +258,22 @@
                 $("#glm-member-detail-sidemenu table tr td").addClass("selected");
             }
         });
+        $("#glm-member-detail-sidemenu table tr td").not("#glm-member-detail-description-button").not("#glm-member-detail-fullprofile-button").on("click", function( e ) {
+            var target = $(this).attr("id").slice(0, -7);
+            console.log($(this).attr("id"));
+            console.log(target);
+            console.log(target+"-container");
+             if ( $("#"+target+"-container").css('display') == 'none' ){
+                $("#"+target+"-container").show();
+                $("#glm-member-detail-data").show();
+                $(this).addClass("selected");
+             } else {
+                $("#"+target+"-container").hide(); 
+                $(this).removeClass("selected");
+                $("#glm-member-detail-fullprofile-button").removeClass("selected");
+             }
+        });
+        
         $("#glm-member-detail-description-button" ).click(function() {
             if ( $("#glm-member-detail-description-container").css('display') == 'none' ){
                 $("#glm-member-detail-description").show();
@@ -272,85 +286,7 @@
                 $("#glm-member-detail-fullprofile-button").removeClass("selected");
             }
         });
-        {if $member.amenities && $settings.detail_show_amenities}
-            $("#glm-member-detail-amenities-button" ).click(function() {
-                if ( $("#glm-member-detail-amenities-container").css('display') == 'none' ){
-                    $("#glm-member-detail-amenities-container").show();
-                $("#glm-member-detail-data").show();
-                    $("#glm-member-detail-amenities-button").addClass("selected");
-                } else {
-                    $("#glm-member-detail-amenities-container").hide();
-                    $("#glm-member-detail-amenities-button").removeClass("selected");
-                    $("#glm-member-detail-fullprofile-button").removeClass("selected");
-                }
-            });
-        {/if}
-
-        {if $settings.detail_show_imagegallery && $haveImageGallery}
-            $("#glm-member-detail-images-button" ).click(function() {
-                if ( $("#glm-member-detail-images-container").css('display') == 'none' ){
-                    $("#glm-member-detail-images-container").show();
-                $("#glm-member-detail-data").show();
-                    $("#glm-member-detail-images-button").addClass("selected");
-                } else {
-                    $("#glm-member-detail-images-container").hide();
-                    $("#glm-member-detail-images-button").removeClass("selected");
-                    $("#glm-member-detail-fullprofile-button").removeClass("selected");
-                }
-            });
-        {/if}
-        {if $member.cc_type && $settings.detail_show_creditcards}
-            $("#glm-member-detail-creditcards-button" ).click(function() {
-                if ( $("#glm-member-detail-creditcards-container").css('display') == 'none' ){
-                    $("#glm-member-detail-creditcards-container").show();
-                $("#glm-member-detail-data").show();
-                    $("#glm-member-detail-creditcards-button").addClass("selected");
-                } else {
-                    $("#glm-member-detail-creditcards-container").hide();
-                    $("#glm-member-detail-creditcards-button").removeClass("selected");
-                    $("#glm-member-detail-fullprofile-button").removeClass("selected");
-                }
-            });
-        {/if}
-        {if $member.categories && $settings.detail_show_categories}
-            $("#glm-member-detail-categories-button" ).click(function() {
-                if ( $("#glm-member-detail-categories-container").css('display') == 'none' ){
-                    $("#glm-member-detail-categories-container").show();
-                $("#glm-member-detail-data").show();
-                    $("#glm-member-detail-categories-button").addClass("selected");
-                } else {
-                    $("#glm-member-detail-categories-container").hide();
-                    $("#glm-member-detail-categories-button").removeClass("selected");
-                    $("#glm-member-detail-fullprofile-button").removeClass("selected");
-                }
-            });
-        {/if}
-        {if $settings.detail_show_coupons && $coupons}
-            $("#glm-member-detail-coupons-button" ).click(function() {
-                if ( $("#glm-member-detail-coupons-container").css('display') == 'none' ){
-                    $("#glm-member-detail-coupons-container").show();
-                $("#glm-member-detail-data").show();
-                    $("#glm-member-detail-coupons-button").addClass("selected");
-                } else {
-                    $("#glm-member-detail-coupons-container").hide();
-                    $("#glm-member-detail-coupons-button").removeClass("selected");
-                    $("#glm-member-detail-fullprofile-button").removeClass("selected");
-                }
-            });
-        {/if}
-        {if $settings.detail_show_packages && $packages}
-        $("#glm-member-detail-packages-button" ).click(function() {
-                if ( $("#glm-member-detail-packages-container").css('display') == 'none' ){
-                    $("#glm-member-detail-packages-container").show();
-                $("#glm-member-detail-data").show();
-                    $("#glm-member-detail-packages-button").addClass("selected");
-                } else {
-                    $("#glm-member-detail-packages-container").hide();
-                    $("#glm-member-detail-packages-button").removeClass("selected");
-                    $("#glm-member-detail-fullprofile-button").removeClass("selected");
-                }
-            });
-        {/if}
+       
             
     {if $settings.detail_show_map}
             /*

diff --git a/views/front/members/list.html b/views/front/members/list.html
index 0f5cc67..8e258fb 100644 (file)
--- a/views/front/members/list.html
+++ b/views/front/members/list.html
@@ -84,7 +84,7 @@
         
         {apply_filters('glm-member-db-front-members-list-memberAbove', '', $m.id)}
         <div class="row">
-            <div class="small-12 columns glm-member-list-container glm-member-container">
+            <div class="glm-member-list-container glm-member-container small-12 columns">
                 {apply_filters('glm-member-db-front-members-list-memberTop', '', $m.id)}
                 <div class="row">
                 <!-- Member Logo - Medium and up-->
@@ -95,14 +95,14 @@
 <!--                            <img class="glm-member-list-image left" src="http://placehold.it/500x300">-->
                         </div>
                     </div>
-                    <div class="small-12 medium-4 glm-member-list-active-info columns">
+                    <div class="glm-member-list-active-info small-12 medium-4 columns">
                 {else}
                     <div class="glm-member-list-image-wrapper small-12 medium-4 columns"><br></div>
-                    <div class="small-12 medium-4 glm-member-list-active-info columns">    
+                    <div class="glm-member-list-active-info small-12 medium-4 columns">    
                 {/if}
 <!-- Member name, address, and basic information -->
                     {apply_filters('glm-member-db-front-members-list-memberInfoTop', '', $m.id)}                                        
-                    <h2>
+                    <h2 class="member-title">
           {if $settings.list_show_detail_link}
                         <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">{$m.member}</a>