Personnaliser vos écrans

Transcription

1 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>

2 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%;

3 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; 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;. 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; 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 {

4 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; 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 { 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; 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

5 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; background: #CEE9F1; left: -12px; 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%; 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; 4. Changer les couleurs du filtre.block { 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é

6 .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 { 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 { 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;