8
Views
7
Comments
Solved
[Mobile] Changing clipped area color in block
Question

Hi all,

I have photo in a block that's been clipped with -webkit-clip-path.  The clip works, but the clipped area is now black on the original screen.  See below.

How do you change the black area to white?  I've tried a few CSS variations, in the block and on the original screen with no luck.  Any help appreciated.

(mobile application)

Thanks,

Brad

mvp_badge
MVP
Rank: #76
Solution

Hi Brad,

In addition to the previous replies, just want to include that - For such use-case, we do have a predefined style class called img-circle, which you can refer to in the Image widget Style Classes property as shown below.

Kind regards,

Benjith Sam

Hy Brad, 

I suggest creating a css class and applying it to your image


Rank: #31093

Thanks Alexandre.  The main screen is black. See below. 


Main Screen:


Within Block - Image being clipped:



mvp_badge
MVP
Rank: #76
Solution

Hi Brad,

In addition to the previous replies, just want to include that - For such use-case, we do have a predefined style class called img-circle, which you can refer to in the Image widget Style Classes property as shown below.

Kind regards,

Benjith Sam

Rank: #31093

Thanks Benjith.  Do you know how to adjust the radius?

I tried:

img.img-circle {
    border-radius: 70%;
}


Thanks,

Brad

Rank: #31093

Okay. Got it.  Had to combine img-circle and -webkit-clip-path to clip in the phone theme custom CSS. 

.img-circle{
    -webkit-clip-path: circle(115px);
}

Then in the main page, override with:

.img-circle{
    -webkit-clip-path: circle(35px) !important;
}