JJFisher

Thank you so much!

Hi Niche,

That works perfectly, thank you! I’m having an issue where the staff are now displaying in a single column, I can’t seem to get them to display in three columns as they were before. Is there a mistake in the CSS I posted above, or am I doing something else wrong?

Hi

Thanks for the great plugin! I’m using the template and jQuery posted in this thread by the developer, and an edited version of the CSS, for some reason the lightboxes for the centre staff cross the page margin, and those for the right hand staff won’t appear, how do I fix this?

Here’s a link to the page: https://kclmsa.co.uk/msa-committee/

Here’s my CSS:

/*  div wrapped around entire staff list  */
div.staff-member-listing {

}

div[rel=show-staff] {
        cursor: pointer;
}

/*  div wrapped around each staff member  */
div.staff-member {
        padding-bottom: 2em;
position:relative;
display: inline-block !important;
padding: 0 1em;
}

img.staff-member-photo {
border:thin solid #000000;
border-radius: 11px;
}

img.staff-member-photo:hover {
border:thin solid #e6ac47;
border-radius: 11px
}

/*  "Even" staff member  */
div.staff-member.even {

}

/*  "Odd" staff member  */
div.staff-member.odd {
        margin-top: 2em;
}

/*  Last staff member  */
div.staff-member.last {
        padding-bottom: 0;
}

/*  Wrap around staff info  */

.staff-member-info-wrap {
        display:none;
        background: #eee;
        position: absolute;
        border-radius: 11px;
        border: thin solid #ccc;
        padding: 1em;
        font-size: .75em;
        width: 180%;
        top: -2%;
        left: 104%;
        box-shadow: 0px 0px 24px rgba(0, 0, 0, .2);
        z-index: 1000;
}

/*  [staff-bio-formatted]  */
div.staff-member-bio {

}

/*  p tags within [staff-bio-formatted]  */
div.staff-member-bio p {

}

/*  [staff-photo]  */
img.staff-member-photo {
        float: left;
}

/*  [staff-email-link]  */
.staff-member-email {

}

/*  [staff-name-formatted]  */
div.staff-member-listing h3.staff-member-name {
        margin: 0;
}

/*  [staff-position-formatted]  */
div.staff-member-listing h4.staff-member-position {
        margin: 0;
        font-style: italic;
}

/* Clearfix for div.staff-member */
div.staff-member:after {
        content: "";
        display: block;
        clear: both;
}

/* Clearfix for <= IE7 */
* html div.staff-member { height: 1%; }
div.staff-member { display: block; }