Donnez de la rondeur à Généamania !

[jlsviro]

Message de jlsviro 30 Août 2015, 14:00
Bonjour,

C'est certainement peu connu, mais il est possible d'intervenir plus finement sur le design de Généamania que via le sous-menu "Graphisme du site".

Nous allons voir comment donner un peu plus de "rondeur" à votre Généamania, sans 1 gramme de cholestérol  :lol:

Il vous faut créer un fichier divers_styles_part.css que vous allez déposer dans le répertoire où il y a tous les fichier php ("www" si vous utilisez la version autonome sous Windows). Vous pouvez pour cela utiliser un éditeur de texte simple. Ce fichier contiendra :

Code Sélectionner Étendre

.case_arbre_asc_hom, .case_arbre_asc_fem, .case_arbre_asc_def{
   -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.case_arbre_asc_hom{
background-color:#5CC3FA;
}
.case_arbre_asc_fem{
background-color:#FFA1FD;
}
.case_arbre_asc_def{
background-color:#FFFFFF;
}

.buttons a, .buttons button{
   -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

fieldset {
   -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

input, textarea, select {
   -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding:3px;
border:1px solid #F5C5C5;
box-shadow:1px 1px 2px #C0C0C0 inset;
}
Dans l'ordre, nous indiquons que les cases des arbres ascendants (à partir de la V 6.5) seront arrondis de 5 pixels dans les coins (valable aussi pour les arbres agnatiques et cognatiques à partir de la 6.6, non disponible à ce jour). Puisque l'on est sur les cases, on modifie un peu es couleurs de fond de ces cases, cela ne mange pas de pain...

Ensuite, on fait de même pour les coins des boutons "OK", "Annuler", "Supprimer", les fieldset (regroupement de données dans les formulaire, exemple "Etat civil" dans la fiche personne) et les champs de saisie.

On peut moduler l'arrondi en jouant sur le nombre de pixels (ici 5 dans l'exemple).
Si vous voulez jouer avec les arrondis, vous pouvez aller voir sur http://border-radius.com/ et tester des arrondis différents sur chaque coin...

Qu'en pensez-vous ?

Bonne journée.

jean-Luc

Message de xianmai 31 Août 2015, 17:59
Bonjour

Merci pour cette info très intéressante ; il est intéressant de pouvoir modifier de temps en temps l'aspect des arbres, des zones de saisie, etc...
Remarque : on peut éventuellement alléger le code en supprimant les lignes relatives à Gecko et WebKit, et ne garder que le css.

Cordialement.
Christian

Message de jlsviro 31 Août 2015, 22:51
Bonjour Christian,

Vous avez raison, on peut alléger...

Jouons encore avec les cases 

Code Sélectionner Étendre

.case_arbre_asc_hom, .case_arbre_asc_fem, .case_arbre_asc_def{
border: ridge gray;
border-radius: 13em/2em;
}
Bonne soirée.

jean-Luc

Message de jlsviro 07 Sep 2015, 23:45
Bonjour,

il est intéressant de pouvoir modifier de temps en temps l'aspect des arbres, des zones de saisie, etc...

La 6.6 offrira en outre une ergonomie totalement revue pour modifier le design général ; je pense que vous allez aimer 

Jean-Luc

Message de jlsviro 13 Sep 2015, 1:28

Jouons encore avec les cases 

Exemple sur le site de test http://genealogies.geneamania.net/test_geneamania, dans l'arbre ascendant.

Jean-Luc