Audio Recorder - size

Hi,

The audio recorder is very useful and thanks a lot. But the size is occupying a huge part of the screen. Is it possible to reduce the size.

Thanks a lot,

Aravind

 

BV52's picture

Hi Aravind,

Where are you creating your content?

-BV52

Hi,

I am creating on my wordpress site. Kindly check the screenshot. 

Thanks a lot,

Regards,

Aravind

Attachments: 
otacke's picture

Hi Aravind!

You can style quite a lot of things in H5P to fit your needs using CSS. Please have a look at our documentation for visual changes.

Cheers,
Oliver

Hi Oliver,

Let me follow. Thanks a lot

Regards

Aravind

 

otacke's picture

You're welcome.

Hi Oliver,

1. As per your instructions, we tried our best to reduce the size of "Audio Recorder".

2. But we couldn't find the CSS location file of the recorder, in the h5P library, in order to modify the size.

3. Could you please share a screenshot or a link to the location file.

Thanks a lot

Regards

Aravind 

otacke's picture

Hi Aravind!

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

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; }