Personnaliser la mise en page avec la feuille de style CSS

Error creating thumbnail: File missing Language:	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;
}