Introduction

This guide provides an overview of the CSS styles used in the openCPF project. There is also a template file (template.css ) which contains all non-standard style classes and can be used for new openCPF style sheets.

Containers

Container classes should only define attributes relevant to the container design - not those relevant to the containers' content (like text attributes). The content design should be configured using the content style classes (see further below).
The following <div> -containers exist and appear in the HTML-output in the order given below:

  • #logo : This container contains your club's logo.
  • #header : This container does not contain any webpage-content. You can use it for design issues.
  • #menu : The menu container contains the navigation of the website.
  • #content : This is the main container that is used to display the main content.
  • #info : The info container contains side information like newest results etc.
  • #footer : This container does not contain any webpage-content. You can use it for design issues.
  • #sponsors : The sponsors container contains the banners of your sponsors.

Content

Text

There is a text-style class for each container. The reason for this is to separate the container design from the content design and therefore to provide more clarity.
In the HTML output, the text-classes are always set in the container by default, e.g. <div id="content" class="contenttext">...</div>
The container-text-styles are defined as:

.<CONTAINERNAME>text normal text
.<CONTAINERNAME>text A:link link
.<CONTAINERNAME>text A:hover link with mouse over
.<CONTAINERNAME>text A:active active link
.<CONTAINERNAME>text A:visited visited link

Titles

The #content -container additionally has a title-class for the page title:
.contenttitle
And the #menu-container a title-class for the titles of the menu categories:
.menutitle

Images

Preview images and team pictures can be configured by the following styles:

  • img.i_preview
  • img.i_team

Tables

Standard Tables

The styles for standard tables are defined over the standard HTML table tags. Only the table title and footer-cells have a separate style-class. Namely the following styles are relevant for standard tables:

.tabletitle title above the table
table table
th column titles
tr table rows
td table cells
td.tablefooter table footer cells

Special Tables

Preview tables and info tables can be defined separately. The styles comply to the standard table stlyes and are named as follows:

Preview Tables
  • .t_previewtitle
  • table.t_preview
  • th.t_preview
  • tr.t_preview
  • td.t_preview
  • td.t_previewfooter
Info Tables
  • .t_infotitle
  • table.t_info
  • th.t_info
  • tr.t_info
  • td.t_info
  • td.t_infofooter