[suite de] Personnalisation de la page d'accueil

Pour faire suite au tutoriel de Jacqueline concernant les changements d'images et de format de la page d'accueil.

http://bsd-pour-tous.forumactif.com/aspects-visuels-du-programme-f72/personnalisation-de-la-page-d-accueil-t1424-40.htm#15933

Voici les autres possibilités, les manipulations se font au sein de 2 fichiers styles.css et format.xsl situés dans ce répertoire
C:\Documents and Settings\XXXXX\Application Data\BSD Concept\Heredis11\StartupHTML
Les images que vous voulez ajouter seront situées ici
C:\Documents and Settings\XXXXX\Application Data\BSD Concept\Heredis11\StartupHTML\images

Enregistrez les deux fichiers (styles.css et format.xsl ) sous un autre nom pour les sauvegarder si vous avez besoin de revenir dans la configuration originale.
Vous pouvez ouvrir ces deux fichiers avec un éditeur de texte Notepad (Bloc-Note) ou autre (édireur de pages Web comme Dreamweaver), mais ne remplacer pas leur extension respective.

Voici les changements des images qu'il est possible de faire à partir du fichier styles.css :

1. Remplacer l'image de fond :
Si vous voulez garder l'image de fond background.jpg de Heredis sans lui changer de nom et de le remplacer par MonImage.jpg (c'est un exemple de nom pour votre nouvelle image):
Remplacer la ligne 1 par la ligne 2 :

#background {
1. background: url("images/background.jpg") no-repeat;
2. background: url("images/MonImage.jpg") no-repeat;
width:100%;
height:200%;
z-index : 0;
text-align : center;
}

Notes :
- les 1. et 2. ne servent que de repères ici et ne doivent pas être inscrits.
- Les dimensions de MonImage.jpg devront être adaptées à la résolution de votre écran

2. Remplacer la ronde par une autre image :
Si vous voulez garder l'image de la ronde de Heredis sans lui changer de nom, et de la remplacer par Ma-Ronde.jpg (c'est un exemple de nom pour votre nouvelle image) :
Remplacer la ligne 1 par la ligne 2 :

#ronde {
1. background: url("images/ronde-transparence3.gif") no-repeat;
2. background: url("images/Ma-ronde.gif") no-repeat;
width:879;
height:646;
z-index : 1;
position : absolute;
right : 0;
top : 0;
}

Note : les 1. et 2. ne servent que de repères ici et ne doivent pas être inscrits.

3. Remplacer ou enlever le Logo Heredis Pro :
Si vous voulez garder l'image du Logo de Heredis Pro sans lui changer de nom, et de lae remplacer par Mon-Logo.jpg (c'est un exemple de nom pour votre nouvelle image), Remplacer la ligne 1 par la ligne 2 :
Si vous voulez l'enlevez, remplacer la ligne 1 par la ligne 3 (les symboles /* au début et */ permettent de ne pas prendre en compte cette image mais sans l'effacer.

#logo {
1. background: url("images/logo-H11-pro.jpg") no-repeat;
2. background: url("images/Mon-Logo.jpg") no-repeat;
3. /* background: url("images/logo-H11-pro.jpg") no-repeat;*/
width:270px;
height:91px;
position : absolute;
left : 30;
top : 30;
z-index : 2;
}

Note : les 1. 2. et 3. ne servent que de repères ici et ne doivent pas être inscrits.

4. Nouvelle mise en place des boutons historiques des fichiers :
Les boutons fichiers historiques déjà ouverts sont par défaut sur 1 colonne au maximum de 6, et si vous en avez plus, les suivants seront sur une deuxième colonne, toujours au maximum de 6.
Il est possible de réduire les 2 colonnes en une seule comme sur cette image :
http://bsd-pour-tous.forumactif.com/aspects-visuels-du-programme-f72/personnalisation-de-la-page-d-accueil-t1424.htm

Tout d'abord il faut travailler sur le fichier format.xsl, ouvrez-le et reperez ceci :



1. Supprimez les 2 lignes dans l'encadré en rouge.
2. Coupez toutes les lignes suivantes comme l'image ci-dessus.
3. Collez ces lignes en dessous de la ligne rouge de l'image ci-dessous, votre point de repère est le texte col-1 comme dans l'encadré en rouge.



Ces boutons se trouvent maintenant sur une seule colonne mais avec un ascenseur sur la droite. Vous pouvez le garder, mais si vous voulez l'enlever comme ici ...

http://bsd-pour-tous.forumactif.com/aspects-visuels-du-programme-f72/personnalisation-de-la-page-d-accueil-t1424.htm

... il reste deux manipulations à faire dans le fichiers styles.css. Ouvrez-le et

a. Agrandissez la zone d'affichage des bouton ici :
Ajouter la ligne 1. dans la section col-1

.col-1 {
margin: 0 0 10px 30px;
width: 295px;
1. height: 700px;
float: left;
}

Note : le 1. ne sert que de repère ici et ne doit pas être inscrit.

b. Agrandissez la zone de l'ascenseur :
Changez la valeur de la zone dans la ligne 1 et remplacez par la ligne 2

ul.scrollable {
1. height: 430px;
2. height: 700px;
overflow: auto;
}

Note : les 1. et 2. ne servent que de repères ici et ne doivent pas être inscrits.

5. Ajout d'une image à droite des boutons historiques des fichiers :
Toujours dans le fichier style.css, repérez ceci :

.col-3 {
margin: 42px 0 10px 5px;
width: 295px;
float: left;
}

et remplacez par ceci :

.col-3 {
background: url("images/Ma-Photo.jpg") top left no-repeat;
width: 270px;
height: 355px;
margin: 42px 0 10px 41px;
top: 0px;
left: 0px;
float: left;
}

Ma-Photo.jpg est l'image que vous voudrez mettre et doit être située dans le répertoire
C:\Documents and Settings\XXXXX\Application Data\BSD Concept\Heredis11\StartupHTML\images.
Les dimensions de l'images sont reprises ici à titre d'exemple :
- width: 270px; largeur 270 pixels
- height: 355px; hauteur 355 pixels
- margin: 42px 0 10px 41px; le 41 ici a modifié le 5 original pour laisser plus d'espace autour de l'image. Il est possible que vous aurez à modifier cette valeur en fonction de la taille de la largeur de votre image.

Maintenant dans le fichier format.xsl
Repérez ceci tout en bas du fichier puis insérez la ligne

Fin :
Enregistrez les fichiers styles.css et format.xsl et lancez Heredis.

Remarque : au fur et à mesure que vous faites une de ces modifications dans un des fichiers et que vous l'enregistrez, et avec Heredis d'ouvert sur la page d'accueil, vous pouvez voir les changements en cliquant sur le bouton droit de la souris, sélectionner le menu Actualiser.

Ouahouuh, impressionnant.

Pour rappel, avant toute modification: SAUVEGARDER LES FICHIERS que vous allez modifier.

Autre remarque, dès que vous touchez au logiciel, vous perdez de faite votre droit à la garantie de l'éditeur. C'est une précision importante. Même si les deux fichiers présentés ici ne sont là que pour gérer la page d'accueil.

Il faut donc un minimum de connaissance pour vous lancer dedans.

Personnellement, je vais en rester à une modification simple de l'image de fond.

Je pense que c'est sage aussi Jimbo, et j'en resterai là pour moi aussi.

Jacqueline a écrit:Je pense que c'est sage aussi Jimbo, et j'en resterai là pour moi aussi.

Tu ne crois pas si bien dire, car n'ayant pas Dreamweaver, je risque de faire appel à ton talent

D'accord avec Jimbo. J'ai sauvegardé l'ancienne image, j'ai mis la nouvelle, c'est simple et sans risque pour les non-spécialistes.

ben je vois que je suis encouragé !
Ça parait gros, mais en lisant bien on ne fait que remplacer une ligne par une autre par image !

En fait il y a deux choses pour cette page d'accueil :

La première est juste de remplacer l'image de fond, par une perso.

La deuxième est en plus de l'image, de pouvoir modifier les menus et autres.

Ainsi il est possible de contenter tout le monde, de l'amateur au plus chevronné et autres bidouillieurs..

Hervé a écrit:ben je vois que je suis encouragé !
Ça parait gros, mais en lisant bien on ne fait que remplacer une ligne par une autre par image !

Oui désolé Hervé, j'ai été un peu sec. Je voulais juste attirer l'attention sur le fait qu'il faut un tant soit peu maitriser l'informatique. Je pourrais y arriver sans difficulté, mais je préfére mettre en garde plutôt qu'avoir des récriminations après.

Et nul doute que certains (je suppose que Tahiti a déja commencé) vont se faire une joie de tester tes modifications.

Merci pour ton Tutoriel Hervé, c'est très gentil.
Par contre j'ai été un peu larguée ici:

Hervé a écrit:

:



1. Supprimez les 2 lignes dans l'encadré en rouge.
2. Coupez toutes les lignes suivantes comme l'image ci-dessus.
3. Collez ces lignes en dessous de la ligne rouge de l'image ci-dessous, votre point de repère est le texte col-1 comme dans l'encadré en rouge.



Ces boutons se trouvent maintenant sur une seule colonne mais avec un ascenseur sur la droite. Vous pouvez le garder, mais si vous voulez l'enlever comme ici ...

http://bsd-pour-tous.forumactif.com/aspects-visuels-du-programme-f72/personnalisation-de-la-page-d-accueil-t1424.htm

J'ai eu beau lire et relire, je ne comprends pas les Lignes d'explications que tu as numérotées de 1 à 3. Pourtant c'est du Français mais j'ai des problèmes avec l'interprétation gramaticale.(sans doute liée à ma limitation de connaissances sur les CSS).

Serait-il possible de mettre "remplacer tout ce pavé" situé là, par "le pavé suivant" sans avoir à intercaler, supprimer, couper, coller dans la mesure où il n'y a pas de paramètres individuels différents bien sur?

Sinon ça n'est pas grave, c'est juste une allergie au CSS, ça se soigne docteur?

1. Supprimez les 2 lignes dans l'encadré en rouge.
Dans la première image les 2 lignes à supprimer sont dans l'ecadré en rouge.

2. Coupez toutes les lignes suivantes comme l'image ci-dessus.
Il faut couper toutes les lignes à partir de l'encadré en rouge jusqu'au dernier "< div >" de la 1ère image.

3. Collez ces lignes en dessous de la ligne rouge de
l'image ci-dessous, votre point de repère est le texte col-1 comme dans
l'encadré en rouge.
les lignes coupeées dans l'étape 2. sont à coller comme dans l'image juste en dessous de la ligne rouge, en dessous de " < / xsl .... " encadr/ en rouge, dans la section " < ! col-1.... "

Je viens de créer un sujet tutoriel pour reprendre à la fois le guide pour faire une modification simple comme proposée par Jacqueline et pour faire une modification avancée comme le propose Hervé.

Cela se passe ici

http://bsd-pour-tous.forumactif.com/complements-pour-heredis-mac-pc-f81/tutoriel-pour-personnaliser-sa-page-d-accueil-avec-heredis-11-t1458.htm#16103

Et la galerie pour mettre en ligne vos créations ici

http://bsd-pour-tous.forumactif.com/complements-pour-heredis-mac-pc-f81/galerie-pour-la-page-d-accueil-d-heredis-11-t1459.htm#16107

Merci pour les explications complémentaires Hervé.

Mandra a écrit:Merci pour les explications complémentaires Hervé.

C'est un premier jet d'écriture de ce tuto, alors si il y a incompréhension, c'est normal, mais soyez patients tout de même... je recomposerai plus tard. Et corrigerai une petite erreur que Solo a identifiée

Tu as fait un très beau travail Hervé ....
Mais c'est vrai qu'il faut rappeler que seulement ceux qui s'y connaissent un peu en informatique se lancent là dedans.

Et un tuto, il faut des bêta testeurs aussi pour le tester et corriger les petites erreurs qui pourraient avoir lieu.

En complément, i lest à noter que si vous n'avez pas sauvegardé le fichier, il suffit juste de réinstaller heredis et que cela est sans danger pour vos données et pour votre généalogie..

Tahiti a écrit:En complément, i lest à noter que si vous n'avez pas sauvegardé le fichier, il suffit juste de réinstaller heredis et que cela est sans danger pour vos données et pour votre généalogie..

Ouf, j'avais peur qu'une erreur chez quelqu'un ne plante le logiciel définitivement...

Salut à tous, ça c'est une question pour Jacqueline (ou un autre), dans le fond d'écran ci-dessous je désire incruster des visages de ma famille (incrustation rondes) dans les branches en fleurs, dois-je passer par la méthode des calques, car la méthode ordinaire m'incruste une forme carrée ou rectangulaire ?

OUi Solo tu rajoutes des calques : un par photo.

Tu travailles avec quel logiciel de retouche photos ?

J'aime beaucoup ton image

Solo 44 a écrit:Salut à tous, ça c'est une question pour Jacqueline (ou un autre), dans le fond d'écran ci-dessous je désire incruster des visages de ma famille (incrustation rondes) dans les branches en fleurs, dois-je passer par la méthode des calques, car la méthode ordinaire m'incruste une forme carrée ou rectangulaire ?

Il existe plusieurs méthiodes, comme tu le dis les calques, c'en est une.
L'autre que tu peux utiliser tout de suite est de remplacer l'image par défaut (La ronde) par une autre image au format GIF, avec un fond transparent. Ce fichier s'appelle ronde-transparence3.gif.

Attend Hervé je ne comprends pas très bien pour ronde-transparente. Solo voudrait ajouter des portraits de personnes de sa famille dans les arbres (enfin si j'ai bien compris) ...
S'il veut en ajouter plusieurs il faut bien qu'il fasse un calque (enfin des calques) sur cet arbre ???

Parce positionner ses portraits dans l'arbre par un autre fichier ronde-transparente.gif ça va être folklo pour la position.

Jacqueline a écrit:Attend Hervé je ne comprends pas très bien pour ronde-transparente. Solo voudrait ajouter des portraits de personnes de sa famille dans les arbres (enfin si j'ai bien compris) ...

Okay j'ai compris, il voudrait une méthode de flou sur les bords comme tu l'a fais. sur ton image
Ce qui ma fait penser à l'autre solution, c'est ce qu'il dit ici ...

ma famille (incrustation rondes)

rondes = La ronde.....
Je vais prendre mon 3e du café du matin !!!

T'es en manque ???? C'est pas beaucoup 3 cafés, lorsque je travaillais j'en avais souvent 4 ou 5 avant midi

Jacqueline a écrit:Tu travailles avec quel logiciel de retouche photos ?

Ben j'ai adobe photoshop CS4 mais c'est une usine à gaz, alors pour apprendre à faire des calques j'ai installé pour le moment The GIMP, donc une photo par calque et après fusion des calques

Je sens que je vais me mettre à faire la ronde, si je n'y arrive pas mais il faut bien commencer un jour....

Merci aussi Hervé....et attention pas trop de café..sinon

Hé Hervé.....sur mon image....les visages de mes aïeux en haut dans les branches, les boutons de commande dans le bas à droite ça devrait être chouette non ?

Avec Gimp je ne sais pas mais en principe pas besoin de fusionner les calques, le simple fait d'enreguistrer sous jpg les fusionne. Et tu enregistre sous psd (ou l'équivalent) enfin quoi un fichier de travail sur lequel tu pourras revenir comme tu veux.

Solo 44 a écrit:Hé Hervé.....sur mon image....les visages de mes aïeux en haut dans les branches, les boutons de commande dans le bas à droite ça devrait être chouette non ?

Sans doute, ce qui suppose que je dois te dire comment déplacer les boutons... je n'ai pas eu le temps de le faire hier soir, je regarderai mais vu le décalage horaire, sois tu te couches très tard, ou te lèves très tôt !

Hervé a écrit: Sans doute, ce qui suppose que je dois te dire comment déplacer les boutons...

Tu as tout compris, mais y'à pas le feu au lac... car le temps que j'essaie les calques, ça te donne une très grosse marge et de toute façon les boutons devraient se loger en position normale, je verrais bien