Rafick 3 Posted March 21, 2019 Share Posted March 21, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
Solution Happy2Play 8281 Posted March 21, 2019 Solution Share Posted March 21, 2019 (edited) 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 1 Link to comment Share on other sites More sharing options...
Rafick 3 Posted March 21, 2019 Author Share Posted March 21, 2019 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 1 Link to comment Share on other sites More sharing options...
Rafick 3 Posted March 27, 2020 Author Share Posted March 27, 2020 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; } Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted March 27, 2020 Share Posted March 27, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
Rafick 3 Posted March 28, 2020 Author Share Posted March 28, 2020 that is perfect, Thank you Link to comment Share on other sites More sharing options...
Moisés Oliveira 0 Posted March 31, 2020 Share Posted March 31, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
CyberPoison 32 Posted March 4, 2021 Share Posted March 4, 2021 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; } Link to comment Share on other sites More sharing options...
Luke 37057 Posted March 4, 2021 Share Posted March 4, 2021 Yea you're going to get heads cut off if you try and do that. Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted March 5, 2021 Share Posted March 5, 2021 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%; } Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted March 5, 2021 Share Posted March 5, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now