When I import a logo into the player, Storyline adds a thin gray border around it. In this case, I think it would look much better without the border. Is there a way to disable it or make it transparent, in the Player Properties or elsewhere?
See the example below. The thin gray border outlines the imported image.
When you add a logo to your sidebar, Storyline includes a border and slight shadow on it. If you want to change or remove either of these, no problem—you can customize their colors (or make them transparent) by modifying your player's color scheme.
Here's a job aid to help you quickly identify which parameters in Storyline's player properties are used to control the color of each item on your course player.
Right - I've used that job aid in the past. It has instructions for changing certain aspects of the logo panel, including the shadow and the background color (logo>shadow and logo>bg respectively). The job aid does not specify - and I cannot find it in the advanced color settings in the Player Properties - how to remove the border around the image.
I've drawn over the border in red to clarify what I'm talking about.
This actually just came up the other day, and unfortunately when the background of your logo is the same color as the background of your player, it never totally disappears.
Would have to be a feature request at this time, I'm sorry to say.
The border is also visible in the logo preview in the Player Properties -
Looking at the HTML5 output, the border is included in the image itself, suggesting that Storyline applies the border inside the image after it is imported. (I have confirmed that the border is not present in the original image.)
Is there a fix for this coming down the pike? I work with loads of images with white backgrounds. Saving as a .png does not work for me. Adam's fix was the only thing that worked, but this is a multi-step process for each image in Photoshop.
Since this is an older thread, I'd like to start fresh and hear more about what you're looking to do.
Are you using images with white backgrounds in the logo area of the Storyline player? If so, are you seeing a gray border around the image in the logo area?
Thanks for your reply. It’s not a logo issue. These are images of products on white backgrounds, modified in Photoshop by our marketing department and saved as .jpg. There is no gray border around the images. However, when I insert them or paste them into a Storyline 360 slide with a white background, a thin gray border appears around the image. Confusingly, sometimes the gray border disappears in Preview mode; sometimes it doesn’t. The only full-proof method I’ve found is opening the image in Photoshop, deleting the background, increasing the Canvas size by a couple of pixels, saving as a .png, and reinserting into the slide. It goes without stating that this is tedious work and hence greatly prolongs my process. I hope this helps!
Thanks for following up, Alyssa. I used the "Upload file" link. Just for anyone on the thread, converting the file from a .jpg to a .png didn't resolve the issue for me. Thanks again for your help!
I'm using Adam Skelton's workaround, adding a transparent border to the images. It's tedious when working with a lot of images with white backgrounds, but it works.
I took a look at the case you worked on with Alyssa where she wasn't able to replicate that issue with your images. Are you continuing to see the behavior?
Shawn, are you running into this with images on a slide or in the player logo? I have seen an issue with a gray border around an image on the slide, if that image had the "Zoom picture" enabled. That's something our team is still looking into, so if it matches your setup I can keep you posted here.
37 Replies
Hey Lucas,
When you add a logo to your sidebar, Storyline includes a border and slight shadow on it. If you want to change or remove either of these, no problem—you can customize their colors (or make them transparent) by modifying your player's color scheme.
Here's a job aid to help you quickly identify which parameters in Storyline's player properties are used to control the color of each item on your course player.
Right - I've used that job aid in the past. It has instructions for changing certain aspects of the logo panel, including the shadow and the background color (logo>shadow and logo>bg respectively). The job aid does not specify - and I cannot find it in the advanced color settings in the Player Properties - how to remove the border around the image.
I've drawn over the border in red to clarify what I'm talking about.
Hey, thanks for clarifying, Lucas
This actually just came up the other day, and unfortunately when the background of your logo is the same color as the background of your player, it never totally disappears.
Would have to be a feature request at this time, I'm sorry to say.
The border is also visible in the logo preview in the Player Properties -
Looking at the HTML5 output, the border is included in the image itself, suggesting that Storyline applies the border inside the image after it is imported. (I have confirmed that the border is not present in the original image.)
I had the same issue when I tried to add a logo that was a JPEG. I converted it to a .png file and the grey line goes away.
Nice information, Nigel!
Thanks for sharing this :)
If you put a 1px transparent border around the image this solves the problem too.
Hi Adam and welcome to E-Learning Heroes
Thanks for sharing your solution as well.
Thanks Nigel!
Glad that it was able to help you out Sameer!
Adams solution worked for me!
Thanks!
/J
Thanks for sharing Jonathan
Is there a fix for this coming down the pike? I work with loads of images with white backgrounds. Saving as a .png does not work for me. Adam's fix was the only thing that worked, but this is a multi-step process for each image in Photoshop.
Hi there Laurie,
Since this is an older thread, I'd like to start fresh and hear more about what you're looking to do.
Are you using images with white backgrounds in the logo area of the Storyline player? If so, are you seeing a gray border around the image in the logo area?
Hi Alyssa,
Thanks for your reply. It’s not a logo issue. These are images of products on white backgrounds, modified in Photoshop by our marketing department and saved as .jpg. There is no gray border around the images. However, when I insert them or paste them into a Storyline 360 slide with a white background, a thin gray border appears around the image. Confusingly, sometimes the gray border disappears in Preview mode; sometimes it doesn’t. The only full-proof method I’ve found is opening the image in Photoshop, deleting the background, increasing the Canvas size by a couple of pixels, saving as a .png, and reinserting into the slide. It goes without stating that this is tedious work and hence greatly prolongs my process. I hope this helps!
Ah, thanks for clarifying that, Laurie!
Do you notice a difference if you save the file as PNG in Photoshop rather than JPG?
Also, would you mind sharing one of those JPG files with me? I'd like to check it in Storyline 360. If you'd rather keep it private, click here.
Thanks for following up, Alyssa. I used the "Upload file" link. Just for anyone on the thread, converting the file from a .jpg to a .png didn't resolve the issue for me. Thanks again for your help!
Thanks, Laurie! I've got your file now! I'll give it a test and reply to you via your case soon. 🙂
I'm also noticing gray borders around jpg's with white backgrounds is there a fix or workaround?
I'm using Adam Skelton's workaround, adding a transparent border to the images. It's tedious when working with a lot of images with white backgrounds, but it works.
We have a lot of images that we would need to do this with, was hoping Articulate would have a fix in place.
I hear you, Shawn. Almost all the images I work with have white backgrounds. Here's hoping the Articulate team figures out a fix sooner than later!
Hi Laurie,
I took a look at the case you worked on with Alyssa where she wasn't able to replicate that issue with your images. Are you continuing to see the behavior?
Shawn, are you running into this with images on a slide or in the player logo? I have seen an issue with a gray border around an image on the slide, if that image had the "Zoom picture" enabled. That's something our team is still looking into, so if it matches your setup I can keep you posted here.
Hi Ashley,
I'm still having the issue, but it's inconsistent, so it makes it hard to know what's causing the grey border to appear.
Hi Ashley,
This is with images on slides, zoom picture is not enabled on the images I'm noticing the border on.