Overlays - custom background

Hey Haymkarran,

Sorry for the trouble you're experiencing. In order to determine the behavior you are attempting to accomplish, can you please provide the following information?:

1. Which of our InVision products are you attempting to do this with?
2. Can you please provide an example of the behavior you are trying to achieve?
3. Can you please provide a screenshot or screencast displaying the issue?

Look forward to getting more clarity on the issue at hand so that we can further assist you.

Thanks,

Kayden

Hi Kayden,

This is what I am trying to achieve. Right now, it's a static screen. But when I try to open the overlay, I want the background to be black by 50% opacity automatically.

https://invis.io/YSO885LXUWH#/326926267_Jobs-Details_Page_Pipeline_Hover_1 

I think the rest of my issue was very clearly explained.

As for your questions, I'm using my normal Invision website signin account and using the free prototype.

Regards.

Hey there,

It sounds like you've run into a known limitation, and you need to set the opacity of the destination/overlay screen in the design tool before uploading to InVision.

The background opacity setting for overlays uses the overlay screen’s background color. If no background color is defined or the defined background color is mostly transparent, then the opacity slider won’t have any effect on the opacity of the overlay background. This can be problematic for mobile prototypes where background color can’t be directly set. 

Beth

I am having the same problem here. I would like to be able to overlay a screen over another and have a 50% black tint over the background, instead invision provide a white washed. I need to use this effect on numerous pop-up workflows in my design, I hope this will be implemented soon.

Hi there,

To change the background color for an overlay, you will need to change the background color of the screen you're using as the overlay. Please note that if you're building a mobile prototype, this won't be possible, as the background color option is not available for screens on mobile projects.

Are you attempting to do this with a mobile prototype?

Look forward to hearing from you,

Shaina

Having this same issue/feature request.

I set the background of my Sketch art board to black (and put a white rectangle object behind my overlay content) and still only see a white tint on the background behind my overlay screen.

I also tried changing the background of my InVision project to black but that didn't help either.

Is there something else I'm missing or can overlays only be used over a white semi-opaque background?

Hi Jay,

Sorry to hear that you're running into this issue as well. Can you please confirm if you are attempting to do this on a mobile or desktop prototype?

Unfortunately, if you are looking to do this for a mobile prototype, you won't be able to change the background color for your screens with mobile projects, as the option doesn't exist.

We calculate background colors by taking the pixels that exist in the 4 corners and then average them. In this situation, what you might try is edit you screen in Sketch or Photoshop and add the desired background color to the image itself, and then bring it back into InVision.

Please let me know if this helps.

Thanks,

Shaina

Sorry, yes, I replied to this thread because I am indeed attempting to do this on a desktop prototype.

Thanks for the clarity around how InVision calculates the background color. This indeed fixed this issue! WOW!!

BUT, come on... now my design looks pretty ridiculous and rules out using the "Inspect" mode as I don't want a 1px black square in the corner of my designs. 

Any chance we could make a product suggestion for allowing users to select what color overlay background they would like to use instead of this current method?

Hi Jay,

Glad to hear that fixed your issue! I'm happy to open a ticket on your behalf with our Support team so that we can escalate this feedback up to our Product team. Please look for a message from our Support team soon on this issue.

Best,

Shaina

I have the same problem, i can't change my background in IOS project

I set for overlay artboard background black color but it does not help, i also tried to put black 1x1px shape to all corners, it still does't work!

what else i should to do? it is so annoying !

Hi Alex,

I'm sorry to hear you're having trouble with manipulating the overlay background in each corner of your screen. In order to calculate the background properly for that screen, you'll want to re-upload it through the Project Screens tab page, rather than uploading through the Preview/Build Mode Console. When uploading through the Console, it doesn't perform the same recalculation of the background color.

Can you please try uploading through the Project Screens tab page and let me know if you still have trouble getting the background to change to black?

I look forward to your response so that we can help you get this resolved soon!

Best,

Shaina

I still think Invision should provide a "select overlay colour" as opposed to this very bizarre technique.
But until then, I found a good "hack" for this that seems to work better than having 1 black pixel on the container which looks terrible:

1. Add a black background layer to your "modal" artboard that you wish to use as an overlay.

2. Fill the art board with your modal container background (i.e white)

3. Be sure to disable "Fit layers and points to pixel bounds" under Preferences > Layers in Sketch for the next step.

4. Reduce your modal container background width by 0.1 pixels. Depending on the overlay, you might want to make it on the left, or right, or bottom, or top. If it's in the middle of the screen, pick your whichever you'd prefer.

5. Export.

Extra: Activate "Fit layers and points to pixel bounds" again if you wish.

This will make it so that a black 0.1 pixel gap will appear on the side you selected, which is hardly visible, and it will also turn the overlay colour to black.

In my case, I am using a drawer pop-out that comes in from the Right side, so the black pixel line is on the edge of the screen which is black, so it's invisible.

No ugly 1 pixels on corners.

I tested this myself and it worked. If it doesn't for you, please let me know!

Hi Pedro,

Thank you very much for providing your feedback about this potential feature as well as this workaround for other users! I will open a ticket on your behalf to track your vote for this feature. Please look for a message confirming your vote soon.

Have a wonderful day,

Shaina

In my case as i mention before even 1px shape does not help at all , it is a iOS project

http://prntscr.com/mcggg5 - here i putted four 1px shapes to each corners, it does not work! 

@shaina - I've been battling with Invision support since over 2 years now on this issue. And the team has done nothing but create tickets. I can try my best to share any additional information you need from a users perspective. But please get your development team starting to work on this. It is a MUST HAVE requirement and not just a mere feature.

It's ridiculous but adding black pixel squares ( i did 2x2 pixel square ) on each corner. Has worked for me. Sloppy fix and for a paying customer, this should be addressed.

Hey Rob and Haymkarran,

Thanks for taking a minute to post on Community about your experience using overlays. I'm passing along your feedback to the team now. Feedback like yall's helps us push to improve this experience sooner rather than later.

Beth

Alex,

I'm opening a ticket on your behalf with our Support team so they can dig into this. Keep your eye out for an email from the team. Thanks for bearing with us on this one.

Beth

Hi, I also have problems with this. I can't get any kind of tint or background to show up for overlays at all. I'm having to create modals as full screens and for any other dialogs and overlays just have to tell the user "This will be clearer in the real thing"

It feels like something is missing, I'm sure I got it working once before, but now - nothing. Where is this 'opacity slider' someone mentioned?

Also, why does auto stretch not work for overlay backgrounds?

Hey Aegir,

Can you confirm it's not a mobile project? Can you also send over additional detail on how you're trying to use auto stretch and overlay backgrounds?

As for learning more about the opacity slider, check out these articles:

Using Overlays

What are Overlays and how do I use them?

Adding Interactivity (about 3/4 down the page)

Thanks,
Beth

This feels like using cheatcodes in games. Nostalgic, but not in a good way :D

Hi there,

Are you also interested in adding your vote for this feature? If so, I'm happy to open a ticket on your behalf to track your vote for the ability to allow overlay background color to be configurable independently from the screen background color for desktop prototypes.

Please let me know if this is something you're interested in.

Thanks,

Shaina

@Shaina - I'm interested to know, what can Invision support team do beyond opening tickets? I think only a UX designer can understand that this is a compulsory Must Have requirement by your customers. I'm holding myself from buying your paid subscription plan and enterprise plan until this issue gets fixed.

Also, can you tell us what is the ideal voting threshold number you guys are targeting? Instead of opening tickets individually here, why don't you guys do an open poll and ask all your existing customers on all the social media platforms wherever you guys have an account, additionally send an email to all your customers regarding this issue.

I'm almost on the verge of losing hope of seeing this getting fixed in the near future, if the support team continues to just open tickets.

Shaina, i hope your team can empathise with your customers and truly understand what is an immediate need.

@Shaina - Are you actually serious? This is not a feature. Honestly i must say i am very disappointed with Invision this past year has had no innovation and feels like it is slowly getting worse. I've actually begun to move to Adobe XD and Zeplin. and for now, will be looking for alternatives. As a paid subscriber, that response you just posted proves you are out of sync with your users.

Hi Haymkarran and Rob,

This is currently a limitation in overlays. When customers request new or enhanced functionality, we formally track those requests and present feature/enhancement requests to product managers on a weekly basis. Part of my job as Community Moderator is to speak with product managers weekly and advocate for our Community members. We bring important Community threads to these meetings weekly so that our PMs are aware of what’s being talked about in the Community forum.

To answer Haymkarran's question, we don’t have a specific ideal voting threshold; the product managers prioritize issues based on the scope and impact of the issue.

I strive to connect and empathize with our customers here on Community, and I can assure you that I advocate for the requests here every single week. Hearing from customers like you is what helps make InVision products better each day. Thank you for providing your feedback on this issue.

Have a wonderful day,

Shaina

Alright. Can we expect weekly updates on the product manager's decisions on this particular requirement?

Has the team done any quantitative analysis on this requirement with the help of polls or updates on social media or by personal emails as discussed earlier?

As we dig deeper into the management by PMs, I asked the same question a year back, is this the same PM handing this request?

As we plan taking the enterprise subscription, can the PMs give a tentative date for the requirement fulfilment? We don't need a minor fix. The experience should be seamless and intuitive.

Thanks Shaina for your support.

Hi everyone,

Thank you for your feedback on this. I agree that we can do a better job supporting overlay backgrounds. As Shaina mentioned, we are constantly evaluating what product improvements we can deliver.  Prioritization is guided by our conversations with teams that use the product as well as quantitative insights.  Accordingly, we are currently focused on several areas: improved screen sections and management, tighter integration with Craft, and ease of reusing hotspots / templates.  Expect to see improvements here in the future.

I unfortunately can't give you a timeline for any overlay changes b/c we don't have one.  Nevertheless, as Jay and Pedro pointed out, there are a few ways to accomplish the darkened background.  I have walked through them in this screencast.

I understand this may not be perfect, but I hope it helps and I welcome your feedback!

Colin
Product Manager, Craft & Web Prototyping

Amazed this still never became a feature as its obviously so poorly implemented with the current solution

I'm sorry that we don't have better news for you about this feature at this time, Rob. In the meantime, I will open a ticket on your behalf to track your interest for this feature. Please look for an email soon showing that we've formally tracked your interest. This ticket will also ensure that you will be notified as soon as we have any updates.

If anybody else would like to add their feedback about this potential feature, please fill out a ticket with Support here detailing the feature you are looking for.