Okay
  Public Ticket #2223478
Styling of Team Member images
Closed

Comments

  •  2
    steenvreter started the conversation
    November 22, 2019 at 11:26pm

    Hi,

    How can I style the images used in the team member element? I would like to make the image circular. I've used the code below on a single image and it worked fine, but does not have effect on the team member images. 

    {
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
    }


  •  9,174
    Tahir replied
    November 23, 2019 at 9:48am

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .full-width-section .team-member img {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
}

    Thanks

    ThemeNectar Support Team 

  •  2
    steenvreter replied
    November 23, 2019 at 11:31am

    Hmm. there is a red cross, but it is on the last line. 

    Any way, the CSS code does no do anything. No result. I guess I'll have to make the images round. 

    thanks anyway.

  •  9,174
    Tahir replied
    November 23, 2019 at 11:32am

    Hey Again,

    There is a missing ending curly brace : http://prntscr.com/q0ynfk . 

    Best

    ThemeNectar Support Team 

  •  2
    steenvreter replied
    November 25, 2019 at 1:49pm

    Hi Tahir,


    OK, I fixed the missing curly brace. But the result is the same: no round images

    Any thoughts or other suggestions?

    Aram



    /* om het shopping cart symbool aan te passen van tasje naar wagentje */
    .cart-icon-wrap .icon-salient-cart {
     font-family: FontAwesome!important;
    }

    .cart-icon-wrap .icon-salient-cart:before {
    content: "\f07a"!important;
    }
    /* om de rij om te wisselen op mobile */
    @media only screen and (max-width: 1000px) {
    .mobile-row-reverse > .span_12 {
     flex-direction: column-reverse;
    }
    }
    /* om team member portretten rond te maken */
    .full-width-section .team-member img {
        border-radius: 50% !important;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
    }


  •  3,140
    Andrew replied
    November 26, 2019 at 9:21am

    Hi steenvreter,

    Could you try the following CSS:

    .full-width-section .team-member img {
    border:black solid 4px;
    border-radius: 50%;
    width:250px !important;
    height:250px;
}

    You can remove the border: part to remove the black border. We put it to show the circle as its not visible.

    Adjust the 250px on the height and width properties to what you need. But make sure they are the same for both.

    Hope this helps. 

  •  9,174
    Tahir replied
    November 26, 2019 at 10:45am

    Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.

    Thanks 

    ThemeNectar Support Team