WordPress.org

Ready to get started?Download WordPress

Forums

Simple Staff List
Information to the right of the staff picture (2 posts)

  1. john.zahorsky
    Member
    Posted 3 months ago #

    I can get one line of information next to the staff picture. Then code I am using is as follows.

    [staff_loop]
    <p>
    <img class="textmiddle" src="[staff-photo-url]" alt="[staff-name] : [staff-position]">
    <font size="4"> [staff-name]</font>
    [staff-position]
    [staff-phone]
    [staff-email-link] </br>
    <div class="staff-member-info-wrap">
    </div> </p>
    [/staff_loop]

    With the following added to css
    CSS: .texttop {vertical-align:top;}
    .textmiddle {vertical-align:middle;}

    What I get is Name, position, and phone on one line next to the picture and the email below. I would like Name, position, and phone as three separate lines next to the picture. Any thoughts?

    the page is http://www.edenautism.org/staff-directory (it will be changing as I continue to try and figure this out.

    https://wordpress.org/plugins/simple-staff-list/

  2. cjc1867
    Member
    Posted 3 months ago #

    Hi
    I used the following code:

    [staff_loop]
    	<img class="staff-member-photo leftfloat rightpadding" src="[staff-photo-url]" alt="[staff-name] : [staff-position]">
            <ul class="cwl-staff leftfloat">
                           <li><h3>[staff-name]<br>[staff-position]</h3></li>
                           <li>Phone:[staff-phone]</li>
    		       <li>Email: [staff-email-link]</li>
            </ul>
    	<div class="staff-member-info-wrap clearboth">
    		<ul class="cwl-staff">
    		       <li>[staff-bio]</li>
                   </ul>
    	</div>
            <hr>
    [/staff_loop]

    CSS:
    .cwl-staff {list-style: none; margin-left: 0 !important;}
    .cwl-staff li {margin-top: 5px; margin-bottom: 5px;}
    .leftfloat {float: left;}
    .rightpadding {margin-right: 30px !important; margin-bottom: 10px;}

    Hopefully I haven't missed anything out....

    Colin

Reply

You must log in to post.

About this Plugin

About this Topic