WordPress.org

Ready to get started?Download WordPress

Forums

Simple Staff List
CSS to change the Staff List (4 posts)

  1. tlfragosor
    Member
    Posted 11 months ago #

    Hello everyone,

    I'm using Simple Staff List for a client, and he wants it to look like this:

    http://www.ciudadanointeligente.org/quienes-somos/

    I'm changing the Staff Loop Template like this:

    [staff_loop]
    
    <div class="global">
    <div class="caja">
    	<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>
    </div>
    </div>
    
    [/staff_loop]

    And the Staff Page CSS like this:

    div.main_inner {
    display: table;
    }
    
    div.staff-member {
    float:left;/*fix for buggy browsers*/
    display:table-column;
    width:350px;
    height:320px;
    text-align: left;
    vertical-align: middle;
    padding-bottom: 40px;
    }
    
    div.caja{
    padding:10px;
    background-color: #EBE8E3;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    height:320px;
    margin-left:20px;
    margin-bottom:40px;
    }
    
    div.global{
    margin-left:auto;
    margin-right:auto;
    }
    
    .main-surround h3 {
    color: #8BC0CC;
    }
    
    a {
    color: #8BC0CC;
    }
    
    .img {
    border-image: url(http://www.ciudadanointeligente.org/wp-content/themes/ciudadanoi/images/border_img.png);
    }

    The result is this:

    http://clientescitrus.com/webs/tusantacruz/junta-directiva/

    I want to have the image at the left (maybe witha float left) Ant Name and position, so as social buttons and email to the right.
    It would be great if i can add an imagee border to the photo. I've tried with image-border... with no success.

    Thank you very much for your help.

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

  2. tlfragosor
    Member
    Posted 11 months ago #

    Reading a little bit around the forum, i've tweak it to have the image to the left and the content to the right:

    http://clientescitrus.com/webs/tusantacruz/junta-directiva/

    New Staff Loop Template:

    [staff_loop]
    
    <div class="global">
    	<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>
    </div>
    
    [/staff_loop]

    Staff Page CSS:

    div.main_inner {
    display: table;
    }
    
    div.staff-member {
    float:left;/*fix for buggy browsers*/
    display:table-column;
    width: 500px;
    height:180px;
    text-align: left;
    vertical-align: middle;
    padding-bottom: 40px;
    }
    
    div.global{
    margin-left:auto;
    margin-right:auto;
    }
    
    .main-surround h3 {
    color: #8BC0CC;
    }
    
    a {
    color: #8BC0CC;
    }
    
    .img {
    border-image: url(http://www.ciudadanointeligente.org/wp-content/themes/ciudadanoi/images/border_img.png);
    }
    
    img.staff-member-photo {
    float: left;
    position: absolute;
    }
    
    /*  Wrap around staff info  */
    .staff-member-info-wrap {
    position: relative;
    float: right;
    background-color: #EBE8E3;
    height:180px;
    margin-bottom:40px;
    }
    
    .staff-member-name, .staff-member-position {
    clear:none;
    }

    Now I'm working on the final design (margins, paddings, ...) and the border-image.

    Any help?

  3. tlfragosor
    Member
    Posted 11 months ago #

    Done!

    After a lot of work, finally got the same taste!

  4. soulwake
    Member
    Posted 10 months ago #

    Can you provide the finished work? I'm trying to figure out something similar to this as well. Thanks!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.