Currently we are using a story size setup of 1334 x 750 (at our LMS consultant's recommendation).
Is it possible for an edge to edge screen experience in Storyline when using the modern player style similar to Rise? We ask this as there 'appears' quite a large border block at left and right of screen. This is real estate that could be used for content.
Storyline slides will fill the screen (as much as possible) without stretching or skewing the slide content. If you see some gray space on the left and right side of the slides, that means the browser window is wider than the slide itself.
Instead of stretching the slide (which would skew your slide design), the Modern Player adds gray space to fill the browser window.
Also, keep in mind that the extra gray space you see will change depending on the size of the screen you use to view the course.
Let me know if you have other questions about that!
The 'close menu.png' attachment reflects my question. I'm wondering if edge to edge is possible similar to the 'Australian towards zero.png' example I've attached.
We are using a story size setup of 1334 x 750 (at our LMS consultant's recommendation). Perhaps this recommendation is holding us back ?
It looks like you're viewing the content in Storyline Preview. Have you tried publishing the content and hosting it on a web server or LMS?
If the dimensions of the slide are different than the dimensions of the browser window, you'll see some extra player space around the slide. Because each learner's screen size is different, your best bet is to pick a slide size that would fit most widescreen monitors.
Hi Alyssa, I have the same question as Nicole, and I don't think it's been fully answered here. I am viewing my content natively in the web browser, and at best there is a white border around each slide on all slides. Now, it's not a huge border, but it definitely breaks the 'edge-to-edge' look that I would like to design for.
Because these designs are responsive, I understand that in many cases users will not actually experience the course in exactly the format I desire. But the issue here isn't that it's only sometimes edge-to-edge, but rather that it's never edge-to-edge.
I'll illustrate what I'm describing here. It looks like somewhere in the CSS a margin of 15px is added to all sides of the:
Does anyone know of a way to allow for truly edge-to-edge content? Hopefully without needing to dig too deep into the CSS and creating a separate style to modify the Storyline output.
Hi Nicole, depending on what we hear back from the Articulate team, I may go ahead and start digging deeper. I imagine this is something that can be accomplished by inserting some custom CSS into the output web folder.
Hey folks! You'll see 20 pixels of padding around the slide to leave room for player elements like the previous and next buttons (same as the Classic player). Turn off Menu and Controls and disable navigation buttons for an edge-to-edge design.
After discussion with our LMS team, an edge to edge experience is available if we customize our LMS platform and/or open the scorm content in a new browser tab.
The other option is to establish browser settings via Storyline. If we choose this we need to be sure to use SVG based images - Nicole
I've just been informed for a an almost edge to edge experience without customizing the LMS, turn off all navigation whilst using the Classic player is also an option.
I used the standard slide size, which is 720 x 540. As long as the web browser window is 720 pixels wide or smaller, the slide will appear edge-to-edge in the browser.
If you use a wider slide size, like 1200 pixels, then that would allow an edge-to-edge design in a wider browser window.
Slide size of 1210 x 555 gives us an edge-to-edge w just a small border (attached). Of course this look changes for tablet or smartphone vert/horiz, all of which which show some dead space.
17 Replies
Hi Nicole,
Can you post a screenshot of a large border block at the left and right of the screen?
Hi Nicole!
Storyline slides will fill the screen (as much as possible) without stretching or skewing the slide content. If you see some gray space on the left and right side of the slides, that means the browser window is wider than the slide itself.
Instead of stretching the slide (which would skew your slide design), the Modern Player adds gray space to fill the browser window.
Also, keep in mind that the extra gray space you see will change depending on the size of the screen you use to view the course.
Let me know if you have other questions about that!
Hi Daniel,
The 'close menu.png' attachment reflects my question. I'm wondering if edge to edge is possible similar to the 'Australian towards zero.png' example I've attached.
We are using a story size setup of 1334 x 750 (at our LMS consultant's recommendation). Perhaps this recommendation is holding us back ?
Thank you very much...
Hi Nicole!
It looks like you're viewing the content in Storyline Preview. Have you tried publishing the content and hosting it on a web server or LMS?
If the dimensions of the slide are different than the dimensions of the browser window, you'll see some extra player space around the slide. Because each learner's screen size is different, your best bet is to pick a slide size that would fit most widescreen monitors.
Thank you for your prompt reply @Alyssa
Nicole
Hi Alyssa, I have the same question as Nicole, and I don't think it's been fully answered here. I am viewing my content natively in the web browser, and at best there is a white border around each slide on all slides. Now, it's not a huge border, but it definitely breaks the 'edge-to-edge' look that I would like to design for.
Because these designs are responsive, I understand that in many cases users will not actually experience the course in exactly the format I desire. But the issue here isn't that it's only sometimes edge-to-edge, but rather that it's never edge-to-edge.
I'll illustrate what I'm describing here. It looks like somewhere in the CSS a margin of 15px is added to all sides of the:
<div class="area-primary cs-area-primary" data-reactid=".0.0.5">I'll show you what I mean:
Does anyone know of a way to allow for truly edge-to-edge content? Hopefully without needing to dig too deep into the CSS and creating a separate style to modify the Storyline output.
Thank you @Ephraim. I'm still holding out for an solution/how to achieve this. It must be possible. I'm determined to see this through.
Nicole
Any input friends?
Hi Nicole, depending on what we hear back from the Articulate team, I may go ahead and start digging deeper. I imagine this is something that can be accomplished by inserting some custom CSS into the output web folder.
Thank you Ephraim,
Please keep me in the loop with your CSS dig. If we discover anything Ill let you know.
Hey folks! You'll see 20 pixels of padding around the slide to leave room for player elements like the previous and next buttons (same as the Classic player). Turn off Menu and Controls and disable navigation buttons for an edge-to-edge design.
Good morning.
After discussion with our LMS team, an edge to edge experience is available if we customize our LMS platform and/or open the scorm content in a new browser tab.
The other option is to establish browser settings via Storyline. If we choose this we need to be sure to use SVG based images - Nicole
Thank you Alyssa we will try this..
Hi Alyssa - was is the story size setup height and width you used for this example please?
Many thanks
I've just been informed for a an almost edge to edge experience without customizing the LMS, turn off all navigation whilst using the Classic player is also an option.
Regards,
Nicole
Hi Nicole!
I used the standard slide size, which is 720 x 540. As long as the web browser window is 720 pixels wide or smaller, the slide will appear edge-to-edge in the browser.
If you use a wider slide size, like 1200 pixels, then that would allow an edge-to-edge design in a wider browser window.
Slide size of 1210 x 555 gives us an edge-to-edge w just a small border (attached). Of course this look changes for tablet or smartphone vert/horiz, all of which which show some dead space.
This discussion is closed. You can start a new discussion or contact Articulate Support.