It seems that for Audio Recorder no separate CSS files have been used. Styles have been set in the code, e.g. https://github.com/h5p/h5p-audio-recorder/blob/master/src/views/AudioRecorder.vue#L146, and the result after building also uses embedded styles instead of separate files.

You shouldn't change the code however anyway (unless you have something that could become part of the official version of H5P), because it would be overwritten by updates to the content type. You should be able to override the styles however. Please compare https://h5p.org/documentation/for-developers/visual-changes.

Best,
Oliver

Languitech

Tue, 03/31/2020 - 15:39

Permalink

Audio Recorder Resize and restyle

Hi, First of all to all developers out there for making this fabulous tool !

I (as above) would like the audio recorder interface to be minimal on my web page and to only contain the bottom part along with the instruction row. Could it be of interest to anyone else designing web pages out there? Has anyone done this and happy to share? I use Wordpress and LearnDash. See attached pic.

I have looked at the above mentioned link on github and noticed the following css that might need to be removed to do so? then what next?

Thanks for your help, E

.fa-microphone { width: 60%; height: 60%; left: 50%; top: 50%; transform: translate(-50%,-50%); position: absolute; font-size: 2.5em; border-radius: 50%; background-color: white; line-height: 2.5em; }

Attachments:

Image icon mini-audio-recorder.PNG

You are here

Audio Recorder - size