WordPress.org

Support

Support » Plugins and Hacks » CSS to change the Staff List

CSS to change the Staff List

  • tlfragosor
    Member

    @tlfragosor

    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/

Viewing 3 replies - 1 through 3 (of 3 total)
  • tlfragosor
    Member

    @tlfragosor

    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?

    tlfragosor
    Member

    @tlfragosor

    Done!

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

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS to change the Staff List’ is closed to new replies.