Node Image Shapes?

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
hromain
Posts: 7
Joined: Wed Apr 11, 2018 12:12 pm

Node Image Shapes?

Post by hromain » Sat Apr 14, 2018 3:55 pm

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.

mbb
Posts: 157
Joined: Mon Oct 19, 2009 11:42 pm

Re: Node Image Shapes?

Post by mbb » Sun Apr 15, 2018 1:28 pm

put the following into the "CSS Styles:" field in the Node Image Advanced Properties:

overflow: hidden; border-radius: 50%;

hromain
Posts: 7
Joined: Wed Apr 11, 2018 12:12 pm

Re: Node Image Shapes?

Post by hromain » Sun Apr 15, 2018 5:36 pm

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:
Attachments
hotspot.png
hotspot.png (9.33 KiB) Viewed 388 times

mbb
Posts: 157
Joined: Mon Oct 19, 2009 11:42 pm

Re: Node Image Shapes?

Post by mbb » Sun Apr 15, 2018 6:33 pm

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"

hromain
Posts: 7
Joined: Wed Apr 11, 2018 12:12 pm

Re: Node Image Shapes?

Post by hromain » Sun Apr 15, 2018 8:34 pm

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.
Attachments
Screen Shot 2018-04-15 at 1.00.22 PM.png
Screen Shot 2018-04-15 at 1.00.22 PM.png (269.5 KiB) Viewed 382 times

User avatar
Hopki
Gnome
Posts: 8454
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Node Image Shapes?

Post by Hopki » Sun Apr 15, 2018 9:00 pm

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
Attachments
CircleTooltip.zip
(29.33 KiB) Downloaded 35 times

hromain
Posts: 7
Joined: Wed Apr 11, 2018 12:12 pm

Re: Node Image Shapes?

Post by hromain » Sun Apr 15, 2018 9:34 pm

Perfect. Thank you!

User avatar
Tony
Posts: 493
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Node Image Shapes?

Post by Tony » Mon Apr 16, 2018 1:49 am

Hi Hopki,

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

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
Hopki
Gnome
Posts: 8454
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Node Image Shapes?

Post by Hopki » Wed Apr 25, 2018 4:26 pm

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
Attachments
CircleTooltip.zip
(31.98 KiB) Downloaded 38 times

Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests