I am trying to optimize the look & feel of a scorm content in mobile devices. In some layouts the slide is very small because there are several bars. I am wondering for example if it is possible to have the Player Settings bar overlaying the presentation and disappearing if not used / appearing when tapping on the presentation. Thanks and kind regards.
Hi,
Unfortunately, there is no such option. We will try to implement it in the future. However, you can get more space for content by editing Player Skin layouts:
For example, with the Modern skin:
With player bottom bar, you need to edit the following file:
C:\Program Files\ATOMI\ActivePresenter\templates\html5\skin\Modern\player\layouts\bottombar.html
<div class="ap-toolbar ap-toolbar-bottom" role="toolbar" tabindex="0">
<style>
@media only screen and (max-height: 300px) {
.ap-toolbar-bottom {
padding: 2px;
}
}
</style>
<div class="ap-button ap-tool-restart" data-priority=15 ></div>
<div class="ap-button ap-tool-first" data-priority=4 ></div>
<div class="ap-button ap-tool-prev" data-priority=6></div>
<div class="ap-button ap-tool-play" data-priority=8></div>
<div class="ap-button ap-tool-next" data-priority=7></div>
<div class="ap-button ap-tool-last" data-priority=5></div>
<div class="ap-button ap-tool-speed" data-priority=3></div>
<div class="ap-label ap-tool-position" data-priority=9>00:00</div>
<div class="ap-slider ap-tool-progress" style="flex-grow: 1;" data-priority=14></div>
<div class="ap-label ap-tool-duration" data-priority=9>00:00</div>
<div class="ap-button ap-tool-sound" data-priority=12></div>
<div class="ap-slider ap-tool-volume" data-priority=13></div>
<div class="ap-button ap-tool-cc" data-priority=2></div>
<div class="ap-button ap-tool-about" data-priority=1></div>
<div class="ap-button ap-tool-setting" data-priority=20></div>
<div class="ap-button ap-tool-displaymode" data-priority=1></div>
<div class="ap-button ap-tool-toc" data-priority=10></div>
<div class="ap-button ap-tool-sidebar" data-priority=10></div>
<div class="ap-button ap-tool-exit" data-priority=16 ></div>
</div>
With player top bar:
C:\Program Files\ATOMI\ActivePresenter\templates\html5\skin\Modern\player\layouts\topbar.html
<div class="ap-toolbar-top ap-toolbar" role="toolbar" tabindex="0">
<style>
@media only screen and (max-height: 300px) {
.ap-toolbar-top {
min-height: 0px;
height: 0px;
padding: 0px;
}
.ap-toolbar-top * {
display: none;
}
}
</style>
<div class="ap-tool-projectname"></div>
<div class="ap-button ap-tool-resources" data-has-label="true"></div>
</div>
Hope this helps.
Regards,