Information to the right of the staff picture

  • 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 https://www.edenautism.org/staff-directory (it will be changing as I continue to try and figure this out.

    https://www.ads-software.com/plugins/simple-staff-list/

Viewing 3 replies - 1 through 3 (of 3 total)

  • 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

    Lorifellow

    (@lorifellow)

    Colin – I don’t quite understand the layout of your answer. Do you mean we should insert the “CSS:” portion into the lines of the “Staff Loop” portion? If so I tried and nothing changed. Should I assume I entered it in the wrong places?

    The CSS portion goes in the box below where it says: “Add your custom CSS below…”.

    Also the above is missing one line in the CSS:

    .clearboth {clear: both;}

    I found that the use of the “h3” tags was a bit too much; it made the RHS of the entry too big. Instead of:

    <li><h3>[staff-name]<br>[staff-position]</h3></li>
    I used:

    <li><strong>[staff-name]</strong><br>[staff-position]</li>
    Other than that, very useful thank you Colin

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Information to the right of the staff picture’ is closed to new replies.