CSS Page Layout

From GeneWeb
Jump to: navigation, search
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