Aller à : navigation, rechercher

Personnaliser vos écrans


Présentation

Ce tutoriel présente comment personnaliser vos écrans Maarch Courrier avec des images de votre choix. La personnalisation de l'écran peut se faire par des images ou par un champ lexical adapté à votre structure. Vous pouvez ainsi modifier certains libellés au profit d'un vocabulaire métier qui faciliterait le travail des utilisateurs. L'application personnalisée suscite l'adhésion des utilisateurs.

Mécanisme

Personnaliser l'application revient à ajouter une surcouche au socle de base. Dans cette surcouche sont présents tous les éléments qu'on souhaite personnaliser : les images, les textes, les fonctionnalités. Maarch Courrier vérifie avant chaque affichage, si une surcouche n'est pas présente dans le répertoire. Les éléments surcouchés sont affichés en priorité. S'il n'y a pas de surcouche, le socle de base est affiché. La personnalisation se fait en plusieurs étapes :

   . La création du répertoire custom
   . La création des dossiers à surcoucher
   . L'insertion des fichiers personnalisés.

Création du custom

Placer le dossier custom à la racine de Maarch Courrier.

Sous ubuntu

  mkdir custom


Note

Attention : aux droits du répertoire : chown -R www-data:www-data custom/ chmod -R 775 custom/


--> Fichier custom.xml


Ce fichier permet de faire le lien entre le dossier custom qu'on crée et le socle standard de Maarch Courrier. Placer le à la racine du dossier custom.

  <?xml version="1.0" encoding="utf-8" ?>
    <root>
      <custom>
        <custom_id>custom_blois</custom_id>        --nom du répertoire contenu dans le custom-->
         <ip></ip>                                 --Adresse ip du serveur -->
         <external_domain></external_domain>
         <domain></domain>                         -- Domaine-->
         <path>maarch_courrier</path> -- Nom de dossier socle de base, celui dans le répertoire web-->
      </custom>
  </root>


Custom.gif

Création du dossier contenant les images personnalisées

Placer le dossier img dans le custom tout en respectant l'arborescence. Créer le dossier parent des fichiers customisés dans le répertoire custom.

 custom/custom_blois/apps/maarch_entreprise/img/

Importer ensuite les images dans le dossier img.

Note

Attention : Les images doivent posséder le même nom que celle des fichiers standard


Création du dossier contenant le fichier css

Le fichier css permet de travailler sur la taille des images, la couleur du texte ou la position. Le fichier css styles.css de l'application maarch se situe dans

 apps/maarch_entreprise/css/styles.css

copiez-le. Creez un répertoire css à coté du répertoire img que vous avez précédemment créé dans le répertoire custom.

 custom/custom_blois/apps/maarch_entreprise/css/

Puis collez le fichier styles.css dans ce répertoire.

Changer les logos : modification du logo de la page de connexion (default_maarch.gif)

Dans le répertoire situé :

 custom/custom_blois/apps/maarch_entreprise/img/

Ajouter votre logo que vous aurez renommé : "default_maarch.gif". Votre image doit faire en taille environ 340x220 pixels.

Pour régler le positionnement et la taille de votre image, vous devez configurer le fichier style.css :
#loginpage { 
width: 300px; 
height: 350px; 
margin-left: -150px;
margin-top: -175px; 
left: 50%; 
top: 50%; 
position: absolute; 
}

Accueil.jpg

Changer les logos : modification du logo de la page d'accueil (default_maarch.gif)

Dans la page d'accueil, il y a le logo de l'application Maarch situé en haut à droite. Ce logo est personnalisable. Pour ce faire, vous devez ouvrir le fichier styles.css. Recherchez la balise

  #nav #logo{
   float: right;
   right: 0px;
   position: absolute;
   margin: 0px;
   padding-right: 0px;
   padding-top: 0px;
   height: 70px;
   width: 236px;
   background: url(static.php?filename=default_maarch.gif) #f2f2f2;
   background-size: 90%;
   background-position: center;
   background-repeat: no-repeat;
   }

puis modifiez la ligne background en indiquant le nom de votre image que vous aurez préalablement installée dans le répertoire des images du custom.

Changer les couleurs d'icônes des raccourcis

.mCdarkGrey{
   color: #58585A;
}


Modifiez le champs color.

Changer la police des liens

Il est possible de configurer la police des liens.

1. Permet de donner une autre couleur aux liens non focus.

  a, a:link, a:visited, a:hover {
   color: #666;  
   text-decoration: none;
  }

Modifiez le champs color

2. Code permettant de configurer la police des liens lorsque l'on focus le champs.

  a:hover {
   color: #1B99C4; 
  }

Changer les couleurs des bandeaux pleins

L'application maarch possède plusieurs bandeaux. Ces bandeaux sont personnalisables. Dans le fichier styles.css :


1. Code permettant de configurer le bandeau situé tout en haut de l'application.

 #nav {
   clear: both;
   position: relative;
   width: 99.8%;
   margin-bottom: 0px;
   margin-left: 1px;
   height: 70px;
   margin-top: 3px;
   min-width: 1000px;
   border:solid 2px rgb(0,55,80);
   background: rgb(0,55,80);
}

Modifiez la ligne contenant border et background.

2. Code permettant de configurer le message contenu dans le bandeau.

  #content h1 {
   color: rgb(0,55,80);
   font-weight: bold;
   font-size: 1.3em;
   text-align: left;
   letter-spacing: 0.1em;
   height: 1.6em;
   position: absolute;
   padding: 0px;
   top: 38px;
   left: 280px;
   width: 80%;
  }

Modifiez la ligne contenant color.

3. Code permettant de configurer les panels (Recherche rapide, Mes corbeilles, Raccourcis, mes derniers courriers)

 .block h2 {
   background-color: rgb(0,55,80);  Change la couleur de la frise du panel
   padding: 0.5em;
   margin-left: -10px;
   margin-right: -10px;
   margin-top: -10px;
   margin-bottom: 10px;
   color:#ffffff;
   }
  .block 
  {
  padding: 0px;
  color: #666;
  background-color: #CEE9F1;  Permet de changer le fond du panel
  border-top: solid 2px #FDD16C; Permet de changer la bordure haute du panel
  border-bottom: solid 2px #FDD16C; Permet de changer la bordure basse du panel
  padding:10px;
  }

Modifiez la ligne contenant background-color du .block h2 et backgroun-color, border-top et border-bottom de .block

4. Code permettant de configurer la couleur du contour de collection des courriers

  select{
  background: white;
  border: solid 1px rgb(0,55,80);  
  }

Modifiez la ligne contenant border.


5. Code permettant de changer la couleur du bouton rechercher

  input.button {
   border: 1px solid #FDD16C; Permet de changer la couleur du contour du bouton.
   color: #756666; Permet de changer la couleur de l'écriture du bouton.
   background-color: #FDD16C; Permet de changer la couleur du fond du bouton.
   border-radius: 3px;
   cursor: pointer;
   width: auto;
   padding: 0.2em 0.5em;
   text-align: left;
  }

Changer les couleurs du menu

1. Code permettant de configurer la police du menu

 #menunav li a {
   padding-right: 3px;
   color: rgb(0,160,225);
   display: block;
   position: relative;
 }

Modifiez le champs color

2. Code permettant de paramétrer la couleur du champs que l'on sélectionne lorsqu'on passe la souris dans le menu

 #menunav li.on span {
   background-image: url(static.php?filename=bg_menu_span_on.gif);
 }

Modifiez le champs background-image

3. Code permettant de paramétrer la couleur des boutons du menu quand on focus/defocus

 a:hover {
   color: #1B99C4; couleur de l'écriture lorsque la souris n'est pas dessus
 }
 #menunav li.on a {
   color: white;  couleur de l'écriture lorsqu'on passe la souris dessus
   text-decoration: none;
 }

Modifiez les champs color

4. Code permettant de paramétrer la couleur du fond du menu

 #menunav {
   overflow: hidden;
   width: 260px;
   position: absolute;
   background: #CEE9F1;
   left: -12px;
   padding: 0px;
   z-index: 10;
   margin: 0px;
   border: 2px solid rgb(0,55,80);
   top: 28px;
   border-bottom: none;
   border-top: solid 3px rgb(0,55,80);
 }

Modifiez le champs background


Changer les couleurs des listes des corbeilles

1. Changer la couleur de la police des courriers

  body {
    color: rgb(120,30,13);
    /*background: white url(static.php?filename=bg_body.gif) top center repeat-y;*/
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.02em;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 99.9%;
    height: 99%;
  }

Modifiez le champs color

2. Changer la couleur du fond des listes des corbeilles

  .listing .col td {
    background-color: #DEEDF3;
  }
 .listing .white td {
    background-color: #FFFFFF;
 }

Modifiez les champs background-color

3. Changer la couleur des filtres

 .listing th {
    color: #16ADEB;
}

Modifiez le champs color

4. Changer les couleurs du filtre

 .block {
    padding: 0px;
    color: #666;
    background-color: #CEE9F1; permet de changer le fond du filtre
    border-top: solid 2px #FDD16C; permet de changer la barre supérieur du filtre
    border-bottom: solid 2px #FDD16C; permet de changer la barre inférieur du filtre
    padding: 10px;
 }

5. Changer les séprateurs du filtre

 .separator1 {
    color: #999999;
 }
 .separator2 {
    border-top: 1px solid #999999;
 }

6. Changer la couleur du tri

 .listing th {
    color: #16ADEB; permet de changer la couleur des noms des tris
 }
 .mCdarkOrange {
    color: #FFC200; permet de changer la couleur de la flèche du tri activé
 }
 .mCdarkBlue {
    color: #0487C1; permet de changer la couleur des flèches du tri
 }

Changer les couleurs de la page d'indexation

1. Modifier la barre supérieur de la page d'indexation

 .modal h2 {
    background-color: #009DC5; Permet de changer la couleur barre supérieur de la page d'indexation
    padding: 0.5em;
    color: #ffffff; Permet de changer la couleur du nom de la page
    margin-top: -10px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 10px;
 }

2. Modifier le fond de la page d'indexation

 .modal {
    position: absolute;
    display: block;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: #DEEDF3; Permet de changer la couleur du fond de la page d'indexation
    border-top: solid 2px #FDD16C; Permet de changer la bordure supérieur de la page d'indexation
    border-bottom: solid 2px #FDD16C; Permet de changer la bordure inférieur de la page d'indexation
    overflow: auto;
    -webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565,Direction=NaN,Strength=5);
 }

3. Modifier le block supérieur du parapheur

 .block {
   padding: 0px;
   color: #666; Permet de changer la couleur des noms des champs déroulants du block
   background-color: #CEE9F1; permet de changer le fond du block
   border-top: solid 2px #FDD16C; permet de changer la barre supérieur du block
   border-bottom: solid 2px #FDD16C; permet de changer la barre inférieur du block
   padding: 10px;
 }