A future version is under development to allow you to modify the templates in an easier way.
In the meantime, here is how to do it:
Where to define the style
To change the style of the entire audio guide
1) Select an audio guide from the Home screen.
2) Click on "edit audioguide information".
3) Click on the section "style" section, an input field will open.
To change the style of a sequence
1) Select an audio guide from the home screen.
2) Click on the sequence to be modified.
3) Click on the section "style" section, an input field will open.
Caution: If the sequence has been created in several languages it will be necessary to copy the code entered in the main language, and paste it into the style section of each language.
What to put in the style section
The style is modified using css. That is, by using a style element and a style property. In the following way:
style element {
style property : style ;
}
In the case of an audio guide, you may have to modify :
- The colour
- The background colour
- The font size
The colour :
- With the property:
color:
- For the style put a colour by its English name, or enter the href code of a colour for example for white: #ffffff.
You will easily find sites giving you these codes, by doing an internet search.
The background colour :
- With the property:
background:
- As before, enter the English name of a colour, or its href code.
The font size :
- With the property:
font-size:
- Enter a number followed by
px
meaning pixel. It is advisable not to set a size smaller than 16 pixels.
If you want to change other elements feel free to do a web search stating what you want to do and the css wording.
This should give you the style properties and associated styles.
If you can’t do what you want, don’t hesitate to contact us.
Graphic modification of the main page of the audio guide
Style elements
For all audioguides
Item to be changed | Element identifier |
---|---|
Background | body |
Title | .titre |
Previous button | #btn_Prev |
Next button | #btn_Next |
For Moiron - Moiron Vignette - Standard
Item to be changed | Element identifier |
---|---|
Thumbnail containing the image | .vignette |
Bottom of the audioguide | .bas_page |
Progress bar | #duration |
Total audio time | .song-duration |
Evolving time of the audio | .current-time |
Play Button | #play-btn |
Text of the audioguide | #show-parole |
Special features of the templates
Moiron Vignette :
- Scan button :
.scan
- Button to access the text (speech) :
.btn-parole
Basic
- The basic template contains the html audio progress bar, so this bar will look different in different browsers. However, you will be able to change the background colour with this:
#audiocontrol {
background : #ffffff;
} - Scan button:
.scan
- Sequence number :
.bignumber
Moiron & Standard
- Separation bar between the navigation buttons and the sequence text :
#separateur
Information Générale
- This template will contain only text.
Graphic modification of the drop-down menu

Item to be changed | Element identifier |
---|---|
Toolbar | .navbar |
Title (Optional) | .navbar-brand |
Icon button | .navbar-toggler |
Icon | .navbar-toggler-icon |
List | .navbar-nav |
Item | .nav-item |
Link | .nav-link |
Graphic modification of the pages containing the list of languages

Item to be changed | Element identifier |
---|---|
Background | .langue_visite |
Audioguide title | .langue_visite .titre |
Subtitle | .langue_visite .soustitre |
List | .langue_visite .liste |
Item | .langue_visite .item |
Link | .langue_visite .lien |
Graphic modification of the pages containing the list of sequences

Item to be changed | Element identifier |
---|---|
Background | .sequence_liste |
Audioguide Title | .sequence_liste .titre |
Subtitle | .sequence_liste .soustitre |
List | .sequence_liste .liste |
Item | .sequence_liste .item |
Link | .sequence_liste .lien |
See an example
- I would like to change the background colour to a blue-green. I found the href code on the internet here: 0f8499.
body {
background : #0f8499;
}
- Now I want to change the font size of the title of my sequence to increase it
.titre{
font-size : 20px;
}
- Finally I would like to change the colour of the writing on my next; play and previous buttons to white, but also change the background colour to grey
#btn_Prev, #btn_Next, #play-btn{
color:#ffffff;
background:#596266;
}