Page 1 of 1

Node Image Shapes?

Posted: Sat Apr 14, 2018 3:55 pm
by hromain
Hi,

Is it possible to edit the shape of node images? I'd like to make mine circular but don't see an option for adjusting the radius like there is with rectangles. I tried adding a "border-radius" property in the CSS, but it only makes a circle behind the node image and doesn't affect the shape of the image itself.

Re: Node Image Shapes?

Posted: Sun Apr 15, 2018 1:28 pm
by mbb
put the following into the "CSS Styles:" field in the Node Image Advanced Properties:

overflow: hidden; border-radius: 50%;

Re: Node Image Shapes?

Posted: Sun Apr 15, 2018 5:36 pm
by hromain
That's just what I was looking for, but here's one quick follow up: now, the tooltip is overflowing the rounded border of the node image. Is there a way to make it match the border of the node image without covering the image completely? I want to keep it looking like this image:

Re: Node Image Shapes?

Posted: Sun Apr 15, 2018 6:33 pm
by mbb
Sorry, I have no idea what you are talking about now.

Do not know what you mean by "tooltip is overflowing the rounded border of the node image"

Re: Node Image Shapes?

Posted: Sun Apr 15, 2018 8:34 pm
by hromain
Apologies for the confusion. I've attached a screenshot to illustrate. Ideally, I'd like the tooltip background to end at the circular border of the node image instead of how it sits now.

Re: Node Image Shapes?

Posted: Sun Apr 15, 2018 9:00 pm
by Hopki
Hi,
In V5 or 6 use a masking container with the following CSS.

CSS for the container that is set to making::

Code: Select all

overflow: hidden; border-radius: 50%; border-style: solid; border-width: 2px
Working project attached.

Regards,
Hopki

Re: Node Image Shapes?

Posted: Sun Apr 15, 2018 9:34 pm
by hromain
Perfect. Thank you!

Re: Node Image Shapes?

Posted: Mon Apr 16, 2018 1:49 am
by Tony
Hi Hopki,

Thanks for the skin. Nice addition to my collection of Hopki inspired skins :D

cheers,

Tony

Re: Node Image Shapes?

Posted: Wed Apr 25, 2018 4:26 pm
by Hopki
And just because I can :D
Here its using a timer and animated rectangles as well as fade in the preview and tooltip text.
Regards,
Hopki