Modifying timeline css in Totara

Hi all,

I'm hoping that this is the right forum for a css query? apologies if not.

I've installed H5P on a Totara 11 site, and am using the Timeline activity to recreate something that we previously hosted in Wordpress. On the whole it has worked fine, except that there are two areas of styling that I would like to change - and as I don't have access to the Totara server or H5P files, I was hoping to do this using Totara's front end custom css option, which simply loads any additional code after all other css has been applied.

The first change is to prevent the h2 date range from appearing above the body text on each timeline entry (I use the headline to specify the text that I need). I've identified that I can do this by changing the relevant css to:

.vco-slider .slider-item .content .content-container .text .container h2.date {
    font-size: 0px;
    line-height: 0px;
    font-weight: normal;
}

but if I add this to custom css on the site, it doesn't work. Do I need to prefix this somehow, or does this functionality simply not work with H5P?

The second issue is with body text - if this is too long, the timeline entry can be lost off the top of the page. Both the body text and asset image (or the container that they are both in) appears to be vertically centred, but I'm unable to find where. As with the first point, I would then need to be able to apply these changes in the site's additional css configuration.

Any advice would be much appreciated! 

Many thanks,

Ian

 

Content types: 
icc's picture

For the CSS, unfortunately, I don't think there's any other way than the one described under the Moodle section here:
https://h5p.org/documentation/for-developers/visual-changes

This is because the content is displayed inside an iframe and have separate CSS from the rest of the site.

As for the body text issue, I'm not sure. Do you get this if you try to create the timeline content here on h5p.org as well?