WordPress.org

Ready to get started?Download WordPress

Forums

Simple Staff List
[resolved] Demo of it working on a site ? (6 posts)

  1. photoMaldives
    Member
    Posted 1 year ago #

    Hi Brett

    This sounds like an interesting plugin - do you have a demo of it working on a site ? I guess there's quite a time investment setting this up, so it would be great to see it in action first ! :)

    Thanks

    http://wordpress.org/extend/plugins/simple-staff-list/

  2. Brett Shumaker
    Member
    Plugin Author

    Posted 1 year ago #

    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!

  3. photoMaldives
    Member
    Posted 1 year ago #

    thanks for your quick reply - I'll take a look.

  4. mtporter
    Member
    Posted 1 year ago #

    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?

  5. Brett Shumaker
    Member
    Plugin Author

    Posted 12 months ago #

    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. :)

  6. dahows
    Member
    Posted 11 months ago #

    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%;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.