Brian Gardner 7.27.16
/* 4. Add CSS for member images in theme style sheet: */
/* Members
---------------------------------------------------------------------------------------------------- */
.members img {
vertical-align: top;
}
.member {
display: block;
float: left;
height: 20%;
position: relative;
width: 20%;
}
.member-name {
background-color: #fff;
bottom: 10px;
font-family: 'futura-pt', sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
position: absolute;
right: 10px;
text-transform: uppercase;
}
.member-name a {
display: block;
padding: 5px 10px;
}
.member-name a:hover {
background-color: #ff3867;
color: #fff;
}
<! --- 3. Add HTML for the member images into a text widget: --->
<div class="member"><img src="http://gobrocation.com/images/brian-gardner.jpg" alt="Brian Gardner" /><span class="member-name"><a target="_blank" href="http://twitter.com/bgardner">Brian Gardner</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/joshua-becker.jpg" alt="Joshua Becker" /><span class="member-name"><a target="_blank" href="http://twitter.com/joshua_becker">Joshua Becker</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/darrell-vesterfelt.jpg" alt="Darrell Vesterfelt" /><span class="member-name"><a target="_blank" href="http://twitter.com/dvest">Darrell Vesterfelt</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/john-shultz.jpg" alt="John Shultz" /><span class="member-name"><a target="_blank" href="http://twitter.com/jshltz">John Shultz</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/marc-chernoff.jpg" alt="Marc Chernoff" /><span class="member-name"><a target="_blank" href="http://twitter.com/marcandangel">Marc Chernoff</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/jeff-goins.jpg" alt="Jeff Goins" /><span class="member-name"><a target="_blank" href="http://twitter.com/jeffgoins">Jeff Goins</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/nathan-barry.jpg" alt="Nathan Barry" /><span class="member-name"><a target="_blank" href="http://twitter.com/nathanbarry">Nathan Barry</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/anthony-ongaro.jpg" alt="Anthony Ongaro" /><span class="member-name"><a target="_blank" href="http://twitter.com/anthonyongaro">Anthony Ongaro</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/seth-spears.jpg" alt="Seth Spears" /><span class="member-name"><a target="_blank" href="http://twitter.com/SpearsMarketing">Seth Spears</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/vincent-nguyen.jpg" alt="Vincent Nguyen" /><span class="member-name"><a target="_blank" href="http://twitter.com/SelfStairway">Vincent Nguyen</a></span></div>
//* 2. Hook the “members” widget area after the site header:
//* Do NOT include the opening php tag
//* Add members widget area after header
add_action( 'genesis_after_header', 'brocation_members_widget' );
function brocation_members_widget() {
genesis_widget_area( 'members', array(
'before' => '<div id="members" class="members"><div class="wrap">',
'after' => '</div></div>',
) );
}
//* http://briangardner.com/photo-grid/
//* 1. Register the “members” widget area in the functions file:
//* Do NOT include the opening php tag
//* Register members widget area
genesis_register_sidebar( array(
'id' => 'members',
'name' => __( 'Members', 'brocation' ),
'description' => __( 'This is the members widget area.', 'brocation' ),
) );