Developing Interfaces and Interactivity for DSpace with Manakin

Part 3: Introduction to Manakin’s Style Tier

Eric LuhrsDigital Initiatives Librarian, Lafayette College

&NITLE Technology Fellow for DSpace and Manakin

Presented at NITLE Information Services CampSmith College, June 3, 2009

With curricular and technical assistance from Eric Jansson, NITLE

Overview of Part 3

1. Coding at the style tier2. Review of XHTML and CSS3. Exploring with Firebug

Coding at the Style Tier

• Required Skills− CSS & XHTML

• What CAN’T be done with CSS?• Remove (not just hide) existing interface elements• Introduce new interface elements (such as menus,

zoom features, etc)• Alter the positioning of elements in ways that

violate nesting of HTML elements

Basic XHTML Requirements

• XHTML is HTML that is compatible with XML. Building off your HTML knowledge:– All tags must be closed. No more: <hr>; must

be <hr></hr>– Tags with no content can look like this: <hr/>– XML is case-sensitive. No more: <p>paragraph text </P>

– Elements cannot overlap. No more: <p>Paragraph <em>emphasized</p></em>

– Attributes must be quoted. No more: <table border=3>

How Does Manakin use CSS?

CSS: adds style information to HTML

<div> <h2> My Item </h2></div>

XHTML

h2 { font-weight:bold; font-size: 16pt; color: blue;}

CSSBrowser Display

Example CSS Rule

CSS Rules look like this:

p {color: black;font-size: 12pt;

}

This means: "Make all text between <p> (paragraph) tags black, 12pt font"

SELECTOR

DECLARATION

PROPERTY VALUE

Assigning Style: XHTML Tags

There are 3 types of "selectors": 1. HTML tags2. classes3. ids

To return to our example:

p {color:black;font-size:12pt;

}

This is an example of applying style to an XHTML tag

Assigning Style: Classes

• The '.' denotes a class• .larger is the class 'larger'• A rule for the class 'larger' would look like

this:

.larger {font-size:24pt;

}

We would reference this class in HTML like this:

<p class="larger">some text</p>

Assigning Style: IDs

• The ‘#' denotes an id• #main is the id 'main‘• A rule for the id 'main' would look like this:

#main {font-size:16pt;background-color:gray;

}

We would reference this class in HTML like this:

<div id="main">some text</div>

NOTE: each ID should only be used once in each HTML page (it's an id after all: a unique identifier)

Combining Rules for XHTML Tags, Classes and IDsYou can combine rules, reading left to right:

p.larger {...}

Means "apply this rule to all <p> (paragraphs) that are of the class 'larger‘ ”

#main p {...}

Means "apply this rule to all <p> (paragraphs) in the element denoted by ‘main’ ”

#main p.larger {...}

Means "apply this rule to all <p> (paragraphs) that are of the class 'larger' in the element denoted by ‘main’ ”

Examples continued:

div#main p.larger span.larger {...}

Means "apply this rule to all <span> elements of the class 'larger' that are in <p> (paragraphs) that are of the class 'larger' that are in the element denoted by "main.” As in:

<div id="main”><p class="larger">

<span class="larger">some text</span></p>

</div>

What do these mean?

td {...}

ul.ds-artifact-list {...}

div#ds-user-box p {...}

div#ds-search-option input.ds-text-field {...}

form.ds-interactive-div li.last {...}

CSS References

There is much more to CSS:– http://www.w3schools.com/Css/default.a

sp– http://htmlhelp.com/reference/css– http://reference.sitepoint.com/css– http://www.westciv.com/style_master/ac

ademy/browser_support/index.html

The “Style” of Manakin’s Default Themes

1. HTML lists are used structurally a lot; know how to:

– Make them display horizontally– Remove indentation and add margins– Remove bullets or markets

2. Elements often support multiple classes; know how to:

– Select the right style to modify– Firebug can help (demonstration)

Exploring Manakin with Firebug

• Using Firebug– Click “bug” in lower-right corner of Firefox– Click “inspect” then point to elements

• Note: Firebug is useful for exploring CSS rules and properties, but it cannot save changes you make (demo)

End of Part 3