Audio Recorder - size
Submitted by Aravind8 on Thu, 05/24/2018 - 13:23
Forums:
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
Thu, 05/24/2018 - 14:29
Permalink
Hi Aravind,Where are you
Hi Aravind,
Where are you creating your content?
-BV52
Aravind8
Fri, 05/25/2018 - 03:11
Permalink
Hi,I am creating on my
Hi,
I am creating on my wordpress site. Kindly check the screenshot.
Thanks a lot,
Regards,
Aravind
otacke
Fri, 05/25/2018 - 09:16
Permalink
Hi Aravind!You can style
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
Aravind8
Fri, 05/25/2018 - 11:03
Permalink
Hi Oliver,Let me follow.
Hi Oliver,
Let me follow. Thanks a lot
Regards
Aravind
otacke
Fri, 05/25/2018 - 11:19
Permalink
You're welcome.
You're welcome.
Aravind8
Tue, 06/26/2018 - 15:23
Permalink
Hi Oliver,We tried our best
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
Wed, 06/27/2018 - 09:39
Permalink
Hi Aravind!It seems that for
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
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; }