Personnaliser vos écrans

Personnaliser vos écrans
Sommaire
• 1 Présentation
• 2 Mécanisme
• 3 Création du custom
♦ 3.1 Note
• 4 Création du dossier contenant les images personnalisées
♦ 4.1 Note
• 5 Création du dossier contenant le fichier css
• 6 Changer les logos : modification du logo de la page de connexion (default_maarch.gif)
• 7 Changer les logos : modification du logo de la page d'accueil (default_maarch.gif)
• 8 Changer les couleurs d'icônes des raccourcis
• 9 Changer la police des liens
• 10 Changer les couleurs des bandeaux pleins
• 11 Changer les couleurs du menu
• 12 Changer les couleurs des listes des corbeilles
• 13 Changer les couleurs de la page d'indexation
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>
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;
}
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);
padding: 0.5em;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
margin-bottom: 10px;
color:#ffffff;
}
Change la couleur de la frise du panel
.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;
}