In Poodll there are HTML recorder skins and styles for those skins. The skins are really better off thought of as separate recorders because they are quite intricate and distinct from each other. Examples of skins are: plain, single button, 123 recorder, and burnt rose. It is possible to customize the HTML5 recorder skin appearance with CSS, if you have those skills. These are called ‘styles.’ This is the plain audio recorder.

 

 

This is an example of a ‘style’ applied to the ‘plain’ audio recorder. In this case the style is called ‘charcoal.’


 

You set the style name to apply to a skin in the ‘style’ field under the HTML5 recorder settings in the Poodll filter settings. Its possible to apply them at site, course and activity level. Here is an example from the Poodll filter general settings page of the style setting for ‘charcoal’ above.

 

 

It is up to you to how to write the CSS for  a style. But for your reference this is the CSS for the charcoal style.

.charcoal.poodll_mediarecorderholder_standard{
    padding: 20px;
    background-color: #333;
    
}
.charcoal .poodll_status_standard{
    padding: 5px;
    background-color: #fff;
}
.charcoal .poodll_mediarecorder_button_standard{
    background: #fff;
    border: none;
    padding: 5px 10px;
    margin-bottom: 20px;
     color: red;
}
.charcoal .poodll_save-recording_standard{
    padding: 5px;
    background-color: #fff;
    border: none;
    color: red;
   width: 100%;
}

.charcoal button.pmr_disabled{
    color: #BBB;
}

.messages_charcoal.p_messages{
    color: #333;
}
/*-----end-----*/