How to reposition audio player on exported HTML?

Reading App Builder
1

Is there a setting within Scripture App Builder to reposition the audio player on exported HTML from the bottom of webpage to the top of the webpage?

1 Like
2

The audio player positioning is controlled by sab-styleshee.css:

#toolbar-top {
    background: #000000;
    border-bottom: 1px solid #DDD;
    -moz-box-shadow: 0 5px 5px -5px #CCC;
    -webkit-box-shadow: 0 5px 5px -5px #CCC;
    box-shadow: 0 5px 5px -5px #CCC;
    top: 0px;
    width: 100%;
    position: fixed;
    z-index: 2000;
    text-align: center;
}

#toolbar-bottom {
    background: #FFFFFF;
    border-top: 1px solid #DDD;
    -moz-box-shadow: 0 -5px 5px -5px #CCC;
    -webkit-box-shadow: 0 -5px 5px -5px #CCC;
    box-shadow: 0 -5px 5px -5px #CCC;
    bottom: 0px;
    width: 100%;
    position: fixed;
    text-align: center;
}

I can move the audio player from the bottom to the top and the chapters control from the top to the bottom if I change “bottom: 0px” in #toolbar-bottom to read “top: 0px” and “top: 0px” in #toolbar-top to read “bottom: 0px”.

Does SAB allow me to make this type of change within the app or do I have to physically change the stylesheet every time I export the HTML?

3

Follow this link to see the solution: SAB - sab-stylesheet.css