Passer au contenu

How to modify my templates

How to modify my templates

Wednesday 4 January 2023

All the versions of this article: [Deutsch] [English] [Español] [français]

First of all, be aware that any style given to an audio guide can be overloaded by styles assigned to a sequence.

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

Note 1: This template does not allow the audio bar to be modified graphically.
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-leftchange the colour using the property background-color
Previous - Next - line icon .arrow-barchange 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;
    }

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

See also: Templates