Difference between revisions of "CSS/fr"
(Created page with "{{DISPLAYTITLE:Personnaliser la mise en page avec la feuille de style CSS}} {{languages|CSS}} La '''mise en page''' de GeneWeb utilise '''CSS'''. La feuille de style par déf...") |
|||
Line 2: | Line 2: | ||
{{languages|CSS}} | {{languages|CSS}} | ||
− | La '''mise en page''' de GeneWeb utilise '''CSS'''. La feuille de style par défaut est | + | La '''mise en page''' de GeneWeb utilise '''CSS'''. La feuille de style par défaut est {{c|gw/css/default.css}}. Si vous le souhaitez vous pouvez personnaliser cette mise en page pour chacune de vos bases. Pour cela, dans le fichier [[configuration/fr|ma_base.gwf]], indiquez le nom de votre propre css : |
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
css_prop=mon_fichier_css | css_prop=mon_fichier_css | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | Celle-ci devrait toujours se trouver dans le dossier | + | Celle-ci devrait toujours se trouver dans le dossier {{c|gw/css/}} de GeneWeb. |
Propriétés de toutes les pages html. | Propriétés de toutes les pages html. |
Revision as of 09:42, 1 November 2015
![]() |
English • français |
---|
La mise en page de GeneWeb utilise CSS. La feuille de style par défaut est gw/css/default.css
. Si vous le souhaitez vous pouvez personnaliser cette mise en page pour chacune de vos bases. Pour cela, dans le fichier ma_base.gwf, indiquez le nom de votre propre css :
css_prop=mon_fichier_css
Celle-ci devrait toujours se trouver dans le dossier gw/css/
de GeneWeb.
Propriétés de toutes les pages html.
html { background: url('/images/gwback.jpg'); font-family: "Arial"; }
Propriété pour mettre en avant certain mots dans les pages générées par GeneWeb. Toutes les pages.
.highlight { color: #2f6400; font-weight: bold; }
Propriétés pour les liens non visités, visités, et lorsque l'on passe la souris au dessus de ce lien. Toutes les pages.
a:link.highlight { color: #2f6400; } a:visited.highlight { color: #2f6400; } a:hover.highlight { color: #2f6400; } a:link.date { text-decoration: none; color: black; background-color: transparent; } a:visited.date { text-decoration: none; color: black; background-color: transparent; } a:hover.date { text-decoration: none; color: black; background-color: transparent; }
Propriétés pour le titre principal d'une page. Toutes les pages.
h1 { text-align: center; color: #303900; }
Propriétés pour le bloc footer. Toutes les pages.
#footer { background-color: #e7edb3; }
Propriétés pour le bloc titre. Toutes les pages.
#title { padding-top: 10px; width: 100%%; background-color: #e7edb3; }
Propriétés pour le bloc lang. Page welcome.txt
#lang { text-align: center; }
Propriétés pour le bloc logo. Page welcome.txt
#logo { float: left; width: 160px; }
Propriétés pour le bloc acces. Page welcome.txt
#acces { float: right; width: 160px; height: 65px; border: solid 2px #6f8301; margin-right: 10px; text-align: center; }
Propriétés pour le titre du bloc acces. Page welcome.txt
#acces h3 { text-align: left; background-color: #6f8301; color: white; margin: 0; }
Propriétés pour le bloc search. Page welcome.txt
#search { width: 750px; border: solid 2px #6f8301; text-align: left; align: center; margin-left: auto; margin-right: auto; }
Propriétés pour le titre du bloc search. Page welcome.txt
#search h3 { margin: 0; text-align: left; background-color: #6f8301; color: white; }
Propriétés pour le formulaire form contenu dans le bloc search. Page welcome.txt
#search form { margin-top: 10px; margin-left: 10px; }
Pour afficher la recherche par "titre et domaine" sur une seule ligne. Page welcome.txt
#form-titles div { float: left; margin-right: 3px; }
Propriétés de la recherche par "titre et domaine" contenu dans le bloc search. Page welcome.txt
#content fieldset { border: 0; }
Propriétés du bloc option. Page welcome.txt Astuce : pour centrer facilement ce bloc, il faut ajouter les propriétés suivantes : align, margin-left, margin-right et l'astuce : overflow: auto.
#options { width: 750px; border: solid 2px #6f8301; text-align: left; overflow: auto; align: center; margin-left: auto; margin-right: auto; }
Propriétés pour le titre du bloc option. Page welcome.txt
#options h3 { margin: 0; text-align: left; background-color: #6f8301; color: white; }
Propriétés du bloc navigation. Page perso.txt Astuce : pour centrer facilement ce bloc, il faut ajouter les propriétés suivantes : align, margin-left, margin-right et l'astuce : overflow: auto.
#navigation { width: 750px; border: solid 2px #6f8301; text-align: left; overflow: auto; align: center; margin-left: auto; margin-right: auto; }
Propriétés pour le titre du bloc navigation. Page perso.txt
#navigation h3 { text-align: left; background-color: #6f8301; color: white; margin: 0; }
list_left and list_right permet d'afficher deux listes dans deux colonnes. Ces deux listes sont utilisées dans les pages welcome.txt page: bloc "other option" et dans la page perso.txt: bloc "navigation". width spécifie que ce bloc fait la moitié de la taille de son bloc parent. float spécifie la position de la liste (par rapport à son parent). La propriété text-align est hérités du bloc parent.
#list_left { width: 45%; float: left; } #list_right { width: 45%; float: right; }
- Retour page précédente*