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').

r_defLink to resource with properties
r_undefLink to resource without properties
r_graphLink to named graph
l_countLink to literal that appears multiple times
prefixPrefix abbreviation of a namespace
localLocal part of a URI
rdf_bnodeRDF Blank Node
rdf_listRDF List
literalan RDF literal
l_textText of an RDF literal (inside literal)
l_typeType qualifier of a literal (^^...)
l_langLanguage qualifier of a literal (@...)
r_labelLabel of a resource (used to represent R)
bnode_attrP-O pair in a bnode representation. See cpa_browse:location/2
triple{S,P,O} as a block-element
subjectRDF subject
predicateRDF predicate
objectRDF object

Structure elements

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

listA list of div.elem_(odd/even) divs
elem_oddElements inside a div
elem_evenElements inside a div
msg_errorError message
msg_warningWarning message
msg_informationalInformational message
footnoteInformative (smaller font) note
msg_errorError message
msg_warningWarning message
msg_informationalInformational message
blockA real table that fills most of the width
formTable that builds a form
oddodd rows (see odd_even_row//3)
eveneven rows (see odd_even_row//3)
skipskipped rows
buttonsRow contains buttons
headerRow contains headers for columns
emptyempty cell
intinteger values
int_cinteger value, horizontally centered
total(numeric) total
commentLonger textual description
valueColumn with values
totalTitle explaining a td.total
sortedTable is sorted on this column
p_nameProperty-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.

yui-skin-samRequired to support YUI
cliopatriaUsed by css('cliopatria.css')
menuThe ClioPatria main menu
contentThe dynamic page content
footerFooter with address info
versionGIT version info
home(Component) home-link
home(Component) home-link (if no URL is known)
footerAddress-component of the footer