cast and images of the circular team

[Rafick 3]

Hello, can anyone help?

I would like to leave the cast and team images circular, I tried this css but it was not successful, I am a layman, thank you in advance

   

 IMG: https://uploaddeimagens.com.br/imagens/cats-jpg-04665682-f6ed-493d-813d-f831c8d783d3

 

 

.card.overflowPortraitCard.personCard {

  border: 2px solid  #3333cc;

  border-radius: 50%;

  overflow: hidden;

  z-index:5;

  background-position: center;

  background-color: transparent;

  width: 100px;

  height: 100px;

}

Edited March 21, 2019 by Rafick

[Happy2Play 9441]

Hello, can anyone help?

I would like to leave the cast and team images circular, I tried this css but it was not successful, I am a layman, thank you in advance

 

   

 IMG: https://uploaddeimagens.com.br/imagens/cats-jpg-04665682-f6ed-493d-813d-f831c8d783d3

 

 

.card.overflowPortraitCard.personCard {

  border: 2px solid  #3333cc;

  border-radius: 50%;

  overflow: hidden;

  z-index:5;

  background-position: center;

  background-color: transparent;

  width: 100px;

  height: 100px;

}

 

Something like this

div.personCard {width: auto; }
 
.personCard .cardScalable {
    border: 2px solid #3333cc;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
}
#castContent div.cardText {display: none; }

Edited March 21, 2019 by Happy2Play

[Rafick 3]

 

Something like this

div.personCard {width: auto; }
 
.personCard .cardScalable {
    border: 2px solid #3333cc;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
}
#castContent div.cardText {display: none; }

yes , funciona perfeito obrigado 

[Rafick 3]

This code broke in version 4.4.0.4 ,aguem can help

 

 

Tried

div.cardOverlayContainer.itemAction {width: auto; }
.cardOverlayContainer.itemAction  {
    border: 2px solid #B22222;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
}

[Happy2Play 9441]

 

This code broke in version 4.4.0.4 ,aguem can help

 

 

Tried

div.cardOverlayContainer.itemAction {width: auto; }
.cardOverlayContainer.itemAction  {
    border: 2px solid #B22222;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
}

That is just the card overlay (hover)

 

Something like this

div.peopleSection .portraitCard {width: auto;}
div.peopleSection .cardBox {
    border: 2px solid #3333cc;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
}

or this

div.peopleSection .portraitCard {width: auto;}

div.peopleSection .cardPadder-portrait {
    border: 2px solid #3333cc;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
    padding-bottom: 0;
}

div.peopleSection .cardText {display: none;}

Edited March 27, 2020 by Happy2Play

[Rafick 3]

 that is perfect, Thank you

[Moisés Oliveira 0]

Ficou muito Bommm 

Versão 4.4.0.40

 

 

 

div . peopleSection . portraitCard { width : auto ;}

div . peopleSection . cardPadder - retrato {
    borda : 2px sólido # 3333cc;     beira - raio : 50 %;     estouro : oculto ;     largura : 100px ;     altura : 100px ;     estofamento - parte inferior : 0 ; }




 

div . peopleSection . cardText { display : none ;}

 

Edited March 31, 2020 by moisesalvesco

[CyberPoison 33]

On 3/27/2020 at 11:47 PM, Happy2Play said:

That is just the card overlay (hover)

 

Something like this

div.peopleSection .portraitCard {width: auto;}
div.peopleSection .cardBox {
    border: 2px solid #3333cc;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
}

or this

div.peopleSection .portraitCard {width: auto;}

div.peopleSection .cardPadder-portrait {
    border: 2px solid #3333cc;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
    padding-bottom: 0;
}

div.peopleSection .cardText {display: none;}

 

On 2/26/2021 at 8:29 PM, Happy2Play said:

See this topic

https://emby.media/community/index.php?/topic/71640-cast-and-images-of-the-circular-team/&do=findComment&comment=862896

 

 

There is many issues like no head showing properly and text on cardcrew i used this code
 

Quote

div.peopleSection .portraitCard {width: auto;}
div.peopleSection .cardBox {
    border: 2px solid #3333cc;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
}
 

 

[Luke 40077]

Yea you're going to get heads cut off if you try and do that.

[Happy2Play 9441]

59 minutes ago, CyberPoison said:

 

 

There is many issues like no head showing properly and text on cardcrew i used this code
 

 

Because that method uses .cardbox so no text, as for image position nothing can be done beside trying another image as all images are not create equally.

Have to use a larger height and width but if you want name/role, also adjusted the image cover as 100% 100% was to distorted for me. 

div.peopleSection .cardPadder-portrait {
    border: 2px solid #3333cc;
    border-radius: 50%;
    overflow: hidden;
    width: 150px;
    height: 150px;
    padding-bottom: 0;
}

div.peopleSection .coveredImage {
    -webkit-background-size: 100%;
    background-size: 100%;

}

 

[Happy2Play 9441]

Or something like this

div.peopleSection .portraitCard {width: auto;}

div.peopleSection .cardPadder-portrait {
    border: 2px solid #3333cc;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
    padding-bottom: 0;
}

div.peopleSection .coveredImage {
    background-size: cover;
    background-position: center;
}

div.peopleSection .cardText {display: none;}

Or with name/role text, textcard adjusts spacing.  To me just doesn't look right but here is with width/height 100px.

div.peopleSection .cardPadder-portrait {
    border: 2px solid #3333cc;
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
    padding-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

div.peopleSection .coveredImage {
    background-size: cover;
    background-position: center;
}

Note changing background-position from center to top will have different affects but not all images are created equal.

Edited March 5, 2021 by Happy2Play