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:

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

Try to change your templates now.
If you have any questions please do not hesitate to contact us