CSS Page Layout

From GeneWeb
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
150px-Geographylogo svg.png Language:   English • français

The GeneWeb page layout is designed using CSS. The default style sheet is etc/css.css. Edit the my_base.gwf file to use your own style sheet:

css_prop=your_css_file

The style sheet must be saved in gw/css/.

HTML pages properties (all pages).

html 
{ 
 background: url('/images/gwback.jpg');
 font-family: "Arial";
}

Text highlighting (all pages).

.highlight 
{
  color: #2f6400;
  font-weight: bold;
}

Links properties (all 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;
}

Page title (all pages).

h1
{
 text-align: center; 
 color: #303900;
}

Footer (all pages).

#footer 
{ 
 background-color: #e7edb3;
}

'Title' section (all pages).

#title 
{ 
 padding-top: 10px;
 width: 100%%;
 background-color: #e7edb3;
}

'Language' section (page 'welcome.txt').

#lang 
{ 
  text-align: center;
}

'Logo' section (page 'welcome.txt').

#logo 
{
 float: left;
 width: 160px; 
}

'Access' section (page 'welcome.txt').

#acces 
{
 float: right; 
 width: 160px; 
 height: 65px; 
 border: solid 2px #6f8301;
 margin-right: 10px;
 text-align: center; 
}

Title of the 'Access' section (page 'welcome.txt').

#acces h3 
{
 text-align: left; 
 background-color: #6f8301; 
 color: white; 
 margin: 0;
}

Search form (page 'welcome.txt').

#search 
{
 width: 750px; 
 border: solid 2px #6f8301;
 text-align: left; 
 align: center;
 margin-left: auto;
 margin-right: auto;
}

Title of the search form (page 'welcome.txt').

#search h3 
{
 margin: 0; 
 text-align: left; 
 background-color: #6f8301; 
 color: white;
}

Properties for the search form (page 'welcome.txt').

#search form
{
 margin-top: 10px;
 margin-left: 10px;
}

Display the 'Search by title/fief' form on a single line (page 'welcome.txt').

#form-titles div 
{
  float: left; 
  margin-right: 3px;
}

Properties for the 'Search by title/fief' form in the search form section (page 'welcome.txt').

#content fieldset 
{
  border: 0;
}

'Option' section (page 'welcome.txt'). Tip: Add the following properties to easily center this section: 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;
}

Properties for the title of the 'Option' section (page 'welcome.txt').

#options h3 
{
 margin: 0; 
 text-align: left; 
 background-color: #6f8301; 
 color: white;
}

Properties for the 'Browse' section (page 'perso.txt'). Tip: Add the following properties to easily center this section: 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;
}

Properties for the title of the 'Browse' section (page 'perso.txt').

#navigation h3 
{
 text-align: left; 
 background-color: #6f8301; 
 color: white; 
 margin: 0;
}

Display lists in 2 columns: list_left and list_right. These lists are used in the 'Other option' section of the 'welcome.txt' page, and in the 'Browse' section of the 'perso.txt' page. 'width': width of the column in the section. 'float': alignment of the column in the section. The 'text-align' property is inherited from the parent section.

#list_left
{
 width: 45%; 
 float: left;
}

#list_right
{
 width: 45%; 
 float: right;
}


GeneWeb Manual

Rembrandt Old Man Reading a Book.jpg

Use and manage genealogical databases

Technical annex