CSS usage within ClioPatria

The ClioPatria interface is built using dynamically generated HTML (see html//1) that is styled using CSS. The interface is as much as possible built using appropriate HTML elements (e.g., use h1 instead of a div classed header).

List of CSS classes

Below, we summarise the CSS classes in use on the various elements. Notably some really dedicated classes are lacking from this description, but this list is intended to help you deciding on the classes to use on standard components and how to change the standard ClioPatria skin. The overall appearance of ClioPatria is defined in css('cliopatria.css').

RDF elements

RDF resources and literals have class-name that reflect their RDF status. These are mostly generated from components(label) and applications(browse). The styling for RDF element is defined in css('rdf.css').

a

r_def	Link to resource with properties
r_undef	Link to resource without properties
r_graph	Link to named graph
l_count	Link to literal that appears multiple times

span

prefix	Prefix abbreviation of a namespace
local	Local part of a URI
rdf_bnode	RDF Blank Node
rdf_list	RDF List
literal	an RDF literal
l_text	Text of an RDF literal (inside literal)
l_type	Type qualifier of a literal (^^...)
l_lang	Language qualifier of a literal (@...)
r_label	Label of a resource (used to represent R)

div

bnode_attr

P-O pair in a bnode representation. See cpa_browse:location/2

blockquote

triple

{S,P,O} as a block-element

td

subject	RDF subject
predicate	RDF predicate
object	RDF object

Structure elements

Structure elements have classes that reflects their role on a page.

div

list	A list of div.elem_(odd/even) divs
elem_odd	Elements inside a div
elem_even	Elements inside a div
msg_error	Error message
msg_warning	Warning message
msg_informational	Informational message

p

footnote	Informative (smaller font) note
msg_error	Error message
msg_warning	Warning message
msg_informational	Informational message

table

block	A real table that fills most of the width
form	Table that builds a form

tr

group	Group-(sub-)header
odd	odd rows (see odd_even_row//3)
even	even rows (see odd_even_row//3)
skip	skipped rows
buttons	Row contains buttons
header	Row contains headers for columns

td

empty	empty cell
int	integer values
int_c	integer value, horizontally centered
total	(numeric) total
comment	Longer textual description
value	Column with values

th

total	Title explaining a td.total
sorted	Table is sorted on this column
p_name	Property-name. Next cell has value

Page layout

Page layout classes control the overall page layout of ClioPatria pages. The header-elements h1, h2, ... are styled if they appear within div.content. The menu itself is defined in components(menu) and styled with css('menu.css'). The file config-available/skin_fix_menu.pl provides an example of changing the overall skin.

body

yui-skin-sam	Required to support YUI
cliopatria	Used by css('cliopatria.css')

div

menu	The ClioPatria main menu
content	The dynamic page content
footer	Footer with address info

a

version	GIT version info
home	(Component) home-link

span

home	(Component) home-link (if no URL is known)

address

footer

Address-component of the footer