Node Image Shapes?

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

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: 215
Joined: Mon Oct 19, 2009 11:42 pm

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: 30
Joined: Wed Apr 11, 2018 12:12 pm

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 1555 times
mbb
Posts: 215
Joined: Mon Oct 19, 2009 11:42 pm

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: 30
Joined: Wed Apr 11, 2018 12:12 pm

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 1549 times
User avatar
Hopki
Gnome
Posts: 9937
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

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 60 times
hromain
Posts: 30
Joined: Wed Apr 11, 2018 12:12 pm

Sun Apr 15, 2018 9:34 pm

Perfect. Thank you!
User avatar
Tony
Posts: 889
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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: 9937
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

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 67 times
Post Reply