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.
Style element
Templates and their variants :
Basic
Item to be changed | Element identifier |
---|---|
Number | .big_number |
Background Previous-Next button | #btn_Prev, #btn_Next |
Previous-Next button icon | Cannot be changed |
Scan button | .scan |
Sequence title | #titreSequence |
Moiron
Item to be changed | Element identifier |
---|---|
Background | body |
Image banner | .header-dark |
Image | .image-seq |
Sequence title | #titreSequence |
Text | #texteSequence |
Text separator | #separateur |
Play/Pause button | #play-btn |
Previous - Next buttons | #btn_Prev, #btn_Next |
Élémentaire
Item to be changed | Element identifier |
---|---|
Background | body |
Sequence title | #titreSequence |
Picture | .image-seq |
Set of buttons | .boutons |
Play/Pause button | #play-btn |
Previous/Next button | #btn_Prev, #btn_Next |
Text button | #btn-parole |
This template will use the text’s modal window to display it.
Élémentaire - Variant Elementaire-bis
Item to be changed | Element identifier |
---|---|
Background | body |
Title Sequence | #titreSequence |
Image | .image-seq |
Button background | .boutons .arrow-wrapper |
Play - Pause button background | .boutons .arrow-wrapper .btn-Play-Pause |
Play button icon | .btn-Play-Pause .play |
Pause button icon | .btn-Play-Pause .pause |
Icon Previous - Next - Arrow-triangle part | .arrow-right, .arrow-left change the colour using the property background-color |
Previous - Next - line icon | .arrow-bar change the colour using the property border-color |
Text | #texteSequence |
Text separator | #separateur |
Moiron-Vignette
Item to be changed | Element identifier |
---|---|
Background | body |
Title Sequence | #titreSequence |
Background of the image | .vignette |
Buttons | .controls .btn |
Text | #texteSequence |
Text button | .btn-parole |
Variant infos
Item to be changed | Element identifier |
---|---|
Info frame background | .container-infos |
Title Sequence | #titreSequence |
Text | .infos #texteSequence |
O-DGuide information frame | .infospeodguide |
O-DGuide link | .infospeodguide a |
O-DGuide text | .infospeodguide p |
Variant Liste
Item to be changed | Element identifier |
---|---|
Background | body |
List background | #seqliste |
List item | .lesSequences |
Background of selected list item | .lesSequences.active |
Background Play - Pause button | .contour |
Background Play button - Pause selected item | .lesSequences.active .contour |
Play button | .play |
Play button for selected item | .lesSequences.active .play |
Pause button | .pause |
Title Sequence | .titreSequence |
Text button | .btn-text |
Other items :
Navigation bar
Item to be changed | Element identifier |
---|---|
Navigation bar | .navbar |
Title Audioguide | #titreAudioguide |
All links | .navbar-nav |
Item | .nav-item |
Link | .nav-link |
Reading speed link - not selectable | #accesModalVitesse.disabled |
Menu button : Elementaire - Moiron
- Button background :
#mobileMenuTrigger
- Button bars :
#mobileMenuTrigger span
Menu button : Basic - Moiron Vignette
- Button background :
.navbar-light .navbar-toggler
- Button bars :
Not modifiable
Audio management
These elements apply to all templates with the exception of Basic.
Item to be changed | Browser | Element identifier |
---|---|---|
Background | Firefox | input[type="range"]::-moz-range-track (de base) |
input[type="range"]::-moz-range-progress (en progression) |
||
Chrome | input[type="range"]::-webkit-slider-runnable-track |
|
Progress circle | Firefox | input[type="range"]::-moz-range-thumb |
Chrome | input[type="range"]::-webkit-slider-thumb |
|
Focus on progress circle | Firefox | input[type="range"]:focus::-moz-range-thumb |
Chrome | input[type="range"]:focus::-webkit-slider-thumb |
|
Current audio time | .current-time |
|
Total audio time | .song-duration |
Reading speed modal window
Item to be changed | Element identifier |
---|---|
Blurred effect behind the window | .modal-vitesse |
Window background | .modal-vitesse-content |
Cross button - Background | .modal-close |
Cross button - Line | .modal-close div |
Window title | .modal-title |
Text | .modal-description-vitesse |
Speed buttons | #modal-vitesse .button-default |
Current speed | .speedcontainer |
Ok Button | #vitesse-ok |
Text modal window
Item to be changed | Element identifier |
---|---|
Blurred effect behind the window | .modal-text |
Window background | .content-modal-text |
Cross button - Background | .modal-close |
Cross button - Line | .modal-close div |
Window title | .text-title |
Text | #texteSequence |
Close button | #text-ok |
Pages : Language choice - Sequence choice
Item to be changed | Element identifier |
---|---|
Area encompassing the elements (different from the background) | .sequence-liste #maincontent, .langue_visite #maincontent |
Audioguide title | .sequence-liste .titre, .langue_visite .titre |
Subtitle | .sequence-liste .soustitre, .langue_visite .soustitre |
Area containing the list | .liste |
Item | .item |
Links | .lien |
Page : New visit"
Item to be changed | Element identifier |
---|---|
Area encompassing the elements (different from the background) | .nouvelle_visite #maincontent |
Return button | .annule-retour-nvlle-visite |
Zone titles | #zoneCodeVisite h2, #sectionScanQrc h2 |
Code entry area | #champ_code_visite |
Start button | #zoneCodeVisite button.submit |
Text Scanner | #sectionScanQrc b, #sectionScanQrc span |
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;
}