Support » Plugin: Simple Staff List » Demo of it working on a site ?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Brett Shumaker

    (@brettshumaker)

    Hi,
    Thanks for your interest in the plugin. I don’t have a “real-world” example to show you, but here’s the test site I was testing the plugin on to get my screenshots: http://brettshumaker.com/testsite/

    Like it says in the docs, the output is completely customizable via custom css entered into the plugin’s “Templates” page.

    Let me know if you have any questions!

    thanks for your quick reply – I’ll take a look.

    Can someone give me a sample code of a template they are using that would have the photo on left or right of the full bio?

    Plugin Author Brett Shumaker

    (@brettshumaker)

    Hey mtporter:
    I don’t know of anyone using it like that specifically but you can easily do it that way by editing the Custom CSS on the plugin’s Template’s page.

    Using the default staff loop template:

    `[staff_loop]
    	<img class="staff-member-photo" src="[staff-photo-url]" alt="[staff-name] : [staff-position]">
    	<div class="staff-member-info-wrap">
    		[staff-name-formatted]
    		[staff-position-formatted]
    		[staff-bio-formatted]
    		[staff-email-link]
    	</div>
    [/staff_loop]`

    Then adding some basic CSS:

    `/*  div wrapped around each staff member  */
    div.staff-member {
    	width:100%;
    }
    
    /*  [staff-photo]  */
    img.staff-member-photo {
    	float: left;
    	width:25%;
    }
    
    /*  Wrap around staff info  */
    .staff-member-info-wrap {
    	float:right;
    	width:70%;
    }'

    Something like that should get you pointed in the right direction. 🙂

    I’m a css noob so there is probably a better way to do this but I found it to work for what I wanted.
    I wanted pic on the left with name, title, email to the right of the picture and the bio below; finally a line separating each staff member

    You can see it in action here: http://bmworegoncca.com/about/our-board/

    Staff Loop

    [staff_loop]
    	 <img class="staff-member-photo" src="[staff-photo-url]">
    	<div class="staff-member-info-wrap">
    		[staff-name-formatted]
    		[staff-position-formatted]
                    [staff-email-link]
    	</div>
    <div class="staff-member-info-wrap-1">
    	        [staff-bio-formatted]
    	</div>
    [/staff_loop]

    CSS

    /*  div wrapped around each staff member  */
    div.staff-member {
         padding-top: 2em;
         padding-bottom: 1em;
         border-bottom: thick solid black;
         border-bottom: thin solid #303030;
    	width:100%;
    }
    
    /*  [staff-photo]  */
    img.staff-member-photo {
    	float: left;
    	width:15%;
    }
    
    /*  Wrap around staff info  */
    .staff-member-info-wrap {
    	float:right;
    	width:83%;
    }
    .staff-member-info-wrap-1 {
            padding-top: 10em;
    	width:95%;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Demo of it working on a site ?’ is closed to new replies.