Difference between revisions of "ProDon:Back office"

From Logilys
Jump to: navigation, search
(→‎L'onglet « Page d'accueil »)
(→‎The "Background picture" tab)
 
(42 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Header_TOC}}<br>   
 
{{Header_TOC}}<br>   
−
 
−
<span style="color: rgb(255, 0, 0);">'''CAUTION: This document is currently being revised, it may be possible that some parts are missing or outdated'''</span>
 
−
 
−
<span style="color: rgb(255, 0, 0);">'''ATTENTION&nbsp;: Ce document est présentement en rédaction/révision, il est possible que certaines parties soient manquantes ou désuètes.'''</span>
 
−
 
  
 
<br><span style="color: rgb(255, 0, 0);">'''CAUTION:'''</span> This document is conceived for the '''version 5.0.4''' of '''ProDon'''. For the '''version 5.0.3''', [[ProDon:Back office 5.0.3|click here]].
 
<br><span style="color: rgb(255, 0, 0);">'''CAUTION:'''</span> This document is conceived for the '''version 5.0.4''' of '''ProDon'''. For the '''version 5.0.3''', [[ProDon:Back office 5.0.3|click here]].
−
 
−
<br><span style="color: rgb(255, 0, 0);">'''ATTENTION :'''</span> Ce document est conçu pour la '''version 5.0.4''' de '''ProDon'''. Pour accéder à la '''version 5.0.3''', il faut [[ProDon:Back-office_5.0.3|cliquer ici]].
 
  
  
Line 14: Line 7:
 
The back office is linked to the Online Donation module. It allows the management of all graphic elements of the homepage and of the forms.This is where one will be able to edit the font, the colors and the pictures that will appear on the IMakeAnOnlineDonation of the organization.
 
The back office is linked to the Online Donation module. It allows the management of all graphic elements of the homepage and of the forms.This is where one will be able to edit the font, the colors and the pictures that will appear on the IMakeAnOnlineDonation of the organization.
  
−
Le back-office est relié au module Dons en ligne. Il permet de gérer tous les éléments graphiques de votre page d'accueil et de vos formulaires. C'est à partir de cet endroit que vous pouvez modifier vos polices de caractères, vos couleurs ainsi que vos images apparaissant sur votre site Je Donne En Ligne.
+
== Creation of a LogiZone account ==
 +
A LogiZone account is a profile once given the right accesses will allow the user to log in to the back office.  
  
 +
To create a LogiZone account, go to the back office.
  
−
== Creation of a LogiZone account / Création d'un compte LogiZone  ==
+
To do so, go to "Web forms management".  
−
A LogiZone account is a profile with the right accesses, will allow the user to login to the back office.
 
−
Un compte LogiZone est un profil qui une fois les accès attribués, vous permettra d'accéder au back-office.     
 
−
 
 
−
To create a LogiZone account, go to the back office.
 
−
Pour faire la création d'un compte LogiZone, il faut accéder au back office 
 
  
−
To do so, go to "Web form management".
 
−
Pour ce faire, se rendre dans la «&nbsp;Gestion des formulaires Web&nbsp;».
 
 
{| width="200" cellspacing="1" cellpadding="1" border="1" class="wikitable"
 
{| width="200" cellspacing="1" cellpadding="1" border="1" class="wikitable"
 
|-
 
|-
−
| colspan="2" | Click on the "Configuration" menu, then select the "File:Bouton formulaire web.png Web Forms".
+
| colspan="2" | Click on the "Configuration" menu, then select the "[[File:Web form button.png]] Web Forms".
−
Cliquer sur le menu «&nbsp;Configuration&nbsp;», puis choisir «&nbsp;[[Image:Bouton formulaire web.png]] Formulaires Web&nbsp;».  
 
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice 001.png]]<br>
+
| colspan="2" | [[File:ProDon5_BackOffice_001.png]]<br>
 
|}
 
|}
  
 
<br>  
 
<br>  
  
−
{| width="200" cellspacing="1" cellpadding="1" border="1" class="wikitable"
+
{| width="20%" cellspacing="1" cellpadding="1" border="1" class="wikitable"
 
|-
 
|-
−
| colspan="2" | After clicking on "Web Forms", this window will open.
+
| colspan="2" | After clicking on "[[File:Web form button.png]] Web Forms", this window will open.
−
Après avoir cliqué sur «&nbsp;[[Image:Bouton formulaire web.png]] Formulaires Web&nbsp;», la fenêtre suivante s'ouvre.  
 
  
 
|-
 
|-
−
| colspan="2" |[[Fichier:ProDon5 BackOffice 002.png]]<br>
+
| colspan="2" |[[File:ProDon5 BackOffice 002.png]]<br>
  
 
|}
 
|}
  
  
−
{| class="wikitable"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
  
−
| Once this window is opened, select the button Fichier:Bouton_aller_sur_le_site_production.png and select "Display the theme configuration page".
+
| Once this window is open, select the button [[File:Earth button.png]] and select "Back office".
−
Une fois la fenêtre ouverte, sélectionner le bouton [[Fichier:Bouton Visualiser Formulaire Web.png]]et ensuite sélectionner « Back-office ».
 
 
|-
 
|-
−
|[[Fichier:ProDon5 BackOffice 003.png]]
+
|[[File:ProDon5 BackOffice 006.png]]
 
|}
 
|}
  
  
−
{| class="wikitable"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
−
| colspan="2" |Once on the page to the back office, the user will have to create their LogiZone account, if they do not have one.
+
| colspan="2" |Once on the page to the back office, the user will have to create their LogiZone account if they do not have one.
−
Rendu sur la page pour accéder au back-office, il faut faire la création de son compte LogiZone, si inexistant.
+
 
 
|-
 
|-
−
| colspan="2" |[[Fichier:ProDon5 BackOffice 004.png]]
+
| colspan="2" |[[File:ProDon5 BackOffice 003.png]]
 
|-
 
|-
 
| width="50%" |  
 
| width="50%" |  
−
<span style="color: rgb(255, 0, 0);">'''A&nbsp;:'''</span> Allows the user to login an active LogiZone by entering the user name or the email address.  
+
<span style="color: rgb(255, 0, 0);">'''A:'''</span> Allows the user to log to an active LogiZone by entering the user name or the email address.  
−
Permet d'entrer dans une LogiZone active en entrant le nom d'utilisateur ou l'adresse courriel.
+
 
−
|<span style="color: rgb(255, 0, 0);">'''B :'''</span> Enter the password of the existing LogiZone.
+
|<span style="color: rgb(255, 0, 0);">'''B:'''</span> Enter the password of the existing LogiZone.
−
Entrer le mot de passe de la LogiZone existante.
 
 
|-
 
|-
  
 +
|<span style="color: rgb(255, 0, 0);">'''C:'''</span> Use this link to change the password of the existing LogiZone.
 +
 +
|<span style="color: rgb(255, 0, 0);">'''D:'''</span> Allows the creation of a new LogiZone account.
  
−
|<span style="color: rgb(255, 0, 0);">'''C :'''</span> Use this link to change the password of the existing LogiZone.
 
−
Utiliser le lien pour permettre d'attribuer un nouveau mot de passe à la LogiZone existante.
 
−
|<span style="color: rgb(255, 0, 0);">'''D :'''</span> Allows the creation of a new LogiZone account.
 
−
Permet de créer un nouveau compte LogiZone.
 
 
|-
 
|-
−
|<span style="color: rgb(255, 0, 0);">'''E :'''</span> Help to get more information about the LogiZone account.  
+
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''E:'''</span> Help to get more information about the LogiZone account.  
−
Permet d'en savoir plus sur le compte LogiZone.
 
−
|
 
−
|}
 
  
−
== Back office accesses / Accès au back-office  ==
 
−
To access the back office, one must have a LogiZone account first. Once the LogiZone account created, go to ProDon to give the access to the back office to this account.
 
  
−
Pour être en mesure d'accéder au back-office, il faut au préalable avoir un compte LogiZone. Une fois le compte LogiZone créé, il faut donner les accès à ce compte au back-office. 
+
|}
−
--From ProDon, to give the acces to the LogiZone account which will be able to edit the back office.
 
−
À partir de ProDon, donner accès au compte LogiZone qui pourra apporter des modifications au back-office.
 
  
 +
== Back office accesses ==
 +
To access the back office, one must first have a LogiZone account. Once the LogiZone account created, go to ProDon to give the access to the back office to this account.
  
−
To do so, one must go to the "Web form management".
+
From ProDon, give the access to the LogiZone account which will be able to edit the back office.
  
−
Pour ce faire, se rendre dans la «&nbsp;Gestion des formulaires Web&nbsp;».  
+
To do so, one must go to the "[[File:Web form button.png]] Web form management".
  
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
 
  
 
| colspan="2" |  
 
| colspan="2" |  
−
Click on the "Configuration" menu, then select "Web Forms".
+
Click on the "Configuration" menu, then select "[[File:Web form button.png]] Web Forms".
−
 
 
−
Cliquer sur le menu «&nbsp;Configuration&nbsp;», puis choisir «&nbsp;[[Image:Bouton formulaire web.png]] Formulaires Web&nbsp;».  
 
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice 001.png]]
+
| colspan="2" | [[File:ProDon5 BackOffice 001.png]]
 
|}
 
|}
  
 
<br>  
 
<br>  
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
| colspan="2" |  
+
| colspan="2" | After clicking on "[[File:Web form button.png]] Web Forms", this window will open.  
−
Après avoir cliqué sur «&nbsp;[[Image:Bouton formulaire web.png]] Formulaires Web&nbsp;», la fenêtre suivante s'ouvre.  
 
−
 
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_002.png]]<br>
+
| colspan="2" | [[File:ProDon5_BackOffice_002.png]]<br>
  
 
|-
 
|-
−
| colspan="2" |  
+
| colspan="2" | Then, click on the button [[File:Homepage Configuration.png]].  
−
Alors, il faudra appuyer sur ce bouton [[Fichier:Bouton_configurer_votre_site_Web.png]]. <br>
 
 
|}
 
|}
  
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
| colspan="2" |  
+
| colspan="2" | In this window, go to the "Access IMakeAnOnlineDonation" tab and click on the [[File:Button +.png]] to add a user.
−
Dans cette fenêtre, il faut aller sur l'onglet Accès JeDonneEnLigne et cliquer sur le [[Fichier:Bouton_%2B.png]] pour ajouter un utilisateur
 
−
 
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice 006.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice 004.png]]<br>
 
|-
 
|-
−
| '''NOTE:''' À partir du bas de cette fenêtre, il est possible de créer une clé de cryptage. Il n'est pas nécessaire d'en avoir une.
+
| '''NOTE:''' From the bottom of this window, it is possible to create an encryption key. It is not necessary to have one.
 
|}
 
|}
  
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
 
| colspan="2" |  
 
| colspan="2" |  
 
Then, this window will open:  
 
Then, this window will open:  
−
Ensuite, cette fenêtre s'ouvre:
 
−
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice 007.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice 005.png]]<br>
 
|-
 
|-
 
|<span style="color: rgb(255, 0, 0);">'''A'''</span>: In this box, enter the email that will be used to access the LogiZone.  
 
|<span style="color: rgb(255, 0, 0);">'''A'''</span>: In this box, enter the email that will be used to access the LogiZone.  
−
Dans cette case, il faut entrer le courriel qui est utilisé dans la LogiZone.
+
 
 
|<span style="color: rgb(255, 0, 0);">'''B'''</span>: Usually, enter the name of the person who will use this email to access the LogiZone.
 
|<span style="color: rgb(255, 0, 0);">'''B'''</span>: Usually, enter the name of the person who will use this email to access the LogiZone.
−
Généralement, il faut inscrire le nom de la personne qui utilisera ce courriel pour accéder la LogiZone.
 
 
|-
 
|-
−
|<span style="color: rgb(255, 0, 0);">'''C'''</span>: The checkbox "Back office" is used to grant the access to let the user work on the back office.
+
|<span style="color: rgb(255, 0, 0);">'''C'''</span>: The "Back office" checkbox is used to grant the access to let the user work on the back office.
  
−
La case à cocher « Back-office » sert à donner les accès à l'utilisateur pour utiliser le back-office.
+
|<span style="color: rgb(255, 0, 0);">'''D'''</span>: The "Online donation list" checkbox is used to grant the access to let the user see the list of online donations.
−
|<span style="color: rgb(255, 0, 0);">'''D'''</span>: The checkbox "Online donation list" is used to grant the access to let the user see the list of online donation.
 
−
La case à cocher « Liste des dons en ligne » sert à donner les accès à l'utilisateur pour voir les formulaires.  
 
 
|-
 
|-
 
|<span style="color: rgb(255, 0, 0);">'''E'''</span>: When there is an encryption key, this box give the access to the user to do integration on demand.
 
|<span style="color: rgb(255, 0, 0);">'''E'''</span>: When there is an encryption key, this box give the access to the user to do integration on demand.
−
Lorsqu'il y a une clé de cryptage, cette case donne l'accès à la utilisateur de faire des intégrations sur demande.
+
 
 
|<span style="color: rgb(255, 0, 0);">'''F'''</span>: Write the user's password for integration in this box.
 
|<span style="color: rgb(255, 0, 0);">'''F'''</span>: Write the user's password for integration in this box.
−
Il faut écrire le mot de passe de l'utilisateur dans cette case.
+
 
  
 
|}
 
|}
  
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
 
| colspan="2" |  
 
| colspan="2" |  
 
The email linked to the LogiZone account will appear here.
 
The email linked to the LogiZone account will appear here.
−
Le courriel affecté au compte LogiZone apparaitra ici.
 
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_008.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_007.png]]<br>
 
|-
 
|-
 
|}
 
|}
  
−
== Create themes in the back office / Créer des thèmes dans le back-office ==
+
== Create themes in the back office ==
 
Then, redo the steps of the LogiZone creation, but in place of creating a new one, connect to the session.
 
Then, redo the steps of the LogiZone creation, but in place of creating a new one, connect to the session.
−
 
−
Ensuite, refaire les étapes de la création de LogiZone, mais au lieu d'en créer une nouvelle, il faut se connecter sur la session.
 
  
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
Line 182: Line 144:
 
| colspan="2" |  
 
| colspan="2" |  
 
Normally, the user will get to this window:
 
Normally, the user will get to this window:
−
Normalement, l'utilisateur arrivera à cette fenêtre:
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_009.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_008.png]]<br>
 
|-
 
|-
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Please be sure to be in the right section.
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Please be sure to be in the right section.
−
Il faut s'assurer d'être dans la bonne section.
+
 
 
| <span style="color: rgb(255, 0, 0);">'''B''':</span> Click on this button to create a new theme.
 
| <span style="color: rgb(255, 0, 0);">'''B''':</span> Click on this button to create a new theme.
−
Il faut cliquer sur ce bouton pour créer un nouveau thème.
 
 
|}
 
|}
  
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
 
| colspan="2" | This window will open:  
 
| colspan="2" | This window will open:  
−
Cette fenêtre s'ouvrira:
+
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_010.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_009.png]]<br>
 
|-
 
|-
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> This section allows the duplication of an existing theme. It is in the drop-down list on the left that the theme to be duplicated must be selected.  
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> This section allows the duplication of an existing theme. It is in the drop-down list on the left that the theme to be duplicated must be selected.  
−
Cette section permet de dupliquer un thème déjà existant. C'est dans la liste déroulante de gauche qu'il faut sélectionner le thème à dupliquer.
+
 
 
| <span style="color: rgb(255, 0, 0);">'''B''':</span> To create a new theme, click on the "New" button­.  
 
| <span style="color: rgb(255, 0, 0);">'''B''':</span> To create a new theme, click on the "New" button­.  
−
Pour créer un nouveau thème, il faut appuyer sur le bouton « Nouveau ».
+
 
 
|}
 
|}
  
−
=== The "Option" tab / L'onglet « Option » ===
+
=== The "Option" tab ===
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
 
| colspan="2" | Then, this window opens:
 
| colspan="2" | Then, this window opens:
−
Alors, cette fenêtre s'ouvre:
+
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_011.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_010.png]]<br>
 
|-
 
|-
−
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> This section allows the choice of the theme type that will be created. The possible choices are: create a theme for the homepage and the forms, for the homepage only or for the forms only.
+
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> This section allows the choice of the theme type that will be created. The possible choices are: create a theme for the homepage and the forms, create a theme for the homepage only or create a theme for the forms only.
  
−
Cette section permet de choisir le type de thème qui sera créé. Les choix possibles sont créer un thème pour la page d'accueil et les formulaires, pour la page d'accueil seulement ou pour les formulaires seulement.  
+
| <span style="color: rgb(255, 0, 0);">'''B''':</span> This section allows the naming of the theme.
  
−
| <span style="color: rgb(255, 0, 0);">'''B''':</span> This sections allows the naming of the theme.
 
−
Cette section permet de définir le nom de du thème.
 
 
|-
 
|-
 
| <span style="color: rgb(255, 0, 0);">'''C''':</span> This checkbox allows this theme to be applied by default.
 
| <span style="color: rgb(255, 0, 0);">'''C''':</span> This checkbox allows this theme to be applied by default.
−
Cette case à cocher permet d'appliquer ce thème par défaut.
+
 
 
| <span style="color: rgb(255, 0, 0);">'''D''':</span> This checkbox allows the display of the header only on the first page of the form.
 
| <span style="color: rgb(255, 0, 0);">'''D''':</span> This checkbox allows the display of the header only on the first page of the form.
 +
|-
 +
| <span style="color: rgb(255, 0, 0);">'''E''':</span> This checkbox allows the display of the title only on the first page of the form.
  
−
Cette case à cocher permet d'afficher l'image d'entête seulement sur la première page du formulaire.
 
−
|-
 
−
| <span style="color: rgb(255, 0, 0);">'''E''':</span> This checkbox allows the display the title only on the first page of the form.
 
−
Cette case à cocher permet d'afficher le titre seulement sur la première page du formulaire.
 
 
| <span style="color: rgb(255, 0, 0);">'''F''':</span> In all windows, this button return the user to the overview of everything in this section. For example, when a user is in the themes, this button will return to the overview of all themes of the back office.
 
| <span style="color: rgb(255, 0, 0);">'''F''':</span> In all windows, this button return the user to the overview of everything in this section. For example, when a user is in the themes, this button will return to the overview of all themes of the back office.
−
Dans toutes les fenêtres, ce bouton ramène à la vue d'ensemble de tout ce qu'il y a dans cette section. Par exemple, lorsque l'utilisateur est dans les thèmes, ce bouton le ramène à la vue d'ensemble de tous les thèmes du back-office. Contrairement aux boutons du fureteur, il ne permet pas de revenir à la page précédente.
 
 
|-
 
|-
−
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''G''':</span> This button allows to save the edits. Furthermore, everytime a change is detected in a section, when the user goes to another section, the back office ask to save the changes.
+
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''G''':</span> This button allows to save the edits. Furthermore, every time a change is detected in a section, when the user switch to another section, the back office will ask to save the changes.
−
Évidemment, ce bouton permet de sauvegarder. De plus, dès qu'un changement est détecté dans une section, lorsque l'utilisateur change de section, le back-office demande une sauvegarde.  
 
  
 
|}
 
|}
  
−
=== The "Palette" tab / L'onglet « Palette » ===
+
=== The "Palette" tab ===
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
 
| colspan="2" |  
 
| colspan="2" |  
−
The "Palette" tab allows the definition of the colors that will be used in the other tabs of the back office. Usually, the user configure the organization's colors.
+
The "Palette" tab allows the definition of the colors that will be used in the other tabs of the back office. Usually, the user configures the organization's colors. With the version 5.0.4, this tool has been split into 2 columns and each of these columns calls a different tool.
−
 
 
−
L'onglet « Palette » permet de définir toutes les couleurs qui seront utilisées dans les autres onglets du back-office. Généralement, les utilisateurs y configurent les couleurs de leur organisation. À partir de la version 5.0.4, cet onglet est divisé en 2 colonnes et chacune de ces colonnes appelle un utilitaire différent.  
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_012.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_011.png]]<br>
 
|-
 
|-
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> To get the most precise colors, the back office system use the rgba. The numbers be between 0 and 255. The first number is the amount of red, the second is the amount of green, the third is the amount of blue and the last one is the opacity (alpha). The more this number is close to 1.0, the more the color will be opaque, the more it is near to 0.0, the more this color will be transparent.
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> To get the most precise colors, the back office system use the rgba. The numbers be between 0 and 255. The first number is the amount of red, the second is the amount of green, the third is the amount of blue and the last one is the opacity (alpha). The more this number is close to 1.0, the more the color will be opaque, the more it is near to 0.0, the more this color will be transparent.
−
Pour la précision des couleurs, le système du back-office utilise les fonctions rgba, hsla et hex. Les nombres doivent être situés entre 0 et 255. Le premier nombre contrôle la quantité de rouge, le second la quantité de vert, le troisième la quantité de bleu et le dernier chiffre contrôle la transparence (alpha). Plus ce chiffre est près de 1,0, plus cette couleur sera opaque, plus il est près de 0,0, plus cette couleur sera transparente.
+
| <span style="color: rgb(255, 0, 0);">'''B''':</span> If the user does not have the numbers for their colors, this section uses another tool. This system of the back office uses the rgba, hsla and hex functions.
−
| <span style="color: rgb(255, 0, 0);">'''B''':</span> If the user does not have the numbers for their colors, it is possible to use this tool. The user will only have to click on the bar and the tool will open.
+
 
−
Si l'utilisateur ne détient pas les nombres pour ses couleurs, il est possible de choisir ses couleurs par cet outil. le système du back-office utilise les fonctions rgba, hsla et hex.
 
 
|}
 
|}
  
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
| colspan="2" | By clicking on '''A''' of the last section.
+
| colspan="2" | By clicking on '''A''' of the last section, this window will open.
−
En cliquant sur '''A''' de la section précédente.
+
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_013.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_012.png]]<br>
 
|-
 
|-
−
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> This option allows the setting of the quantity  of red.  
+
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> This option allows the setting of the amount of red.  
−
Cette option permet d'ajuster la quantité de rouge.
+
 
−
| <span style="color: rgb(255, 0, 0);">'''B''':</span> This option allows the setting of the quantity  of green.
+
| <span style="color: rgb(255, 0, 0);">'''B''':</span> This option allows the setting of the amount of green.  
−
Cette option permet d'ajuster la quantité de vert.
 
 
|-
 
|-
−
| <span style="color: rgb(255, 0, 0);">'''C''':</span> This option allows the setting of the quantity  of blue.  
+
| <span style="color: rgb(255, 0, 0);">'''C''':</span> This option allows the setting of the amount of blue.  
−
Cette option permet d'ajuster la quantité de bleu.
+
 
 
| <span style="color: rgb(255, 0, 0);">'''D''':</span> This option allows the setting of the color transparency.  
 
| <span style="color: rgb(255, 0, 0);">'''D''':</span> This option allows the setting of the color transparency.  
−
Cette option permet d'ajuster la transparence de la couleur.
+
 
 
|-
 
|-
 
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''E''':</span> This box allows the preview of the result.
 
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''E''':</span> This box allows the preview of the result.
−
Cette case permet de prévisualiser le résultat.
+
 
 
|}
 
|}
  
Line 278: Line 228:
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
| colspan="2" | By clicking on '''B''' of the first section. This section of the back office uses the rgba, hsla and hex functions.
+
| colspan="2" | By clicking on '''B''' of the first section, this window will open. This section of the back office uses the rgba, hsla and hex functions.
−
 
 
−
En cliquant sur '''B''' de la première section. Cette section du back-office utilise les fonctions rgba, hsla et hex.
 
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_014.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_013.png]]<br>
 
|-
 
|-
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> This option allows the adjustment of the color.  
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> This option allows the adjustment of the color.  
−
Cette option permet d'ajuster la couleur.
+
 
−
| <span style="color: rgb(255, 0, 0);">'''B''':</span> This option allows the adjustment of the saturation.  
+
| <span style="color: rgb(255, 0, 0);">'''B''':</span> This option allows the adjustment of the color saturation.  
−
Cette option permet d'ajuster la saturation de la couleur.
+
 
 
|-
 
|-
 
| <span style="color: rgb(255, 0, 0);">'''C''':</span> This option allows the adjustment of the luminosity.  
 
| <span style="color: rgb(255, 0, 0);">'''C''':</span> This option allows the adjustment of the luminosity.  
−
Cette option permet d'ajuster la luminosité.
+
 
 
| <span style="color: rgb(255, 0, 0);">'''D''':</span> This option allows the adjustment of the color transparency.  
 
| <span style="color: rgb(255, 0, 0);">'''D''':</span> This option allows the adjustment of the color transparency.  
−
Cette option permet d'ajuster la transparence de la couleur.
+
 
 
|-
 
|-
 
| <span style="color: rgb(255, 0, 0);">'''E''':</span> This box allows the setting of the color in hexadecimal.  
 
| <span style="color: rgb(255, 0, 0);">'''E''':</span> This box allows the setting of the color in hexadecimal.  
−
Cette case permet d'entrer la couleur en hexadécimal.
+
 
 
| <span style="color: rgb(255, 0, 0);">'''F''':</span> This box allows the setting of the color in rgba.
 
| <span style="color: rgb(255, 0, 0);">'''F''':</span> This box allows the setting of the color in rgba.
−
Cette case permet d'entrer la couleur en rvba.
+
 
 
|-
 
|-
 
| <span style="color: rgb(255, 0, 0);">'''G''':</span> This box allows the setting of the color in hsla. By using the 4 sliders, it is the same thing as working in hsla.  
 
| <span style="color: rgb(255, 0, 0);">'''G''':</span> This box allows the setting of the color in hsla. By using the 4 sliders, it is the same thing as working in hsla.  
−
Cette case permet d'entrer la couleur en hsla. En utilisant les quatre curseurs de défilement,cela revient à travailler en hsla.
+
 
 
| <span style="color: rgb(255, 0, 0);">'''H''':</span> By clicking on this box, the user will have a preview of the selected color and will see 4 lighter possibilities.
 
| <span style="color: rgb(255, 0, 0);">'''H''':</span> By clicking on this box, the user will have a preview of the selected color and will see 4 lighter possibilities.
−
En appuyant sur cette case, l'utilisateur aura un aperçu de la couleur sélectionnée et y verra  4 possibilités d'éclaircissement.
+
 
 
|-
 
|-
 
| <span style="color: rgb(255, 0, 0);">'''I''':</span> By clicking on this box, the user will have a preview of the selected color and will see 4 darker possibilities.
 
| <span style="color: rgb(255, 0, 0);">'''I''':</span> By clicking on this box, the user will have a preview of the selected color and will see 4 darker possibilities.
−
En appuyant sur cette case, l'utilisateur aura un aperçu de la couleur sélectionnée et y verra  voir 4 possibilités d'assombrissement.
+
 
−
| <span style="color: rgb(255, 0, 0);">'''J''':</span> This percentage allows the ajustment of the color shading of the "Lighten" and "Darken" options.  
+
| <span style="color: rgb(255, 0, 0);">'''J''':</span> This percentage allows the adjustment of the color shading of the "Lighten" and "Darken" options.  
−
Ce pourcentage permet d'ajuster le dégradé de couleur des options « éclaircir » et « assombrir ».
+
 
 
|-
 
|-
 
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''K''':</span> This box allows a preview of 3 colors potentially complementary to the selected color. '''Note:''' The color on the right is the original color.  
 
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''K''':</span> This box allows a preview of 3 colors potentially complementary to the selected color. '''Note:''' The color on the right is the original color.  
  
−
Cette case permet d'obtenir 3 couleurs potentiellement complémentaires à la couleur sélectionnée par l'utilisateur. '''Note:''' La couleur de droite est la couleur originale.
 
 
|}
 
|}
  
−
=== The "Fonts" tab / L'onglet « Polices » ===
+
=== The "Fonts" tab ===
  
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
| colspan="2" | The "Fonts" tab allows the definition of the standard font and the font color that will be used in the forms created by the back office. Usually, the user configure the general font of their organization with a color easily readable in the organization's colors.  
+
| colspan="2" | The "Fonts" tab allows the definition of the standard font and the font color that will be used in the forms created by the back office. Usually, the user configures the general font of their organization with a color easily readable in the organization's colors.  
  
−
L'onglet « Polices » permet de définir la police standard ainsi que la couleur de la police lesquelles seront utilisées dans les formulaires créés par le back-office. Généralement, les utilisateurs y configurent la police générale de leur organisation avec une couleur qui se lit bien à travers les couleurs de l'organisation.
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_015.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_014.png]]<br>
 
|-
 
|-
 
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''A''':</span> To open the menu to configure the font, click on the box of the line that must be edited.  
 
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''A''':</span> To open the menu to configure the font, click on the box of the line that must be edited.  
−
Pour ouvrir le menu pour configurer, il faut cliquer sur la case de la ligne qu'il faut ajuster.
+
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_016.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_015.png]]<br>
 
|-
 
|-
 
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> The "Font" option allows the setting of the text display.  
 
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> The "Font" option allows the setting of the text display.  
−
L'option « Police » permet de choisir l'apparence du texte.
+
 
 
|<span style="color: rgb(255, 0, 0);">'''C''':</span> The "Text color" option allows the user to choose the writing color in the forms and the homepage.  
 
|<span style="color: rgb(255, 0, 0);">'''C''':</span> The "Text color" option allows the user to choose the writing color in the forms and the homepage.  
  
−
L'option « Couleur du texte » permet de choisir la couleur des écritures dans les formulaires et la page d'accueil.
 
 
|-
 
|-
−
|<span style="color: rgb(255, 0, 0);">'''D''':</span> The "Palette" option allows the selection of the text color among the ones set in the last tab. It is used in several section of the back office.  
+
|<span style="color: rgb(255, 0, 0);">'''D''':</span> The "Palette" option allows the selection of the text color among the ones set in the last tab. It is used in several sections of the back office.  
  
−
L'option « Palette » permet de choisir la couleur du texte parmi les couleurs définies dans l'onglet précédent. Elle est utilisée dans plusieurs sections du Back-office.
 
 
|<span style="color: rgb(255, 0, 0);">'''E''':</span> The "Style" option allows the display of the text in bold ('''B''') or in italic (''I'').  
 
|<span style="color: rgb(255, 0, 0);">'''E''':</span> The "Style" option allows the display of the text in bold ('''B''') or in italic (''I'').  
−
L'option « Style » permet d'afficher le texte en gras ('''B''') ou en italique (''I'').
+
 
 
|-
 
|-
 
|<span style="color: rgb(255, 0, 0);">'''F''':</span> The "Size" allows the setting of the text size.  
 
|<span style="color: rgb(255, 0, 0);">'''F''':</span> The "Size" allows the setting of the text size.  
  
−
L'option « Taille » permet de déterminer la taille du texte.
+
 
 
|<span style="color: rgb(255, 0, 0);">'''G''':</span> The "Preview" section let the user preview the result of all the choices.  
 
|<span style="color: rgb(255, 0, 0);">'''G''':</span> The "Preview" section let the user preview the result of all the choices.  
  
−
La section « Aperçu » donne la chance de prévisualiser tous les choix précédemment effectués.
 
 
|}
 
|}
  
−
=== The "Homepage" tab / L'onglet « Page d'accueil » ===
+
=== The "Homepage" tab ===
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
 
| colspan="2" | The "Homepage" tab allows the configuration of colors and fonts used in the homepage.  
 
| colspan="2" | The "Homepage" tab allows the configuration of colors and fonts used in the homepage.  
  
−
L'onglet « Page d'accueil » permet de configurer les couleurs et les polices utilisées dans la page d'accueil.
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_017.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_016.png]]<br>
 
|-
 
|-
−
| <span style="color: rgb(255, 0, 0);">'''A''':</span> To choose the background of the homepage, go to the "Palette" option.
+
| <span style="color: rgb(255, 0, 0);">'''A''':</span> To choose the background color of the homepage, go to the "Palette" option.
  
−
Pour choisir la couleur de fond de la page d'accueil, il faut passer par l'option « Palette ».
 
 
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> The "Section header" allows the definition of the color, the size, the style and the background color of the section headers.  
 
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> The "Section header" allows the definition of the color, the size, the style and the background color of the section headers.  
  
−
L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section.
 
 
|-
 
|-
 
|<span style="color: rgb(255, 0, 0);">'''C''':</span> The "Section content" option allows the selection of the background of the section content. The font used in this part will be the standard one.  
 
|<span style="color: rgb(255, 0, 0);">'''C''':</span> The "Section content" option allows the selection of the background of the section content. The font used in this part will be the standard one.  
  
−
L'option « Contenu des sections » permet de choisir la couleur de fond du contenu des sections. La police utilisée sera la police standard.  
+
|<span style="color: rgb(255, 0, 0);">'''D''':</span> When the "Display title?" checkbox is checked, the "Title" section will be displayed.  
  
−
|<span style="color: rgb(255, 0, 0);">'''D''':</span> When the "Display title?" checkbox is checked, the title and the "Title" section will be displayed.
 
−
 
−
L'option « Afficher le titre? » permet de choisir si le titre sera affiché ou non. Lorsque cette option est activée, la section « Titre » est affichée.
 
 
|-
 
|-
 
|<span style="color: rgb(255, 0, 0);">'''E''':</span> The "Title" option helps to select the color, the size, the style and the background color of the title of the homepage.
 
|<span style="color: rgb(255, 0, 0);">'''E''':</span> The "Title" option helps to select the color, the size, the style and the background color of the title of the homepage.
  
−
L'option « Titre » permet de choisir la couleur, la taille, le style et la couleur de fond du titre de la page d'accueil.
 
 
|<span style="color: rgb(255, 0, 0);">'''F''':</span> The "Form name" option helps to set the color, the size and the style of the form name.  
 
|<span style="color: rgb(255, 0, 0);">'''F''':</span> The "Form name" option helps to set the color, the size and the style of the form name.  
−
 
−
L'option « Nom des formulaires » permet de déterminer la couleur, la taille et le style des noms des formulaires.
 
 
|-
 
|-
 
|<span style="color: rgb(255, 0, 0);">'''G''':</span> The "Description under form name" option helps to set the color, the size and the style of the description under the form name.  
 
|<span style="color: rgb(255, 0, 0);">'''G''':</span> The "Description under form name" option helps to set the color, the size and the style of the description under the form name.  
  
−
L'option « Description sous le nom des formulaires » permet de déterminer la couleur, la taille et le style des descriptions sous le nom des formulaires.
 
 
|<span style="color: rgb(255, 0, 0);">'''H''':</span> The "Active box border" option helps to set from the palette the color of the border of the active box. The active box is the box currently selected by a user.  
 
|<span style="color: rgb(255, 0, 0);">'''H''':</span> The "Active box border" option helps to set from the palette the color of the border of the active box. The active box is the box currently selected by a user.  
  
−
L'option « Contour des boîtes actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée.
 
 
|-
 
|-
 
| <span style="color: rgb(255, 0, 0);">'''I''':</span> The "Buttons" option allows the configuration of the background color, the text color and the style of the buttons of the homepage.  
 
| <span style="color: rgb(255, 0, 0);">'''I''':</span> The "Buttons" option allows the configuration of the background color, the text color and the style of the buttons of the homepage.  
  
−
L'option « Boutons » permet de configurer la couleur du texte, le style et la taille du texte des boutons de la page d'accueil. 
 
 
| <span style="color: rgb(255, 0, 0);">'''J''':</span> The "Links" option allows the configuration of the text color, the style and the size of the hyperlink of the homepage.  
 
| <span style="color: rgb(255, 0, 0);">'''J''':</span> The "Links" option allows the configuration of the text color, the style and the size of the hyperlink of the homepage.  
−
L'option « Liens » permet de configurer la couleur du texte, le style et la taille des liens hypertextes de la page d'accueil. 
 
 
|}
 
|}
  
−
=== L'onglet « Formulaire » ===
+
=== The "Form" tab ===
  
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
  
−
| colspan="2" | L'onglet « Formulaire » permet de configurer les couleurs et les polices utilisées dans les formulaires.
+
| colspan="2" | The "Form" tab allows the configuration of the colors and fonts used in the forms.  
  
 
|-
 
|-
  
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_018.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_017.png]]<br>
  
 
|-
 
|-
  
−
| <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour choisir la couleur de fond des formulaires, il faut passer par l'option « Palette ».
+
| <span style="color: rgb(255, 0, 0);">'''A''':</span> To select the background color of the forms, go to the "Palette" option.  
  
−
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section.
+
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> The "Section header" option allows the selection of the color, the size, and the background color of the section headers.  
  
 
|-
 
|-
  
−
|<span style="color: rgb(255, 0, 0);">'''C''':</span> L'option « Contenu des sections » permet de choisir la couleur de fond du contenu des sections. La police utilisée sera la police standard.
+
|<span style="color: rgb(255, 0, 0);">'''C''':</span> The "Section content" allows the selection of the background color of the section content. The font used will be the standard one.  
−
 
 
−
|<span style="color: rgb(255, 0, 0);">'''D''':</span> L'option « Barre d'étape » permet de choisir la couleur, la taille, le style et la couleur de fond de la barre d'étape.  
 
  
 +
|<span style="color: rgb(255, 0, 0);">'''D''':</span> The "Step bar" option allows the selection of the color, the size, the style and the background color of the step bar.
 
|-
 
|-
  
−
|<span style="color: rgb(255, 0, 0);">'''E''':</span> L'option « Barre d'étape (page courante) » permet de choisir la couleur, la taille, le style et la couleur de fond de la page active de la barre d'étape.  
+
|<span style="color: rgb(255, 0, 0);">'''E''':</span> The "Step bar (current page)" allows the selection of the color, the size, the style and the background color of the current page of the step bar.
  
−
 
+
|<span style="color: rgb(255, 0, 0);">'''F''':</span> The checkbox "Display the circle in the step bar" allows to display a circle in which there will be the number of the steps. This box must be checked to unlock the options <span style="color: rgb(255, 0, 0);">'''G'''</span> and <span style="color: rgb(255, 0, 0);">'''H''' </span>.
−
|<span style="color: rgb(255, 0, 0);">'''F''':</span> La case à cocher « Afficher le rond dans la barre d'étape » permet d'afficher un cercle dans lequel il y aura les numéros d'étapes. Il faut que cette case soit cochée pour voir les options <span style="color: rgb(255, 0, 0);">'''G'''</span> et <span style="color: rgb(255, 0, 0);">'''H''' </span>.
 
  
 
|-
 
|-
  
−
|<span style="color: rgb(255, 0, 0);">'''G''':</span> L'option « Barre d'étape rond » permet de choisir la couleur, la taille, le style et la couleur de fond du cercle dans la barre d'étape.
+
|<span style="color: rgb(255, 0, 0);">'''G''':</span> The "Step bar circle" allows the selection of the color, the size, the style and the background color of the circle in the step bar.
−
 
 
−
 
 
−
|<span style="color: rgb(255, 0, 0);">'''H''':</span> L'option « Barre d'étape rond(page courante) » permet de choisir la couleur, la taille, le style et la couleur de fond du cercle de la page active de la barre d'étape.  
 
  
 +
|<span style="color: rgb(255, 0, 0);">'''H''':</span> The "Step bar circle (Current page)" allows the selection of the color, the size, the style and the background color of the current page of the step bar.
 
|-
 
|-
  
−
|<span style="color: rgb(255, 0, 0);">'''I''':</span> L'option « Afficher le titre? » permet de choisir si le titre sera affiché ou non. LIl faut que cette option soit activée pour que la section « Titre » soit affichée.
+
|<span style="color: rgb(255, 0, 0);">'''I''':</span> The "Display the title?" option allows the title to be displayed or not. The option must be activated to display the "Title" section.  
−
 
 
  
−
|<span style="color: rgb(255, 0, 0);">'''J''':</span> L'option « Titre » permet de choisir la couleur, la taille, le style et la couleur de fond du titre de la page d'accueil.
+
|<span style="color: rgb(255, 0, 0);">'''J''':</span> The "Title" option allows the selection of the color, the size, the style and the background color of the title of the form.  
  
 
|-
 
|-
  
−
|<span style="color: rgb(255, 0, 0);">'''K''':</span> L'option « Titre des participants » permet de déterminer la couleur, la taille et le style des titres des participants.  
+
|<span style="color: rgb(255, 0, 0);">'''K''':</span> The "Participants title" allows the selection of the color, the size and the style of the participants title.  
  
  
−
|<span style="color: rgb(255, 0, 0);">'''L''':</span> L'option « Contour des boîtes actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée.  
+
|<span style="color: rgb(255, 0, 0);">'''L''':</span> The "Active box border" option allows the selection of the color from the  colors already set in the palette. An active is the currently selected box.  
  
 
|-
 
|-
  
−
|<span style="color: rgb(255, 0, 0);">'''M''':</span> L'option « Boutons » permet de configurer la couleur de fond et la couleur de texte ainsi que le style des boutons des formulaires.
+
|<span style="color: rgb(255, 0, 0);">'''M''':</span> The "Buttons" option allows the configuration of the background color, the text color and the style used for the form buttons.
 +
 
 +
|<span style="color: rgb(255, 0, 0);">'''N''':</span> The "Button (Confirm)" option allows the configuration of the background color, the text color and the style used for the form confirm button.  
  
−
|<span style="color: rgb(255, 0, 0);">'''N''':</span> L'option « Bouton (confirmer) » permet de configurer la couleur de fond
 
−
et la couleur de texte ainsi que le style du bouton confirmer des formulaires. 
 
 
|-
 
|-
−
| colspan="2" |<span style="color: rgb(255, 0, 0);">'''O''':</span> L'option « Liens » permet de configurer la couleur du texte, le style et la taille du texte des liens hypertextes des formulaires.
+
| colspan="2" |<span style="color: rgb(255, 0, 0);">'''O''':</span> The "Links" option allows the configuration of the text color, the style and the size of the hyperlink of the homepage.  
 
|}
 
|}
  
−
=== L'onglet « CSS » ===
+
=== The "CSS" tab ===
 +
This option has been removed for the creation, but the user will be able to use it once a theme is named.
  
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
  
−
| colspan="2" | L'onglet « CSS » permet de configurer les couleurs et les polices utilisées dans les formulaires.
+
| colspan="2" | The "CSS" tab allows the configuration of the colors and the fonts used in the forms.  
  
 
|-
 
|-
  
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_019.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_018.png]]<br>
  
 
|-
 
|-
  
−
| <span style="color: rgb(255, 0, 0);">'''A''':</span> CSS est pour « Cascading Style Sheet ». C'est un langage de programmation qui ne sert qu'à ajuster les éléments visuels. Il n'est pas recommandé de toucher à cette fenêtre.  
+
| <span style="color: rgb(255, 0, 0);">'''A''':</span> CSS is for "Cascading Style Sheet". It is a programming language which is only used to adjust visual elements. It is not recommended to touch this window.
 +
 
 +
 
 +
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> If the user is really at ease and knows the CSS language, it is possible to remove all tabs only to keep the CSS tab. To do so, only click on the "Use my CSS" box.  
  
−
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> Si jamais l'utilisateur est très à l'aise et qu'il connait la programmation en CSS, il est possible d'éliminer tous les onglets (Options, palette, polices, page d'accueil, formulaire) pour n'avoir que l'onglet CSS. Pour ce faire, simplement cliquer sur la case « Utiliser mon CSS ».
 
  
−
'''ATTENTION:''' Lorsque cette case est cochée et décochée successivement et qu'aucune information n'a été sauvegardée encore, aucun changement ne sera sauvegardé et l'utilisateur sera retourné à la page pour ajouter des thèmes.
 
 
|}
 
|}
  
−
== Ajouter des fichiers dans le back-office ==
+
== Add files in the back office ==
  
−
Pour ajouter des fichiers, il faut cliquer sur la section « Mes fichiers » et cliquer sur ajouter.
+
To add files, click on the "My files" section and click on add.
  
−
[[Fichier:ProDon5_BackOffice_020.png]]
+
[[File:ProDon5_BackOffice_019.png]]
  
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
| colspan="2" |  
+
| colspan="2" | Then this window will open:  
−
Ensuite, cette fenêtre s'ouvrira:
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_021.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_020.png]]<br>
 
|-
 
|-
−
| colspan="2" | Il faudra alors aller trouver les images qui doivent être ajoutées. Ensuite, la fenêtre de recadrage apparaitra:
+
| colspan="2" | The user will have to go find the pictures that will have to be added. Then, the cropper will appear:
 +
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_031.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_021.png]]<br>
 
|}
 
|}
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
| colspan="2" |  
+
| colspan="2" | Then this window will open:
−
Ensuite, cette fenêtre ouvrira:
+
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_022.png]]<br>
+
| colspan="2" | [[File:ProDon5 BackOffice_022.png]]<br>
 
|-
 
|-
−
| <span style="color: rgb(255, 0, 0);">'''A''':</span> Ici, l'utilisateur peut voir le fichier qui vient d'être ajouté.  
+
| <span style="color: rgb(255, 0, 0);">'''A''':</span> Here, the user can see the file that has been added.  
−
| <span style="color: rgb(255, 0, 0);">'''B''':</span> L'utilisateur peut voir la quantité d'espace que prennent ses fichiers.  
+
 
 +
| <span style="color: rgb(255, 0, 0);">'''B''':</span> The user can see how much storage space used by the files.  
 +
 
 
|-
 
|-
−
| <span style="color: rgb(255, 0, 0);">'''C''':</span> Pour retirer un fichier, il faut cliquer sur le bouton supprimer.  
+
| <span style="color: rgb(255, 0, 0);">'''C''':</span> To remove a file, click on the delete button.  
−
| <span style="color: rgb(255, 0, 0);">'''D''':</span> Une nouveauté est qu'en plaçant le pointeur de la souris sur le lien de l'image, il est maintenant possible de voir l'image sans devoir l'ouvrir.
+
 
 +
| <span style="color: rgb(255, 0, 0);">'''D''':</span> A new feature is by placing the mouse on the picture link, it is now possible to have a preview without having to open it.  
 +
 
 
|}
 
|}
  
−
== Créer un groupe d'images dans le back-office ==
+
== Create a picture group in the back office ==
  
−
Pour créer un groupe d'images, il faut cliquer sur la section « Mes groupes d'images » et cliquer sur ajouter.  
+
To create a picture group, the user will have to click on the "My picture groups" section and click on add.
  
−
[[Fichier:ProDon5_BackOffice_023.png]]
 
  
−
=== L'onglet « Option » ===
+
[[File:ProDon5_BackOffice_031.png]]
 +
 
 +
=== The "Option" tab ===
 
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_024.png]]<br>
+
| colspan="2" | [[File:ProDon5_BackOffice_023.png]]<br>
  
 
|-
 
|-
−
| width="50%" |<span style="color: rgb(255, 0, 0);">'''A''':</span> C'est ici qu'il faut nommer le groupe d'images.
+
| width="50%" |<span style="color: rgb(255, 0, 0);">'''A''':</span> Here is where the user shall name the picture group.  
−
| <span style="color: rgb(255, 0, 0);">'''B''':</span> Cette case à cocher permet d'utiliser ce groupe d'images par défaut.  
+
 
 +
| <span style="color: rgb(255, 0, 0);">'''B''':</span> This checkbox allows this picture group to be used by default.  
 +
 
 
|}
 
|}
  
−
=== L'onglet « Image de fond ===
+
=== The "Background picture" tab ===
  
 
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_025.png]]<br>
+
| colspan="2" | [[File:ProDon5_BackOffice_024.png]]<br>
 
|-
 
|-
−
| width="50%" |<span style="color: rgb(255, 0, 0);">'''A''':</span> Cette option permet de définir l'image de fond de la page d'accueil pour les ordinateurs.  
+
| width="50%" |<span style="color: rgb(255, 0, 0);">'''A''':</span> This option allows the setting of the background picture of the homepage for computers.
−
|<span style="color: rgb(255, 0, 0);">'''B''':</span> Cette option permet de définir l'image de fond de la page d'accueil pour les tablettes.  
+
 
 +
|<span style="color: rgb(255, 0, 0);">'''B''':</span> This option allows the setting of the background picture of the homepage for tablet PCs.
 +
 
 
|-
 
|-
−
|<span style="color: rgb(255, 0, 0);">'''C''':</span> Cette option permet de définir l'image de fond de la page d'accueil pour les cellulaires.  
+
|<span style="color: rgb(255, 0, 0);">'''C''':</span> This option allows the setting of the background picture of the homepage for cellphones.
−
|<span style="color: rgb(255, 0, 0);">'''D''':</span> Cette option permet de définir l'image de fond des formulaires pour les ordinateurs.  
+
 
 +
|<span style="color: rgb(255, 0, 0);">'''D''':</span> This option allows the setting of the background picture of the forms for computers.  
 +
 
 
|-
 
|-
−
|<span style="color: rgb(255, 0, 0);">'''E''':</span> Cette option permet de définir l'image de fond des formulaires pour les tablettes.  
+
|<span style="color: rgb(255, 0, 0);">'''E''':</span> This option allows the setting of the background picture of the forms for tablet PCs.  
−
|<span style="color: rgb(255, 0, 0);">'''F''':</span> Cette option permet de définir l'image de fond des formulaires pour les cellulaires.  
+
|<span style="color: rgb(255, 0, 0);">'''F''':</span> This option allows the setting of the background picture of the forms for cellphones.
 +
|-
 +
| colspan="2" | '''''NOTE:''''' For the background pictures, the maximum suggested size for the background pictures is of 1920 x 1080 pixels. If the picture size is greater than this, it may be possible that some browsers will not load it.  
 
|}
 
|}
  
−
=== L'onglet « Image d'entête » ===
+
=== The "Header picture" tab ===
  
 
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_026.png]]<br>
+
| colspan="2" | [[File:ProDon5_BackOffice_025.png]]<br>
  
 
|-
 
|-
−
| width="50%" |<span style="color: rgb(255, 0, 0);">'''A''':</span> Cette option permet de définir l'image d'entête pour les ordinateurs.  
+
| width="50%" |<span style="color: rgb(255, 0, 0);">'''A''':</span> This option allows the setting the header picture when the forms will be called by a computer.
 +
 
 +
 
 +
|<span style="color: rgb(255, 0, 0);">'''B''':</span> This box allows the setting of the picture size by using percentages.  
  
−
|<span style="color: rgb(255, 0, 0);">'''B''':</span> Cette option permet de définir les dimensions de l'image.
 
 
|-
 
|-
−
|<span style="color: rgb(255, 0, 0);">'''C''':</span> Cette option permet de définir où l'image sera alignée dans l'entête.  
+
|<span style="color: rgb(255, 0, 0);">'''C''':</span> This box allows the setting of the alignment of the picture.  
−
|<span style="color: rgb(255, 0, 0);">'''D''':</span> Cette option permet de définir l'image d'entête pour les tablettes.  
+
 
 +
|<span style="color: rgb(255, 0, 0);">'''D''':</span> This option allows the setting the header picture when the forms will be called by a tablet PCs.  
 +
 
 
|-
 
|-
−
|<span style="color: rgb(255, 0, 0);">'''E''':</span> Cette option permet de définir l'image d'entête pour les cellulaires.  
+
|<span style="color: rgb(255, 0, 0);">'''E''':</span> This option allows the setting the header picture when the forms will be called by a cellphone.  
−
|<span style="color: rgb(255, 0, 0);">'''F''':</span> Il est important de considérer cet avertissement. Il n'y a pas vraiment de limite concernant la hauteur, mais la largeur des images d'entête ne doit pas dépasser 960 pixels.  
+
 
 +
|<span style="color: rgb(255, 0, 0);">'''F''':</span> Please consider this important warning. There is not really a limit about the height, but the width of the header pictures must not exceed 960 pixels.  
 +
 
 
|}
 
|}
  
−
=== L'onglet « Réseaux sociaux » ===
+
=== The "Social Networks" tab ===
  
  
Line 567: Line 513:
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_027.png]]<br>
+
| colspan="2" | [[File:ProDon5_BackOffice_026.png]]<br>
  
 
|-
 
|-
−
|Cette option permet de choisir l'image qui apparaitra sur les réseaux sociaux quand le formulaire ou la page d'accueil sera partagé.
+
|This option allows the selection of the picture that will appear on the social network when the forms or the homepage will be shared.  
 +
 
 
|-
 
|-
−
|'''''Note :''''' De plus, la grandeur minimale des images de réseaux sociaux est de 600 x 315 pixels. La taille recommandée est de 1200 x 630 pixels. Pour tout autre taille, il est recommandé de suivre le ratio 1.91:1.  
+
|'''''Note :''''' Furthermore, the minimal size for social network picture is of 600 x 315 pixels. The recommanded size is of 1200 x 630 pixels. For any other size, it is recommanded to follow the 1.91:1 ratio.
  
 
|}
 
|}
  
−
== Envoyer les formulaires en production ==
+
== Send forms into production ==
 +
After having created all the basics of the back office, it is time to send everything into production.
  
−
Après avoir créé toutes les bases du back-office, il est temps d'envoyer le tout en production.
 
  
 
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
| colspan="2" | Alors, partout où cette section est apparue, il faut cliquer sur le bouton « Production ».  
+
| colspan="2" | Then, everywhere this section is appeared, click on the "Production" button.  
 +
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_028.png]]
+
| colspan="2" | [[File:ProDon5_BackOffice_027.png]]
 
|-
 
|-
−
| colspan="2" | Lorsque le bouton est rouge, le formulaire/le groupe d'images n'a jamais été mis en production.  
+
| colspan="2" | When the button is red, the form/picture group has never been into production.  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_029.png]]
+
| colspan="2" | [[File:ProDon5_BackOffice_028.png]]
 
|-
 
|-
−
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A'''</span>: Lorsque le bouton est jaune, le formulaire/le groupe d'images a été modifié et les modifications ne sont pas encore appliquées, donc elles ne sont pas en production.  
+
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A'''</span>: When the button is yellow, the form/picture group has been edited and the edits are not applied yet, so they are not into production.  
−
|<span style="color: rgb(255, 0, 0);">'''B'''</span>: Nouveauté: Il est maintenant possible d'annuler les changements avant que le formulaire soit envoyé en production.  
+
 
 +
|<span style="color: rgb(255, 0, 0);">'''B'''</span>: A new feature: It is now possible to cancel the edits before sending the form into production.  
 
|-
 
|-
−
| colspan="2" |<span style="color: rgb(255, 0, 0);">'''C'''</span>: Nouveauté: Après avoir sauvegardé, une petite section apparait pour montrer si l'opération a fonctionné ou non.  
+
| colspan="2" |<span style="color: rgb(255, 0, 0);">'''C'''</span>: A new feature: After having saved, a section appears to show if the operation has worked.  
 +
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_040.png]]
+
| colspan="2" | [[File:ProDon5_BackOffice_029.png]]
 
|-
 
|-
−
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A'''</span>: Quand le bouton est vert, le formulaire/le groupe d'images est en production et toutes les modifications sont en fonctions.
+
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A'''</span>: When the button is green, the form/picture group is in production and all edits are used.  
−
| <span style="color: rgb(255, 0, 0);">'''B'''</span>: Quand cette erreur se produit, il faut contacter le soutien technique chez '''''Logilys'''''. Malheureusement pour l'utilisateur, toute modification sera à recommencer
+
| <span style="color: rgb(255, 0, 0);">'''B'''</span>: When this error happens, contact '''''Logilys'''''' tech support. Unfortunately  for the user, all edits will be erased.
 
|}
 
|}
  
−
== Lier le back-office dans ProDon ==
+
== Link the back office into ProDon ==
  
 
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
−
| colspan="2" |  
+
| colspan="2" | Then go back to this screen:
−
Ensuite, cette fenêtre ouvrira:
+
 
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_030.png]]
+
| colspan="2" | [[File:ProDon5_BackOffice_030.png]]
  
 
|-
 
|-
−
| width="50%" |<span style="color: rgb(255, 0, 0);">'''A''':</span> Dans cette case, l'utilisateur pourra sélectionner le thème qu'il vient de créer sur le back-office.  
+
| width="50%" |<span style="color: rgb(255, 0, 0);">'''A''':</span> In this box, the user will be able to select the theme just created on the back office.  
−
| <span style="color: rgb(255, 0, 0);">'''B''':</span> Dans cette case, l'utilisateur pourra sélectionner le groupe d'images qu'il souhaite utiliser quand la page d'accueil et les formulaires sont en français.  
+
| <span style="color: rgb(255, 0, 0);">'''B''':</span> In this box, the user will be able to select the picture group that will have to be used in the French forms and the French homepage.  
 +
 
 
|-
 
|-
  
−
| <span style="color: rgb(255, 0, 0);">'''C''':</span> Dans cette case, l'utilisateur pourra sélectionner le groupe d'images qu'il souhaite utiliser quand la page d'accueil et les formulaires sont en anglais.  
+
| <span style="color: rgb(255, 0, 0);">'''C''':</span> In this box, the user will be able to select the picture group that will have to be used in the English forms and the English homepage.
  
−
| <span style="color: rgb(255, 0, 0);">'''D''':</span> Il ne faut pas oublier d'ajuster les libellés en français et en anglais, car ce seront des éléments qui apparaitront en ligne.  
+
| <span style="color: rgb(255, 0, 0);">'''D''':</span> Do not forget to adjust the French and the English labels, because these elements will appear online.  
 
|}
 
|}
  
−
{{BasPage_ProDon_Version|5.0.4}}<br>
+
{{Footer_ProDon_Version|5.0.4}}<br>

Latest revision as of 08:33, 27 April 2017

Back office


CAUTION: This document is conceived for the version 5.0.4 of ProDon. For the version 5.0.3, click here.


Introduction

The back office is linked to the Online Donation module. It allows the management of all graphic elements of the homepage and of the forms.This is where one will be able to edit the font, the colors and the pictures that will appear on the IMakeAnOnlineDonation of the organization.

Creation of a LogiZone account

A LogiZone account is a profile once given the right accesses will allow the user to log in to the back office.

To create a LogiZone account, go to the back office.

To do so, go to "Web forms management".

Click on the "Configuration" menu, then select the "Web form button.png Web Forms".
ProDon5 BackOffice 001.png


After clicking on "Web form button.png Web Forms", this window will open.
ProDon5 BackOffice 002.png


Once this window is open, select the button Earth button.png and select "Back office".
ProDon5 BackOffice 006.png


Once on the page to the back office, the user will have to create their LogiZone account if they do not have one.
ProDon5 BackOffice 003.png

A: Allows the user to log to an active LogiZone by entering the user name or the email address.

B: Enter the password of the existing LogiZone.
C: Use this link to change the password of the existing LogiZone. D: Allows the creation of a new LogiZone account.
E: Help to get more information about the LogiZone account.


Back office accesses

To access the back office, one must first have a LogiZone account. Once the LogiZone account created, go to ProDon to give the access to the back office to this account.

From ProDon, give the access to the LogiZone account which will be able to edit the back office.

To do so, one must go to the "Web form button.png Web form management".

Click on the "Configuration" menu, then select "Web form button.png Web Forms".

ProDon5 BackOffice 001.png


After clicking on "Web form button.png Web Forms", this window will open.
ProDon5 BackOffice 002.png
Then, click on the button Homepage Configuration.png.


In this window, go to the "Access IMakeAnOnlineDonation" tab and click on the Button +.png to add a user.
ProDon5 BackOffice 004.png
NOTE: From the bottom of this window, it is possible to create an encryption key. It is not necessary to have one.


Then, this window will open:

ProDon5 BackOffice 005.png
A: In this box, enter the email that will be used to access the LogiZone. B: Usually, enter the name of the person who will use this email to access the LogiZone.
C: The "Back office" checkbox is used to grant the access to let the user work on the back office. D: The "Online donation list" checkbox is used to grant the access to let the user see the list of online donations.
E: When there is an encryption key, this box give the access to the user to do integration on demand. F: Write the user's password for integration in this box.



The email linked to the LogiZone account will appear here.

ProDon5 BackOffice 007.png

Create themes in the back office

Then, redo the steps of the LogiZone creation, but in place of creating a new one, connect to the session.

Normally, the user will get to this window:

ProDon5 BackOffice 008.png
A: Please be sure to be in the right section. B: Click on this button to create a new theme.


This window will open:
ProDon5 BackOffice 009.png
A: This section allows the duplication of an existing theme. It is in the drop-down list on the left that the theme to be duplicated must be selected. B: To create a new theme, click on the "New" button­.

The "Option" tab

Then, this window opens:
ProDon5 BackOffice 010.png
A: This section allows the choice of the theme type that will be created. The possible choices are: create a theme for the homepage and the forms, create a theme for the homepage only or create a theme for the forms only. B: This section allows the naming of the theme.
C: This checkbox allows this theme to be applied by default. D: This checkbox allows the display of the header only on the first page of the form.
E: This checkbox allows the display of the title only on the first page of the form. F: In all windows, this button return the user to the overview of everything in this section. For example, when a user is in the themes, this button will return to the overview of all themes of the back office.
G: This button allows to save the edits. Furthermore, every time a change is detected in a section, when the user switch to another section, the back office will ask to save the changes.

The "Palette" tab

The "Palette" tab allows the definition of the colors that will be used in the other tabs of the back office. Usually, the user configures the organization's colors. With the version 5.0.4, this tool has been split into 2 columns and each of these columns calls a different tool.

ProDon5 BackOffice 011.png
A: To get the most precise colors, the back office system use the rgba. The numbers be between 0 and 255. The first number is the amount of red, the second is the amount of green, the third is the amount of blue and the last one is the opacity (alpha). The more this number is close to 1.0, the more the color will be opaque, the more it is near to 0.0, the more this color will be transparent. B: If the user does not have the numbers for their colors, this section uses another tool. This system of the back office uses the rgba, hsla and hex functions.
By clicking on A of the last section, this window will open.
ProDon5 BackOffice 012.png
A: This option allows the setting of the amount of red. B: This option allows the setting of the amount of green.
C: This option allows the setting of the amount of blue. D: This option allows the setting of the color transparency.
E: This box allows the preview of the result.


By clicking on B of the first section, this window will open. This section of the back office uses the rgba, hsla and hex functions.
ProDon5 BackOffice 013.png
A: This option allows the adjustment of the color. B: This option allows the adjustment of the color saturation.
C: This option allows the adjustment of the luminosity. D: This option allows the adjustment of the color transparency.
E: This box allows the setting of the color in hexadecimal. F: This box allows the setting of the color in rgba.
G: This box allows the setting of the color in hsla. By using the 4 sliders, it is the same thing as working in hsla. H: By clicking on this box, the user will have a preview of the selected color and will see 4 lighter possibilities.
I: By clicking on this box, the user will have a preview of the selected color and will see 4 darker possibilities. J: This percentage allows the adjustment of the color shading of the "Lighten" and "Darken" options.
K: This box allows a preview of 3 colors potentially complementary to the selected color. Note: The color on the right is the original color.

The "Fonts" tab

The "Fonts" tab allows the definition of the standard font and the font color that will be used in the forms created by the back office. Usually, the user configures the general font of their organization with a color easily readable in the organization's colors.
ProDon5 BackOffice 014.png
A: To open the menu to configure the font, click on the box of the line that must be edited.
ProDon5 BackOffice 015.png
B: The "Font" option allows the setting of the text display. C: The "Text color" option allows the user to choose the writing color in the forms and the homepage.
D: The "Palette" option allows the selection of the text color among the ones set in the last tab. It is used in several sections of the back office. E: The "Style" option allows the display of the text in bold (B) or in italic (I).
F: The "Size" allows the setting of the text size.


G: The "Preview" section let the user preview the result of all the choices.

The "Homepage" tab

The "Homepage" tab allows the configuration of colors and fonts used in the homepage.
ProDon5 BackOffice 016.png
A: To choose the background color of the homepage, go to the "Palette" option. B: The "Section header" allows the definition of the color, the size, the style and the background color of the section headers.
C: The "Section content" option allows the selection of the background of the section content. The font used in this part will be the standard one. D: When the "Display title?" checkbox is checked, the "Title" section will be displayed.
E: The "Title" option helps to select the color, the size, the style and the background color of the title of the homepage. F: The "Form name" option helps to set the color, the size and the style of the form name.
G: The "Description under form name" option helps to set the color, the size and the style of the description under the form name. H: The "Active box border" option helps to set from the palette the color of the border of the active box. The active box is the box currently selected by a user.
I: The "Buttons" option allows the configuration of the background color, the text color and the style of the buttons of the homepage. J: The "Links" option allows the configuration of the text color, the style and the size of the hyperlink of the homepage.

The "Form" tab

The "Form" tab allows the configuration of the colors and fonts used in the forms.
ProDon5 BackOffice 017.png
A: To select the background color of the forms, go to the "Palette" option. B: The "Section header" option allows the selection of the color, the size, and the background color of the section headers.
C: The "Section content" allows the selection of the background color of the section content. The font used will be the standard one. D: The "Step bar" option allows the selection of the color, the size, the style and the background color of the step bar.
E: The "Step bar (current page)" allows the selection of the color, the size, the style and the background color of the current page of the step bar. F: The checkbox "Display the circle in the step bar" allows to display a circle in which there will be the number of the steps. This box must be checked to unlock the options G and H .
G: The "Step bar circle" allows the selection of the color, the size, the style and the background color of the circle in the step bar. H: The "Step bar circle (Current page)" allows the selection of the color, the size, the style and the background color of the current page of the step bar.
I: The "Display the title?" option allows the title to be displayed or not. The option must be activated to display the "Title" section. J: The "Title" option allows the selection of the color, the size, the style and the background color of the title of the form.
K: The "Participants title" allows the selection of the color, the size and the style of the participants title.


L: The "Active box border" option allows the selection of the color from the colors already set in the palette. An active is the currently selected box.
M: The "Buttons" option allows the configuration of the background color, the text color and the style used for the form buttons. N: The "Button (Confirm)" option allows the configuration of the background color, the text color and the style used for the form confirm button.
O: The "Links" option allows the configuration of the text color, the style and the size of the hyperlink of the homepage.

The "CSS" tab

This option has been removed for the creation, but the user will be able to use it once a theme is named.

The "CSS" tab allows the configuration of the colors and the fonts used in the forms.
ProDon5 BackOffice 018.png
A: CSS is for "Cascading Style Sheet". It is a programming language which is only used to adjust visual elements. It is not recommended to touch this window.


B: If the user is really at ease and knows the CSS language, it is possible to remove all tabs only to keep the CSS tab. To do so, only click on the "Use my CSS" box.


Add files in the back office

To add files, click on the "My files" section and click on add.

ProDon5 BackOffice 019.png


Then this window will open:
ProDon5 BackOffice 020.png
The user will have to go find the pictures that will have to be added. Then, the cropper will appear:
ProDon5 BackOffice 021.png
Then this window will open:
ProDon5 BackOffice 022.png
A: Here, the user can see the file that has been added. B: The user can see how much storage space used by the files.
C: To remove a file, click on the delete button. D: A new feature is by placing the mouse on the picture link, it is now possible to have a preview without having to open it.

Create a picture group in the back office

To create a picture group, the user will have to click on the "My picture groups" section and click on add.


ProDon5 BackOffice 031.png

The "Option" tab

ProDon5 BackOffice 023.png
A: Here is where the user shall name the picture group. B: This checkbox allows this picture group to be used by default.

The "Background picture" tab

ProDon5 BackOffice 024.png
A: This option allows the setting of the background picture of the homepage for computers. B: This option allows the setting of the background picture of the homepage for tablet PCs.
C: This option allows the setting of the background picture of the homepage for cellphones. D: This option allows the setting of the background picture of the forms for computers.
E: This option allows the setting of the background picture of the forms for tablet PCs. F: This option allows the setting of the background picture of the forms for cellphones.
NOTE: For the background pictures, the maximum suggested size for the background pictures is of 1920 x 1080 pixels. If the picture size is greater than this, it may be possible that some browsers will not load it.

The "Header picture" tab

ProDon5 BackOffice 025.png
A: This option allows the setting the header picture when the forms will be called by a computer.


B: This box allows the setting of the picture size by using percentages.
C: This box allows the setting of the alignment of the picture. D: This option allows the setting the header picture when the forms will be called by a tablet PCs.
E: This option allows the setting the header picture when the forms will be called by a cellphone. F: Please consider this important warning. There is not really a limit about the height, but the width of the header pictures must not exceed 960 pixels.

The "Social Networks" tab

ProDon5 BackOffice 026.png
This option allows the selection of the picture that will appear on the social network when the forms or the homepage will be shared.
Note : Furthermore, the minimal size for social network picture is of 600 x 315 pixels. The recommanded size is of 1200 x 630 pixels. For any other size, it is recommanded to follow the 1.91:1 ratio.

Send forms into production

After having created all the basics of the back office, it is time to send everything into production.


Then, everywhere this section is appeared, click on the "Production" button.
ProDon5 BackOffice 027.png
When the button is red, the form/picture group has never been into production.
ProDon5 BackOffice 028.png
A: When the button is yellow, the form/picture group has been edited and the edits are not applied yet, so they are not into production. B: A new feature: It is now possible to cancel the edits before sending the form into production.
C: A new feature: After having saved, a section appears to show if the operation has worked.
ProDon5 BackOffice 029.png
A: When the button is green, the form/picture group is in production and all edits are used. B: When this error happens, contact Logilys' tech support. Unfortunately for the user, all edits will be erased.

Link the back office into ProDon

Then go back to this screen:
ProDon5 BackOffice 030.png
A: In this box, the user will be able to select the theme just created on the back office. B: In this box, the user will be able to select the picture group that will have to be used in the French forms and the French homepage.
C: In this box, the user will be able to select the picture group that will have to be used in the English forms and the English homepage. D: Do not forget to adjust the French and the English labels, because these elements will appear online.

Document name: ProDon:Back office
Version : 5.0.4


Retrieved from "http://wikien.logilys.com/index.php?title=ProDon:Back_office&oldid=9015"