Customizing the look and-feel of DSpace

Customizing the look-and-feel ofCustomizing the look-and-feel of
DSpaceDSpace with Manakinwith Manakin
Bharat M. Chaudhari
1

What is ManakinWhat is Manakin??
3
.
Manakin & Moa?Manakin & Moa?
Manakin is the final version of the DSpace XMLUI, based upon SAX
& the Cocoon framework; compared to the earlier Moa, it offers
improved efficiency and modularity. Moa is the earlier version of the
DSpace UI, based upon a static 3 stage DOM model.With Manakin
officially released, all development on Moa has ceased.
Manakins are rare South American song birds. They are
special because they use their wing feathers to produce
rhythmic buzzes and hums.

PART -1PART -1
What is ManakinWhat is Manakin??
 A new face to Dspace
 Modular
 Extendable
 Tiered
4

Manakin vs JSPUIManakin vs JSPUI
JSPUI (Java Server Pages)
 Difficult to extend
 Monolithic interface
XMLUI (Manakin Framework)
 Modular design
 Multiple interface
 Metadata in native formats
5

TiersTiers
1. Style Tier
Create simple themes
(X)HTML + CSS
2. Theme Tier
Create complex themes
XSL + (X)HTML + CSS
3. Aspect Tier
Add new features
Cocoon & Java
6

TiersTiers
7
XMLUI Architecture Overview

style tierstyle tier
1. Coding with style tier
2. And with (X)HTML and CSS
3. walk around with Firebug
8

 Coding with style tier
Required Skills
(X)HTML & CSS
9

Coding with style tierCoding with style tier
What is XHTML?
 XHTML™ is the Extensible HyperText Markup
Language
1. XHTML is a stricter and cleaner version of HTML
2. XHTML documents are XML conforming. As such, they are
readily viewed, edited, and validated with standard XML
tools.
10

In HTML, some elements can be improperly nested
within each other, like this:
In XHTML, all elements must be properly nested
within each other, like this:
<b><i>This text is bold and italic</b></i>
<b><i>This text is bold and italic</i></b>
11

A common mistake with nested lists, is to forget that the inside
list must be within <li> and </li> tags.
wrong:
correct:
<ul>
<li>Book</li>
<li>Journal
    <ul>
      <li>Black book</li>
      <li>Green book</li>
    </ul>
<li>Report</li>
</ul>
<ul>
<li>Book</li>
<li>Journal
    <ul>
      <li>Black book</li>
      <li>Green book</li>
    </ul>
</li>
<li>Report</li>
</ul>
12

XHTML Elements Must Always Be Closed
wrong:
correct:
<p>This is the workshop
<p>This is another workshop
<p>This is the workshop</p>
<p>This is another workshop</p>
13

What is CSS?
 A CSS (cascading style sheet) file allows you to separate
your web sites (X)HTML content from it’s style. As always
you use your (X)HTML file to arrange the content, but all of
the presentation (fonts, colors, background, borders, text
formatting, link effects & so on…) are accomplished within a
CSS.
 Most of the visual changes are done in CSS
14

1. Internal Stylesheet
First we will explore the internal method. This way you are
simply placing the CSS code within the <head></head> tags
of each (X)HTML file you want to style with the CSS. The
format for this is shown in the example below.
<head>
<title><title>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>
<body>
15

2. External Stylesheet
Next we will explore the external method. An external CSS file can be
created with any text or HTML editor such as “Notepad” or
“Dreamweaver”. A CSS file contains no (X)HTML, only CSS. You
simply save it with the .css file extension. You can link to the file
externally by placing one of the following links in the head section
of every (X)HTML file you want to style with the CSS file.
<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />
16

DSpace uses external stylesheet method
in {sitemap.xmap} file the {style.css} is externally linked with
value {“lib/style.css”}
17

CSS Rules
The syntax or rules for CSS is different than that of (X)HTML markup.
Though it is not too confusing, once you take a look at it. It consists of only 3 parts.
The selector is the (X)HTML element that you want to style. The property is
the actual property title, and the value is the style you apply to that
property
(Note: Manakin (Reference) theme uses 144 properties.)
selector {property: value}
18

CSS Rules
Each selector can have multiple properties, and each property within that
selector can have independent values. The property and value are separated
with a colon and contained within curly brackets. Multiple properties are
separated by a semi colon. Multiple values within a property are sperated by
commas, and if an individual value contains more than one word you
surround it with quotation marks. As shown below.
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .8em;
text-align: center;
19

1. CSS Classes
The '.' denotes a class
.larger is the class 'larger‘
 A rule for the class 'larger' would look like this:
 We would reference this class in HTML like this:
<p class="larger">some text</p>
.larger {
font-size:24pt;
}
20

2. CSS IDs
IDs are similar to Classes
The ‘#' denotes an id
# main is the id 'main‘
 A rule for the id 'main' would look like this:
 We would reference this class in HTML like this
<div id="main">some text</div>
# main {
font-size:16pt;
background-color: gray;
}
21

There is much more to CSS on
1. http://reference.sitepoint.com/css
2. www.csszengarden.com/
3. www.w3schools.com/css/
22

PART-2 Hands-onPART-2 Hands-on
Configuring Manakin ThemesConfiguring Manakin Themes
Customizing the ‘Reference’ theme
 Start Tomcat Service
Download Firefox 3.5. X from mozilla.com
and Start the Firefox web browser
 Download the Firebug from getfirebug.com
and Install the firebug plug-in (Click “inspect” then point to elements)
 Turn to http://localhost/xmlui
23

1. Replace default Manakin ‘logo’
1. Place your ‘logo’ image into (themesReferenceimages) directory
2. Start the editor and open the CSS file
{Reference/lib/style.css}
3. Return to Firefox, enable Firebug’s “Inspect” feature, and point to
the Manakin logo
4. Return to editor and sort the “Outline” pane by “Selector” and
locate the div#ds-header a span#ds-header-logo rule
(copy the image logo in your theme folder) and Restart tomcat
5. Use editor to change height property of
div#ds-header a span#ds-header-logo to height: 100px from 80px
6. Use the editor to change height property of ul#ds-trail rule to
margin- top: 100px from 80px
24

2. Redesigning the footer elements
1. Hide footer logo and text by adding new (visibility: hidden) property to
span#ds-footer-logo and div#ds-footer p rules
2. To make the footer match our color scheme, also add a new
background-color: #9CADBF property to div#ds-footer rule
3. Moving menu item from right to left
1. Use Firebug to determine which rules control the menu and body
2. Locate these rules using the editor
3. Reverse menu and body positions by switching div#ds-body property to
float:right and div#ds-options property to float:left
25

4. Changing the background ‘Color’
1. Reference theme uses RGB color codes in some places, and the more
standard Hexadecimal codes in others
2. Use Firebug to determine color values used for original background
(tan: #FFFFF0) and border (beige: #F0F0D2) colors on right-hand ds-
options menu, which will be the same colors used elsewhere in the
theme
3. Use the editor to locate the RGB values listed div.ds-option-set rule
(not div#ds-option-set)
26

6. Changing link color
1. Use Firebug to determine which rule controls breadcrumb links
2. Locate the rule using the editor
3. Add new property color: #FFFFFF to div#ds-header a rule
4. We can also add a hover rule add an underline when someone points to the ds-
header link. We do this by creating a new rule called div#ds-header a: hover
which has the same color: #FFFFFF property, but also ads the decoration: underline
property
27

Changing in bullet color
1. Use Firebug to determine which rule controls menu bullets
2. Locate the rule using the editor
3. Change bullet color property in div#ds-options li to color: #
from rgb(100, 100, 50)
28

Appling ‘Kubrick’ theme
As you know DSpace installation running Manakin may have several Themes associated with it.
Theme determines most of the pages look and feel. Different themes can be applied to different sets
of DSpace pages allowing for both variety of styles between sets of pages and consistency
within those sets. The xmlui.xconf configuration file determines which Themes are applied to
which DSpace pages Themes may be configured to apply to all pages of specific type, like
browse-by-title, to all pages of a one particular community or collection or sets of
communities and collections, and to any mix of the two. They can also be configured to apply
to a singe arbitrary page or handle.
29

Appling ‘Kubrick’ theme
1. Open the {xmlui.xconf} from {dspaceconfig}
2. Use any editor to open /dspace/conf/xmlui.xconf (as XML document) and add the
following line above the
3. Modify the theme declaration in file {xmlui.xconf}
4. Restart Tomcat
5. View the ‘kubrick’ theme in your browser
30
<theme name="Default Kubrick Theme" regex=".*" path="Kubrick/" />

Advanced Customization - (xmlui Interface)Advanced Customization - (xmlui Interface)
Texas A & M RepositoryTexas A & M Repository
32

Further ReadingFurther Reading
1. Luhrs, Eric: Digital Initiatives Librarian, Lafayette College Technical and
Conceptual Overview of Dspace and Manakin
2. Diggory, Mark: Learning to use Manakin For DSpace 1.5, JA-SIG, Spring
2008 Conference, St. Paul, Minnesota, April 28-30, 2008
3. Phillips, Scott : Manakin Workshop DSpace User Group, February 2006
33

ThankThank YouYou
Bharat M.
Chaudhari
Mob: 9428415401
34

Customizing the look and-feel of DSpace

More Related Content

What's hot (20)

Similar to Customizing the look and-feel of DSpace (20)

Recently uploaded (20)

Customizing the look and-feel of DSpace