Custom CSS Working in Desktop but not Lectora Online
August 22, 2023 3:05 PM
Greetings
We have a custom CSS solution for three things, a skip to content option that lets screen readers skip the main menu, the placement and size of the CC display, and the location of the audio scrub bar. We recently decided to migrate to Lectora online. The CSS style sheet does not seem to apply in the play mode nor does it work on export to review link. Is there something I am missing? In the desktop version I just put the style sheet in an HTML extension at the top of the course explorer and it works.
Current CSS:
@charset "utf-8";
/* CSS Document */
.skiptocontent a {
padding:6px;
position: absolute;
top:-60px;
left:0px;
width:140px;
color:#000000;
background:#FFFFFF;
-webkit-transition: top 1s ease-out;
transition: top 1s ease-out;
z-index: 100;
}
.skiptocontent a:focus {
position:absolute;
left:0px;
top:0px;
outline-color:transparent;
-webkit-transition: top .1s ease-in;
transition: top .1s ease-in;
}
.mejs__container {
width: 965px!important;
min-width: 180px!important;
text-align: -webkit-center!important;
margin-left: -5px!important;
}
.mejs__time-rail {
visibility: hidden
}
div[id^="video"] .mejs__captions-text, .mejs__captions-text * {
background: rgba(20, 20, 20, 1);
box-shadow: 5px 0 0 rgb(20 20 20), -5px 0 0 rgb(20 20 20 / 75%);
white-space: pre-wrap;
}
div[id^="audio"] .mejs__inner {
position: relative;
margin-top: 56px;
}
div[id^="audio"] .mejs__captions-layer {
bottom: 30px;
width: 100%;
}
div[id^="audio"] .mejs__captions-text {
position: relative;
bottom: 5px;
}
div[id^="video"] .mejs__captions-layer {
bottom: -5px;
position: absolute;
}
div[id^="video"] .mejs__controls:not([style*='display: none']) {
height: 24px;
background: url(MediaPlayer/control-default.png) 0 0;
bottom: -67px;
}
.mejs__captions-position-hover {
margin-top: 4px;
}
.mejs__time-rail {
visibility: hidden;
}
Solution
For Lectora Online the css will only apply when the content is published or in Preview Page in browser. It should work in ReviewLink. We'll look at enabling css in Lectora Online.
Discussion (5)
Am I right to assume that .skiptocontent is set on a text block with a hyperlink to skip content?
For Lectora Online the css will only apply when the content is published or in Preview Page in browser. It should work in ReviewLink. We'll look at enabling css in Lectora Online.
This is the css we (OP and I are on the same work team) are using now for the captions - posting in case anyone comes across this and wants something concrete to work with. The mission was to have captions running at the bottom of the page for users who need synced captions for the audio files.
/*captions*/
.mejs__container{
width: 960px !important;
}
.mejs__captions-position {
width: 335% !important;
padding-bottom: 9px !important;
}
.mejs__captions-layer {
color: #ffffff !important;
font-size: 18px !important;
/* text-shadow: 0px 0px 4px #9a9a9a !important; */
}
Indeed testing and checking this...and when adding a CSS in Lectora Online it will not override default values set in Lectora's CSS. I do think you need to override the original internally used CSS in which the values are set.