SlideShare a Scribd company logo
1 of 34
Customizing the look-and-feel ofCustomizing the look-and-feel of
DSpaceDSpace with Manakinwith Manakin
Bharat M. Chaudhari
1
CreditCredit
2
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
style tierstyle tier
 Coding with style tier
Required Skills
(X)HTML & CSS
9
style tierstyle tier
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
style tierstyle tier
Coding with style tierCoding with style tier
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
style tierstyle tier
Coding with style tierCoding with style tier
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
style tierstyle tier
Coding with style tierCoding with style tier
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
style tierstyle tier
Coding with style tierCoding with style tier
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
style tierstyle tier
Coding with style tierCoding with style tier
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
style tierstyle tier
Coding with style tierCoding with style tier
DSpace uses external stylesheet method
in {sitemap.xmap} file the {style.css} is externally linked with
value {“lib/style.css”}
17
style tierstyle tier
Coding with style tierCoding with style tier
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
style tierstyle tier
Coding with style tierCoding with style tier
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
style tierstyle tier
Coding with style tierCoding with style tier
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
style tierstyle tier
Coding with style tierCoding with style tier
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
style tierstyle tier
Coding with style tierCoding with style tier
There is much more to CSS on
1. http://reference.sitepoint.com/css
2. www.csszengarden.com/
3. www.w3schools.com/css/
22
style tierstyle tier
Coding with style tierCoding with style tier
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
Configuring Manakin ThemesConfiguring Manakin Themes
Customizing the ‘Reference’ theme
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
Configuring Manakin ThemesConfiguring Manakin Themes
Customizing the ‘Reference’ theme
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
Configuring Manakin ThemesConfiguring Manakin Themes
Customizing the ‘Reference’ theme
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
Configuring Manakin ThemesConfiguring Manakin Themes
Customizing the ‘Reference’ theme
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
Configuring Manakin ThemesConfiguring Manakin Themes
Customizing the ‘Reference’ theme
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
Configuring Manakin ThemesConfiguring Manakin Themes
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
Configuring Manakin ThemesConfiguring Manakin Themes
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/" />
31
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

More Related Content

What's hot

What's hot (20)

CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Mongodb basics and architecture
Mongodb basics and architectureMongodb basics and architecture
Mongodb basics and architecture
 
MySql slides (ppt)
MySql slides (ppt)MySql slides (ppt)
MySql slides (ppt)
 
Hibernate
HibernateHibernate
Hibernate
 
MongoDB
MongoDBMongoDB
MongoDB
 
An introduction to MongoDB
An introduction to MongoDBAn introduction to MongoDB
An introduction to MongoDB
 
IBM DB2 LUW UDB DBA Training by www.etraining.guru
IBM DB2 LUW UDB DBA Training by www.etraining.guruIBM DB2 LUW UDB DBA Training by www.etraining.guru
IBM DB2 LUW UDB DBA Training by www.etraining.guru
 
CSS
CSSCSS
CSS
 
SQL Server Index and Partition Strategy
SQL Server Index and Partition StrategySQL Server Index and Partition Strategy
SQL Server Index and Partition Strategy
 
Hibernate tutorial for beginners
Hibernate tutorial for beginnersHibernate tutorial for beginners
Hibernate tutorial for beginners
 
Update on DSpace 7
Update on DSpace 7Update on DSpace 7
Update on DSpace 7
 
BEM - CSS, Seriously
BEM - CSS, SeriouslyBEM - CSS, Seriously
BEM - CSS, Seriously
 
Database Normalization
Database NormalizationDatabase Normalization
Database Normalization
 
Database Concepts and Components
Database Concepts and ComponentsDatabase Concepts and Components
Database Concepts and Components
 
ElasticSearch Basic Introduction
ElasticSearch Basic IntroductionElasticSearch Basic Introduction
ElasticSearch Basic Introduction
 
An introduction to MongoDB
An introduction to MongoDBAn introduction to MongoDB
An introduction to MongoDB
 
Data abstraction in DBMS
Data abstraction in DBMSData abstraction in DBMS
Data abstraction in DBMS
 
CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers
 
Basics of MongoDB
Basics of MongoDB Basics of MongoDB
Basics of MongoDB
 
AEM Rich Text Editor (RTE) Deep Dive
AEM Rich Text Editor (RTE) Deep DiveAEM Rich Text Editor (RTE) Deep Dive
AEM Rich Text Editor (RTE) Deep Dive
 

Similar to Customizing the look and-feel of DSpace

Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Css tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.comCss tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.com
vivek698
 

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

Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
 
Csstutorial
CsstutorialCsstutorial
Csstutorial
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Css notes
Css notesCss notes
Css notes
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Le Wagon Tokyo | Build your Landing Page in 2 hours
Le Wagon Tokyo | Build your Landing Page in 2 hoursLe Wagon Tokyo | Build your Landing Page in 2 hours
Le Wagon Tokyo | Build your Landing Page in 2 hours
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Css
CssCss
Css
 
Divs and Links Styles
Divs and Links StylesDivs and Links Styles
Divs and Links Styles
 
Css tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.comCss tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.com
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 

Recently uploaded

Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men 🔝mehsana🔝 Escorts...
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men  🔝mehsana🔝   Escorts...➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men  🔝mehsana🔝   Escorts...
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men 🔝mehsana🔝 Escorts...
nirzagarg
 
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
ydyuyu
 
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
@Chandigarh #call #Girls 9053900678 @Call #Girls in @Punjab 9053900678
 
💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
nirzagarg
 

Recently uploaded (20)

Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
 
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men 🔝mehsana🔝 Escorts...
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men  🔝mehsana🔝   Escorts...➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men  🔝mehsana🔝   Escorts...
➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men 🔝mehsana🔝 Escorts...
 
Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
 
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service AvailableCall Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
 
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
 
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
 
Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...
Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...
Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...
 
Real Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirtReal Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirt
 
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort ServiceBusty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
 
20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf
 
VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...
VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...
VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...
 
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
 
Trump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts SweatshirtTrump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts Sweatshirt
 
Pune Airport ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready...
Pune Airport ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready...Pune Airport ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready...
Pune Airport ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready...
 
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
 
APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53
 
💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
 
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
 
Ganeshkhind ! Call Girls Pune - 450+ Call Girl Cash Payment 8005736733 Neha T...
Ganeshkhind ! Call Girls Pune - 450+ Call Girl Cash Payment 8005736733 Neha T...Ganeshkhind ! Call Girls Pune - 450+ Call Girl Cash Payment 8005736733 Neha T...
Ganeshkhind ! Call Girls Pune - 450+ Call Girl Cash Payment 8005736733 Neha T...
 
Russian Call Girls Pune (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
Russian Call Girls Pune  (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...Russian Call Girls Pune  (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
Russian Call Girls Pune (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
 

Customizing the look and-feel of DSpace

  • 1. Customizing the look-and-feel ofCustomizing the look-and-feel of DSpaceDSpace with Manakinwith Manakin Bharat M. Chaudhari 1
  • 3. 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.
  • 4. PART -1PART -1 What is ManakinWhat is Manakin??  A new face to Dspace  Modular  Extendable  Tiered 4
  • 5. 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
  • 6. 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
  • 8. style tierstyle tier 1. Coding with style tier 2. And with (X)HTML and CSS 3. walk around with Firebug 8
  • 9. style tierstyle tier  Coding with style tier Required Skills (X)HTML & CSS 9
  • 10. style tierstyle tier 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
  • 11. 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 style tierstyle tier Coding with style tierCoding with style tier
  • 12. 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 style tierstyle tier Coding with style tierCoding with style tier
  • 13. 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 style tierstyle tier Coding with style tierCoding with style tier
  • 14. 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 style tierstyle tier Coding with style tierCoding with style tier
  • 15. 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 style tierstyle tier Coding with style tierCoding with style tier
  • 16. 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 style tierstyle tier Coding with style tierCoding with style tier
  • 17. DSpace uses external stylesheet method in {sitemap.xmap} file the {style.css} is externally linked with value {“lib/style.css”} 17 style tierstyle tier Coding with style tierCoding with style tier
  • 18. 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 style tierstyle tier Coding with style tierCoding with style tier
  • 19. 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 style tierstyle tier Coding with style tierCoding with style tier
  • 20. 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 style tierstyle tier Coding with style tierCoding with style tier
  • 21. 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 style tierstyle tier Coding with style tierCoding with style tier
  • 22. There is much more to CSS on 1. http://reference.sitepoint.com/css 2. www.csszengarden.com/ 3. www.w3schools.com/css/ 22 style tierstyle tier Coding with style tierCoding with style tier
  • 23. 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
  • 24. Configuring Manakin ThemesConfiguring Manakin Themes Customizing the ‘Reference’ theme 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
  • 25. Configuring Manakin ThemesConfiguring Manakin Themes Customizing the ‘Reference’ theme 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
  • 26. Configuring Manakin ThemesConfiguring Manakin Themes Customizing the ‘Reference’ theme 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
  • 27. Configuring Manakin ThemesConfiguring Manakin Themes Customizing the ‘Reference’ theme 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
  • 28. Configuring Manakin ThemesConfiguring Manakin Themes Customizing the ‘Reference’ theme 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
  • 29. Configuring Manakin ThemesConfiguring Manakin Themes 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
  • 30. Configuring Manakin ThemesConfiguring Manakin Themes 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/" />
  • 31. 31
  • 32. Advanced Customization - (xmlui Interface)Advanced Customization - (xmlui Interface) Texas A & M RepositoryTexas A & M Repository 32
  • 33. 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