Difference between revisions of "DSpace/C2/Customization-of-DSpace-Home-page-on-Ubuntu-Linux-OS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Script: Customization of DSpace Home Page''' '''Author : Pankaj Patil''' '''Keywords: DSpace Customization, Home page customization, Dspace Logo, DSpace Banner, DSpace...")
 
Line 1: Line 1:
 
'''Script: Customization of DSpace Home Page'''
 
'''Script: Customization of DSpace Home Page'''
−
 
  
 
'''Author : Pankaj Patil'''
 
'''Author : Pankaj Patil'''
−
 
  
 
'''Keywords: DSpace Customization, Home page customization, Dspace Logo, DSpace Banner, DSpace news'''
 
'''Keywords: DSpace Customization, Home page customization, Dspace Logo, DSpace Banner, DSpace news'''
  
−
 
+
{| border ="1"
−
 
+
|-  
−
{| style="border-spacing:0;width:16.484cm;"
+
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
| align=center| '''Visual Cue'''
 
| align=center| '''Visual Cue'''
 
| align=center| '''Narration'''
 
| align=center| '''Narration'''
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide: Title
 
|| Slide: Title
 
|| Welcome to this spoken tutorial on '''Customization of''' '''DSpace home page.'''
 
|| Welcome to this spoken tutorial on '''Customization of''' '''DSpace home page.'''
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide: Learning Objectives
 
|| Slide: Learning Objectives
−
|| In this tutorial, we will learn to * <div style="margin-left:1.27cm;margin-right:0cm;">Change '''DSpace''' '''logos'''</div>
+
|| In this tutorial, we will learn to  
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Modify the '''DSpace''' '''banner''' and</div>
+
* Change '''DSpace''' '''logos'''
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Update the '''News''' sections</div>
+
* Modify the '''DSpace''' '''banner''' and
 +
* Update the '''News''' sections
  
−
 
+
|-  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| Slide: System requirements
 
|| Slide: System requirements
−
|| This tutorial is recorded using* <div style="margin-left:1.27cm;margin-right:0cm;">'''Ubuntu Linux OS 18.04'''</div>
+
|| This tutorial is recorded using
−
* <div style="margin-left:1.27cm;margin-right:0cm;">'''DSpace version 6.3'''</div>
+
* '''Ubuntu Linux OS 18.04'''
−
* <div style="margin-left:1.27cm;margin-right:0cm;">'''gedit''' '''text editor '''and</div>
+
* '''DSpace version 6.3'''
−
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Firefox web browser'''</div>
+
* '''gedit''' '''text editor '''and
−
 
+
* '''Firefox web browser'''
−
 
+
−
 
+
−
 
+
  
 
However you may use any other '''text editor''' or '''browser''' of your choice.
 
However you may use any other '''text editor''' or '''browser''' of your choice.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide: Pre-requisites  
 
|| Slide: Pre-requisites  
−
|| To practice this tutorial, you should have* <div style="margin-left:1.27cm;margin-right:0cm;">Installed '''DSpace version 6.3''' on your system</div>
+
|| To practice this tutorial, you should have
−
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Tomcat''' service running</div>
+
* Installed '''DSpace version 6.3''' on your system
−
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Administrator''' authority in '''DSpace '''and</div>
+
* '''Tomcat''' service running
−
* <div style="margin-left:1.27cm;margin-right:0cm;">A working internet connection</div>
+
* '''Administrator''' authority in '''DSpace '''and
−
 
+
* A working internet connection
  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide: Pre-requisites  
 
|| Slide: Pre-requisites  
−
|| Pre-requisites:* <div style="margin-left:1.27cm;margin-right:0cm;">You should be familiar with basic '''Linux''' commands and '''HTML tags'''</div>
+
|| Pre-requisites:
−
* <div style="margin-left:1.27cm;margin-right:0cm;">If not then please go through the prerequisite tutorials on this website.</div>
+
* You should be familiar with basic '''Linux''' commands and '''HTML tags'''
 +
* If not then please go through the prerequisite tutorials on this website.
  
−
 
+
|-  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| Slide: Code Files
 
|| Slide: Code Files
 
|| The '''files''' and '''commands''' used in this tutorial are available in the '''Code Files '''link on this tutorial page.
 
|| The '''files''' and '''commands''' used in this tutorial are available in the '''Code Files '''link on this tutorial page.
−
 
  
 
Please download and extract the files before practicing.
 
Please download and extract the files before practicing.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide : '''DSpace''' Customization
 
|| Slide : '''DSpace''' Customization
−
|| * <div style="margin-left:1.27cm;margin-right:0cm;">'''DSpace''' is a highly customizable '''software application'''.</div>
+
||  
−
* <div style="margin-left:1.27cm;margin-right:0cm;">We can customize the '''DSpace user''' interface and its behaviour as per our preference.</div>
+
* '''DSpace''' is a highly customizable '''software application'''.
 +
* We can customize the '''DSpace user''' interface and its behaviour as per our preference.
  
−
 
+
|-  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| Slide : '''DSpace''' UI Customization
 
|| Slide : '''DSpace''' UI Customization
−
|| The '''user''' interface of '''DSpace''' can be modified for* <div style="margin-left:1.27cm;margin-right:0cm;">Branding of a '''repository''' </div>
+
|| The '''user''' interface of '''DSpace''' can be modified for
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Communicate vision, mission of the organization</div>
+
* Branding of a '''repository'''  
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Enhance aesthetics and usability</div>
+
* Communicate vision, mission of the organization
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Present tool tip or help to use</div>
+
* Enhance aesthetics and usability
−
 
+
* Present tool tip or help to use
−
 
+
−
 
+
−
 
+
  
 
Now, let us understand the different sections of the '''DSpace''' '''home page.'''
 
Now, let us understand the different sections of the '''DSpace''' '''home page.'''
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Open Web Browser  
 
|| Open Web Browser  
−
 
  
 
Address Bar >> '''localhost:8080'''
 
Address Bar >> '''localhost:8080'''
−
 
−
 
  
 
|| Open a '''web browser'''.
 
|| Open a '''web browser'''.
−
 
  
 
In the '''address bar''', type '''localhost:8080''' and press '''Enter'''.
 
In the '''address bar''', type '''localhost:8080''' and press '''Enter'''.
−
 
  
 
'''DSpace''' interface opens.
 
'''DSpace''' interface opens.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Point to different portions in''' DSpace home page'''
 
|| Point to different portions in''' DSpace home page'''
 
|| We have a '''Navigation bar logo''' located at the top-left corner.
 
|| We have a '''Navigation bar logo''' located at the top-left corner.
−
 
  
 
Below that we have the '''Banner''' section.
 
Below that we have the '''Banner''' section.
−
 
  
 
The''' DSpace logo''' is located next to the '''banner'''.
 
The''' DSpace logo''' is located next to the '''banner'''.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Point to different portions in''' DSpace home page'''
 
|| Point to different portions in''' DSpace home page'''
 
|| Below the '''banner''' section, we have a green color bar called '''breadcrumb bar'''.
 
|| Below the '''banner''' section, we have a green color bar called '''breadcrumb bar'''.
−
 
  
 
Below the '''breadcrumb bar, '''we have''' Top News '''and''' sidebar news '''sections.
 
Below the '''breadcrumb bar, '''we have''' Top News '''and''' sidebar news '''sections.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide: '''DSpace Navbar logo'''  
 
|| Slide: '''DSpace Navbar logo'''  
−
 
  
 
Name: '''dspace-logo-only.png'''
 
Name: '''dspace-logo-only.png'''
−
 
  
 
Location: '''/home/dspace/dspace-6.3-src-release/dspace-jspui/src/main/webapp/image'''.
 
Location: '''/home/dspace/dspace-6.3-src-release/dspace-jspui/src/main/webapp/image'''.
−
 
  
 
Dimensions: '''25 x 25 pixels'''.
 
Dimensions: '''25 x 25 pixels'''.
 
|| Let us begin with the customization of the '''DSpace Navigation bar logo'''.
 
|| Let us begin with the customization of the '''DSpace Navigation bar logo'''.
−
 
  
 
These are the properties for the '''logo'''.
 
These are the properties for the '''logo'''.
−
 
  
 
We will replace this default '''logo''' with the new one.
 
We will replace this default '''logo''' with the new one.
−
 
  
 
Make sure that the new '''logo''' has the same properties, if you are using your own logo.
 
Make sure that the new '''logo''' has the same properties, if you are using your own logo.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| '''Ctrl+Alt+T keys'''
 
|| '''Ctrl+Alt+T keys'''
 
|| Open the '''terminal''' by pressing '''Ctrl, Alt '''and '''T''' keys together.
 
|| Open the '''terminal''' by pressing '''Ctrl, Alt '''and '''T''' keys together.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Only Narration
 
|| Only Narration
 
|| Here onwards please press the '''Enter''' key after typing each '''command'''.
 
|| Here onwards please press the '''Enter''' key after typing each '''command'''.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Type:  
 
|| [Terminal] Type:  
  
 
'''cd Downloads'''
 
'''cd Downloads'''
 
|| Go to the folder where you downloaded the images.
 
|| Go to the folder where you downloaded the images.
−
 
  
 
Mine is in the '''Downloads''' folder.
 
Mine is in the '''Downloads''' folder.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Type:
 
|| [Terminal] Type:
−
 
  
 
'''sudo mv dimages/* /home/dspace/'''
 
'''sudo mv dimages/* /home/dspace/'''
 
|| Then we will move the '''logos''' folder to the '''DSpace user’s Home''' folder.
 
|| Then we will move the '''logos''' folder to the '''DSpace user’s Home''' folder.
−
 
  
 
To do so, we will type the '''command''' as shown.
 
To do so, we will type the '''command''' as shown.
−
 
  
 
If prompted, type the '''admin password''' and press '''Enter.'''
 
If prompted, type the '''admin password''' and press '''Enter.'''
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Type:
 
|| [Terminal] Type:
−
 
  
 
'''sudo su - dspace'''
 
'''sudo su - dspace'''
 
|| Now, login as '''dspace user''' by typing '''sudo su - dspace'''.
 
|| Now, login as '''dspace user''' by typing '''sudo su - dspace'''.
−
 
  
 
If prompted, type the '''admin password''' and press '''Enter'''.
 
If prompted, type the '''admin password''' and press '''Enter'''.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide : '''DSpace''' source code
 
|| Slide : '''DSpace''' source code
 
|| The '''source code''' for '''DSpace''' is located in the '''dspace-6.3-src-release '''directory.
 
|| The '''source code''' for '''DSpace''' is located in the '''dspace-6.3-src-release '''directory.
−
 
  
 
If we wish to customize '''DSpace''', then we have to make changes in this directory.
 
If we wish to customize '''DSpace''', then we have to make changes in this directory.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Type:
 
|| [Terminal] Type:
−
 
  
 
'''cd dspace-6.3-src-release/dspace-jspui/src/main/webapp/image'''
 
'''cd dspace-6.3-src-release/dspace-jspui/src/main/webapp/image'''
 
|| We will first change the current '''working directory''' to the '''DSpace Image '''directory.
 
|| We will first change the current '''working directory''' to the '''DSpace Image '''directory.
−
 
  
 
So, on the '''terminal''', type the '''command''' shown here.  
 
So, on the '''terminal''', type the '''command''' shown here.  
  
−
 
+
|-  
−
 
+
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| [Terminal] Type:
 
|| [Terminal] Type:
  
 
'''sudo mv dspace-logo-only.png dspace-logo-only-old.png'''
 
'''sudo mv dspace-logo-only.png dspace-logo-only-old.png'''
 
|| Let us rename the default '''DSpace navigation bar logo '''for''' '''backup purposes.
 
|| Let us rename the default '''DSpace navigation bar logo '''for''' '''backup purposes.
−
 
  
 
To do so, we will type the '''command''' as shown here.
 
To do so, we will type the '''command''' as shown here.
−
 
  
 
If prompted, type the '''dspace user password''' and press '''Enter'''.
 
If prompted, type the '''dspace user password''' and press '''Enter'''.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Type:
 
|| [Terminal] Type:
−
 
  
 
'''cp $HOME/dspace-logo-only.png .'''
 
'''cp $HOME/dspace-logo-only.png .'''
 
|| My new '''logo '''is in the '''Home''' directory of '''dspace user''' on my machine.
 
|| My new '''logo '''is in the '''Home''' directory of '''dspace user''' on my machine.
−
 
  
 
Let us copy and paste that inside the '''DSpace''' '''image''' directory.
 
Let us copy and paste that inside the '''DSpace''' '''image''' directory.
−
 
  
 
To do so, I will type the '''command''' as shown here.
 
To do so, I will type the '''command''' as shown here.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Type:
 
|| [Terminal] Type:
−
 
  
 
'''$HOME/Rebuild-DSpace'''
 
'''$HOME/Rebuild-DSpace'''
−
 
−
 
  
 
|| Next we have to '''rebuild DSpace''' to update these changes.
 
|| Next we have to '''rebuild DSpace''' to update these changes.
−
 
  
 
To do so, type the '''command''' as shown.
 
To do so, type the '''command''' as shown.
  
−
 
+
'''Rebuild''' process will take some time depending upon your internet speed.
−
<span style="background-color:#ffffff;">'''Rebuild'''</span><span style="background-color:#ffffff;"> process will take some time depending upon your internet speed.</span>
+
|-  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| [Terminal] Highlight '''BUILD SUCCESSFUL''' message
 
|| [Terminal] Highlight '''BUILD SUCCESSFUL''' message
−
|| <span style="background-color:#ffffff;">On successful completion, </span><span style="background-color:#ffffff;">'''BUILD SUCCESSFUL message '''</span><span style="background-color:#ffffff;">will be displayed. </span>
+
|| On successful completion, '''BUILD SUCCESSFUL message '''will be displayed.  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Refresh''' DSpace Home page'''
 
|| Refresh''' DSpace Home page'''
 
|| Now, switch to the '''browser''' and refresh the page.
 
|| Now, switch to the '''browser''' and refresh the page.
−
 
  
 
Observe the change - the old '''Navigation bar''' '''logo''' is replaced with the new one.
 
Observe the change - the old '''Navigation bar''' '''logo''' is replaced with the new one.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Only narration
 
|| Only narration
 
|| In case, if you can’t see the updated '''logo''', kindly clear the '''cache''' and refresh the page.
 
|| In case, if you can’t see the updated '''logo''', kindly clear the '''cache''' and refresh the page.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| '''Slide''' : DSpace logo
 
|| '''Slide''' : DSpace logo
−
 
  
 
Name: '''logo.gif'''
 
Name: '''logo.gif'''
Line 237: Line 189:
 
Dimensions: '''165 x 132 pixels'''.
 
Dimensions: '''165 x 132 pixels'''.
 
|| Next let us try to add our '''logo''' instead of the '''DSpace logo''' next to the '''banner''' section.
 
|| Next let us try to add our '''logo''' instead of the '''DSpace logo''' next to the '''banner''' section.
−
 
  
 
These are the properties of the '''logo'''.
 
These are the properties of the '''logo'''.
−
 
  
 
We will replace this default '''logo''' with our own '''logo'''.
 
We will replace this default '''logo''' with our own '''logo'''.
−
 
  
 
Make sure that the new '''logo''' has the same properties, if you are using your own '''logo'''.
 
Make sure that the new '''logo''' has the same properties, if you are using your own '''logo'''.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Type:  
 
|| [Terminal] Type:  
  
 
'''sudo mv logo.gif logo-old.gif'''
 
'''sudo mv logo.gif logo-old.gif'''
 
|| Let us rename the existing '''logo''' for backup purposes.
 
|| Let us rename the existing '''logo''' for backup purposes.
−
 
  
 
To do so, type the '''command''' as shown in the '''terminal'''.
 
To do so, type the '''command''' as shown in the '''terminal'''.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Type:
 
|| [Terminal] Type:
−
 
  
 
'''cp $HOME/logo.gif .'''
 
'''cp $HOME/logo.gif .'''
 
|| Copy the new '''logo''' from '''Home''' directory of '''dspace''' user to '''DSpace''' '''Image''' directory.
 
|| Copy the new '''logo''' from '''Home''' directory of '''dspace''' user to '''DSpace''' '''Image''' directory.
−
 
  
 
To do so, type the '''command''' as shown here.
 
To do so, type the '''command''' as shown here.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Type:
 
|| [Terminal] Type:
−
 
  
 
'''$HOME/Rebuild-DSpace'''
 
'''$HOME/Rebuild-DSpace'''
 
|| Now, '''rebuild DSpace''' to update the changes.
 
|| Now, '''rebuild DSpace''' to update the changes.
  
−
 
+
The '''build''' is successful as indicated by the success message.
−
<span style="background-color:#ffffff;">The </span><span style="background-color:#ffffff;">'''build'''</span><span style="background-color:#ffffff;"> is successful as indicated by the success message.</span>
+
|-  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| Refresh''' DSpace Home page'''
 
|| Refresh''' DSpace Home page'''
 
|| Now, switch to the '''browser''' and refresh the page.  
 
|| Now, switch to the '''browser''' and refresh the page.  
−
 
  
 
Observe the change.
 
Observe the change.
−
 
  
 
The '''DSpace logo''' next to the '''banner''' section is replaced with the new one.
 
The '''DSpace logo''' next to the '''banner''' section is replaced with the new one.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Point to''' DSpace banner '''
 
|| Point to''' DSpace banner '''
 
|| The''' DSpace banner''' is used for branding of repositories.  
 
|| The''' DSpace banner''' is used for branding of repositories.  
−
 
  
 
Let us proceed to modify the '''banner''' content now.
 
Let us proceed to modify the '''banner''' content now.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Type:
 
|| [Terminal] Type:
−
 
  
 
'''sudo gedit /home/dspace/dspace-6.3-src-release/dspace-api/src/main/resources/Messages.properties'''
 
'''sudo gedit /home/dspace/dspace-6.3-src-release/dspace-api/src/main/resources/Messages.properties'''
 
|| '''Messages.properties '''is a file, which contains '''user interface''' text of '''DSpace'''.
 
|| '''Messages.properties '''is a file, which contains '''user interface''' text of '''DSpace'''.
−
 
  
 
Let us open this file.  
 
Let us open this file.  
−
 
  
 
To do so, type the '''command''' as shown.
 
To do so, type the '''command''' as shown.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="background-color:#f8f9fa;">Show </span>'''Messages.properties '''file
+
|| Show '''Messages.properties '''file
 
|| '''Messages.properties '''file contains '''Key Value''' pairs.
 
|| '''Messages.properties '''file contains '''Key Value''' pairs.
−
 
  
 
'''Keys''' are referenced from '''jsp''' files and the corresponding '''value''' is rendered in '''UI'''.  
 
'''Keys''' are referenced from '''jsp''' files and the corresponding '''value''' is rendered in '''UI'''.  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Banner Heading Text
 
|| Banner Heading Text
−
 
  
 
'''jsp.layout.header-default.brand.heading = IITB Repository'''
 
'''jsp.layout.header-default.brand.heading = IITB Repository'''
Line 313: Line 249:
  
 
'''jsp.layout.header-default.brand.heading '''
 
'''jsp.layout.header-default.brand.heading '''
−
 
  
 
Change its default '''value''' to '''IITB Repository'''.
 
Change its default '''value''' to '''IITB Repository'''.
−
 
  
 
Basic '''HTML tags''' such as '''heading''' can be used to write '''value'''.
 
Basic '''HTML tags''' such as '''heading''' can be used to write '''value'''.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| '''jsp.layout.header-default.brand.heading = <b> IITB Repository </b>'''
 
|| '''jsp.layout.header-default.brand.heading = <b> IITB Repository </b>'''
 
|| If you wish to display the text in a stylish way, we can use those '''html tags''' also.
 
|| If you wish to display the text in a stylish way, we can use those '''html tags''' also.
−
 
  
 
For example, I can type the '''value''' as shown.
 
For example, I can type the '''value''' as shown.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| '''<h3> IITB Digital Repository is the collection of digital assets </h3>'''
 
|| '''<h3> IITB Digital Repository is the collection of digital assets </h3>'''
−
 
−
 
  
 
|| Now locate the '''key''' '''jsp.layout.header-default.brand.description '''
 
|| Now locate the '''key''' '''jsp.layout.header-default.brand.description '''
−
 
  
 
Change its default value as shown.
 
Change its default value as shown.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Save and close
 
|| Save and close
 
|| Save and close the file.
 
|| Save and close the file.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Type:
 
|| [Terminal] Type:
−
 
  
 
'''$HOME/Rebuild-DSpace'''
 
'''$HOME/Rebuild-DSpace'''
 
|| Now, '''rebuild''' '''DSpace''' to update the changes.
 
|| Now, '''rebuild''' '''DSpace''' to update the changes.
  
−
 
+
'''Build '''is successful as indicated by the on-screen message.
−
<span style="background-color:#ffffff;">'''Build '''</span><span style="background-color:#ffffff;">is successful as indicated by the on-screen message.</span>
+
|-  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| Refresh''' DSpace Home page'''
 
|| Refresh''' DSpace Home page'''
 
|| Now, switch to the '''browser''' and refresh the page.  
 
|| Now, switch to the '''browser''' and refresh the page.  
−
 
  
 
Observe the change.
 
Observe the change.
−
 
  
 
The '''banner section''' content is updated.
 
The '''banner section''' content is updated.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="background-color:#f8f9fa;">Point to </span><span style="background-color:#f8f9fa;">'''Top and Sidebar news on Home Page'''</span>
+
|| Point to '''Top and Sidebar news on Home Page'''
−
|| <span style="background-color:#ffffff;color:#252525;">'''Top news'''</span><span style="background-color:#ffffff;color:#252525;"> and </span><span style="background-color:#ffffff;color:#252525;">'''Sidebar news'''</span><span style="background-color:#ffffff;color:#252525;"> are used to display updates and news about the </span><span style="background-color:#ffffff;color:#252525;">'''Repository'''</span><span style="background-color:#ffffff;color:#252525;">.</span>
+
|| '''Top news''' and '''Sidebar news''' are used to display updates and news about the '''Repository'''.
−
 
+
  
−
<span style="background-color:#ffffff;color:#252525;">We will edit these in the front end itself with the help of an </span><span style="background-color:#ffffff;color:#252525;">'''administrator'''</span><span style="background-color:#ffffff;color:#252525;">.</span>
+
We will edit these in the front end itself with the help of an '''administrator'''.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Log in to '''DSpace'''
 
|| Log in to '''DSpace'''
  
 +
'''Mail address: dspace.u1@gmail.com'''
  
−
<span style="background-color:#ffffff;color:#222222;">'''Mail address: </span><span style="background-color:#ffffff;color:#1155cc;">dspace.u1@gmail.com'''</span>
+
'''Password: u1pass'''
 +
|| Click on the '''Sign on to '''button at the top right corner.
  
−
<span style="background-color:#ffffff;color:#222222;">'''Password: </span><span style="background-color:#f8f9fa;">u1pass'''</span>
+
From the drop-down, select '''My DSpace.'''
−
|| <span style="background-color:#ffffff;">Click on the </span><span style="background-color:#ffffff;">'''Sign on to '''</span><span style="background-color:#ffffff;">button at the top right corner.</span>
+
  
 +
Log into '''DSpace''' with your '''administrator’s email address '''and''' password'''.
  
−
<span style="background-color:#ffffff;">From the drop-down, select </span><span style="background-color:#ffffff;">'''My DSpace.'''</span>
+
For this demonstration, I will log in with the '''administrator’s email id dspace.u1@gmail.com.
−
 
+
−
<span style="background-color:#ffffff;">Log into </span><span style="background-color:#ffffff;">'''DSpace'''</span><span style="background-color:#ffffff;"> with your </span><span style="background-color:#ffffff;">'''administrator’s email address '''</span><span style="background-color:#ffffff;">and</span><span style="background-color:#ffffff;">''' password'''</span><span style="background-color:#ffffff;">.</span>
+
−
 
+
−
 
+
−
For this demonstration, I will log in with the '''administrator’s email id [mailto:dspace.u5@gmail.com dspace.u1@gmail.com]
+
−
 
+
  
 
'''My DSpace''' page appears on the screen.
 
'''My DSpace''' page appears on the screen.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="background-color:#f8f9fa;">Select</span><span style="background-color:#f8f9fa;">''' Administer'''</span>
+
|| Select''' Administer'''
−
|| <span style="background-color:#f8f9fa;">Click on the down arrow at the top right corner next to the </span><span style="background-color:#f8f9fa;">'''admin’s mail id.'''</span>
+
|| Click on the down arrow at the top right corner next to the '''admin’s mail id.'''
  
−
 
+
Then select '''Administer'''.
−
<span style="background-color:#f8f9fa;">Then select </span><span style="background-color:#f8f9fa;">'''Administer'''</span><span style="background-color:#f8f9fa;">.</span>
+
|-  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| '''General Settings > Edit News'''
 
|| '''General Settings > Edit News'''
 
|| We will be redirected to the '''admin''' interface.
 
|| We will be redirected to the '''admin''' interface.
−
 
  
 
On the top '''navigation bar''', click on '''General Settings''' menu
 
On the top '''navigation bar''', click on '''General Settings''' menu
−
 
  
 
Then select '''Edit News '''from drop-down.
 
Then select '''Edit News '''from drop-down.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="background-color:#f8f9fa;">Select </span><span style="background-color:#f8f9fa;">'''Top News'''</span>
+
|| Select '''Top News'''
 
|| Select '''Top News''' in the '''News Editor''' section to edit '''Top News.'''
 
|| Select '''Top News''' in the '''News Editor''' section to edit '''Top News.'''
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Click on '''Edit '''button
 
|| Click on '''Edit '''button
 
|| Click on the '''Edit '''button.
 
|| Click on the '''Edit '''button.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="background-color:#f8f9fa;">Point to</span><span style="background-color:#f8f9fa;">''' News Editor'''</span>
+
|| Point to''' News Editor'''
 
|| '''News Editor''' page opens for the '''Top News''' with default '''DSpace Top News.'''
 
|| '''News Editor''' page opens for the '''Top News''' with default '''DSpace Top News.'''
−
 
  
 
You can use '''HTML''' '''tags''' in the '''News Editor.'''
 
You can use '''HTML''' '''tags''' in the '''News Editor.'''
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| '''<p>Welcome to IITB digital repository!</p>'''
 
|| '''<p>Welcome to IITB digital repository!</p>'''
−
|| <span style="background-color:#ffffff;color:#252525;">I am updating the </span><span style="background-color:#ffffff;color:#252525;">'''Top News'''</span><span style="background-color:#ffffff;color:#252525;"> as shown.</span>
+
|| I am updating the '''Top News''' as shown.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="background-color:#f8f9fa;">Click on </span><span style="background-color:#f8f9fa;">'''Save '''</span><span style="background-color:#f8f9fa;">button</span>
+
|| Click on '''Save '''button
−
|| <span style="background-color:#ffffff;color:#252525;">Click on the </span><span style="background-color:#ffffff;color:#252525;">'''Save'''</span><span style="background-color:#ffffff;color:#252525;"> button.</span>
+
|| Click on the '''Save''' button.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="background-color:#f8f9fa;">Select</span><span style="background-color:#f8f9fa;">''' Sidebar News '''</span><span style="background-color:#f8f9fa;">and click on</span><span style="background-color:#f8f9fa;">''' Edit '''</span><span style="background-color:#f8f9fa;">button</span>
+
|| Select''' Sidebar News '''and click on''' Edit '''button
  
−
 
+
Update the '''Sidebar News'''
−
<span style="background-color:#ffffff;color:#252525;">Update the </span><span style="background-color:#f8f9fa;">'''Sidebar News'''</span>
+
  
 
'''<p>Explore IITB digital repository and Enhance learning.</p>'''
 
'''<p>Explore IITB digital repository and Enhance learning.</p>'''
 
|| Likewise, I will edit the '''sidebar news'''.
 
|| Likewise, I will edit the '''sidebar news'''.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="background-color:#f8f9fa;">Save </span><span style="background-color:#f8f9fa;">'''Sidebar News'''</span>
+
|| Save '''Sidebar News'''
−
|| <span style="background-color:#ffffff;color:#252525;">Click on the </span><span style="background-color:#ffffff;color:#252525;">'''Save'''</span><span style="background-color:#ffffff;color:#252525;"> button.</span>
+
|| Click on the '''Save''' button.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="background-color:#f8f9fa;">Click on</span><span style="background-color:#f8f9fa;">''' Home Tab'''</span>
+
|| Click on''' Home Tab'''
 
|| In the top '''navigation bar''', click on the menu '''Home.'''
 
|| In the top '''navigation bar''', click on the menu '''Home.'''
−
 
  
 
The''' Top News '''and''' Sidebar News '''section for the '''DSpace home page''' is updated.
 
The''' Top News '''and''' Sidebar News '''section for the '''DSpace home page''' is updated.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Only narration
 
|| Only narration
 
|| LIkewise, we can customise our '''DSpace home page''' based on our needs.
 
|| LIkewise, we can customise our '''DSpace home page''' based on our needs.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
||  
 
||  
 
|| '''Logout''' from '''DSpace''' interface.
 
|| '''Logout''' from '''DSpace''' interface.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] type:
 
|| [Terminal] type:
−
 
  
 
Logout [enter]
 
Logout [enter]
 
|| Switch to the '''terminal.'''
 
|| Switch to the '''terminal.'''
−
 
  
 
Type '''logout''' to exit from '''DSpace user login'''.  
 
Type '''logout''' to exit from '''DSpace user login'''.  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
||  
 
||  
 
|| With this we have come to the end of this tutorial.
 
|| With this we have come to the end of this tutorial.
−
 
  
 
Let us summarize.
 
Let us summarize.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="background-color:#ffffff;">Slide: </span>Summary
+
|| Slide: Summary
  
 +
|| In this tutorial we learnt to :
 +
* Change '''DSpace logos'''
 +
* Modify '''DSpace banner''' and
 +
* Update news sections.
  
−
 
+
|-  
−
|| In this tutorial we learnt to :* <div style="margin-left:1.27cm;margin-right:0cm;">Change '''DSpace logos'''</div>
+
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Modify '''DSpace banner''' and</div>
+
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Update news sections.</div>
+
−
 
+
−
 
+
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| Slide: Assignment
 
|| Slide: Assignment
−
|| As an assignment* <div style="margin-left:1.27cm;margin-right:0cm;">Change '''Navbar logo '''and '''DSpace logo'''</div>
+
|| As an assignment
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Modify the '''DSpace banner''' content</div>
+
* Change '''Navbar logo '''and '''DSpace logo'''
 +
* Modify the '''DSpace banner''' content
  
−
 
+
|-  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| Slide : About Spoken Tutorial project
 
|| Slide : About Spoken Tutorial project
 
|| The video at the following link summarises the '''Spoken Tutorial project.'''
 
|| The video at the following link summarises the '''Spoken Tutorial project.'''
−
 
  
 
Please download and watch it.
 
Please download and watch it.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide : Spoken Tutorial workshops
 
|| Slide : Spoken Tutorial workshops
−
 
−
 
  
 
|| The '''Spoken Tutorial Project''' team conducts workshops and gives certificates.
 
|| The '''Spoken Tutorial Project''' team conducts workshops and gives certificates.
−
 
  
 
For more details, please write to us.
 
For more details, please write to us.
Line 485: Line 391:
 
|| Slide: Answers for THIS Spoken Tutorial
 
|| Slide: Answers for THIS Spoken Tutorial
 
|| Please post your timed queries in this Forum.
 
|| Please post your timed queries in this Forum.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide: Acknowledgement -I
 
|| Slide: Acknowledgement -I
 
|| The''' Spoken Tutorial project''' is funded by MHRD, Government of India.
 
|| The''' Spoken Tutorial project''' is funded by MHRD, Government of India.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide: Acknowledgement -II
 
|| Slide: Acknowledgement -II
−
 
−
 
  
 
|| '''DSpace spoken tutorial''' series is funded by the National Virtual Library of India, Ministry of Culture, Government of India.
 
|| '''DSpace spoken tutorial''' series is funded by the National Virtual Library of India, Ministry of Culture, Government of India.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Narration only
 
|| Narration only
−
 
−
 
  
 
|| This script and video for this tutorial was contributed by '''Pankaj Patil''' from''' IIT Bombay.'''
 
|| This script and video for this tutorial was contributed by '''Pankaj Patil''' from''' IIT Bombay.'''
−
 
  
 
And this is '''Nancy Varkey '''signing off. Thanks for joining.
 
And this is '''Nancy Varkey '''signing off. Thanks for joining.
 
|-
 
|-
 
|}
 
|}

Revision as of 13:06, 1 June 2020

Script: Customization of DSpace Home Page

Author : Pankaj Patil

Keywords: DSpace Customization, Home page customization, Dspace Logo, DSpace Banner, DSpace news

Visual Cue Narration
Slide: Title Welcome to this spoken tutorial on Customization of DSpace home page.
Slide: Learning Objectives In this tutorial, we will learn to
  • Change DSpace logos
  • Modify the DSpace banner and
  • Update the News sections
Slide: System requirements This tutorial is recorded using
  • Ubuntu Linux OS 18.04
  • DSpace version 6.3
  • gedit text editor and
  • Firefox web browser

However you may use any other text editor or browser of your choice.

Slide: Pre-requisites To practice this tutorial, you should have
  • Installed DSpace version 6.3 on your system
  • Tomcat service running
  • Administrator authority in DSpace and
  • A working internet connection
Slide: Pre-requisites Pre-requisites:
  • You should be familiar with basic Linux commands and HTML tags
  • If not then please go through the prerequisite tutorials on this website.
Slide: Code Files The files and commands used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract the files before practicing.

Slide : DSpace Customization
  • DSpace is a highly customizable software application.
  • We can customize the DSpace user interface and its behaviour as per our preference.
Slide : DSpace UI Customization The user interface of DSpace can be modified for
  • Branding of a repository
  • Communicate vision, mission of the organization
  • Enhance aesthetics and usability
  • Present tool tip or help to use

Now, let us understand the different sections of the DSpace home page.

Open Web Browser

Address Bar >> localhost:8080

Open a web browser.

In the address bar, type localhost:8080 and press Enter.

DSpace interface opens.

Point to different portions in DSpace home page We have a Navigation bar logo located at the top-left corner.

Below that we have the Banner section.

The DSpace logo is located next to the banner.

Point to different portions in DSpace home page Below the banner section, we have a green color bar called breadcrumb bar.

Below the breadcrumb bar, we have Top News and sidebar news sections.

Slide: DSpace Navbar logo

Name: dspace-logo-only.png

Location: /home/dspace/dspace-6.3-src-release/dspace-jspui/src/main/webapp/image.

Dimensions: 25 x 25 pixels.

Let us begin with the customization of the DSpace Navigation bar logo.

These are the properties for the logo.

We will replace this default logo with the new one.

Make sure that the new logo has the same properties, if you are using your own logo.

Ctrl+Alt+T keys Open the terminal by pressing Ctrl, Alt and T keys together.
Only Narration Here onwards please press the Enter key after typing each command.
[Terminal] Type:

cd Downloads

Go to the folder where you downloaded the images.

Mine is in the Downloads folder.

[Terminal] Type:

sudo mv dimages/* /home/dspace/

Then we will move the logos folder to the DSpace user’s Home folder.

To do so, we will type the command as shown.

If prompted, type the admin password and press Enter.

[Terminal] Type:

sudo su - dspace

Now, login as dspace user by typing sudo su - dspace.

If prompted, type the admin password and press Enter.

Slide : DSpace source code The source code for DSpace is located in the dspace-6.3-src-release directory.

If we wish to customize DSpace, then we have to make changes in this directory.

[Terminal] Type:

cd dspace-6.3-src-release/dspace-jspui/src/main/webapp/image

We will first change the current working directory to the DSpace Image directory.

So, on the terminal, type the command shown here.

[Terminal] Type:

sudo mv dspace-logo-only.png dspace-logo-only-old.png

Let us rename the default DSpace navigation bar logo for backup purposes.

To do so, we will type the command as shown here.

If prompted, type the dspace user password and press Enter.

[Terminal] Type:

cp $HOME/dspace-logo-only.png .

My new logo is in the Home directory of dspace user on my machine.

Let us copy and paste that inside the DSpace image directory.

To do so, I will type the command as shown here.

[Terminal] Type:

$HOME/Rebuild-DSpace

Next we have to rebuild DSpace to update these changes.

To do so, type the command as shown.

Rebuild process will take some time depending upon your internet speed.

[Terminal] Highlight BUILD SUCCESSFUL message On successful completion, BUILD SUCCESSFUL message will be displayed.
Refresh DSpace Home page Now, switch to the browser and refresh the page.

Observe the change - the old Navigation bar logo is replaced with the new one.

Only narration In case, if you can’t see the updated logo, kindly clear the cache and refresh the page.
Slide : DSpace logo

Name: logo.gif

Location: /home/dspace/dspace-6.3-src-release/dspace-jspui/src/main/webapp/image

Dimensions: 165 x 132 pixels.

Next let us try to add our logo instead of the DSpace logo next to the banner section.

These are the properties of the logo.

We will replace this default logo with our own logo.

Make sure that the new logo has the same properties, if you are using your own logo.

[Terminal] Type:

sudo mv logo.gif logo-old.gif

Let us rename the existing logo for backup purposes.

To do so, type the command as shown in the terminal.

[Terminal] Type:

cp $HOME/logo.gif .

Copy the new logo from Home directory of dspace user to DSpace Image directory.

To do so, type the command as shown here.

[Terminal] Type:

$HOME/Rebuild-DSpace

Now, rebuild DSpace to update the changes.

The build is successful as indicated by the success message.

Refresh DSpace Home page Now, switch to the browser and refresh the page.

Observe the change.

The DSpace logo next to the banner section is replaced with the new one.

Point to DSpace banner The DSpace banner is used for branding of repositories.

Let us proceed to modify the banner content now.

[Terminal] Type:

sudo gedit /home/dspace/dspace-6.3-src-release/dspace-api/src/main/resources/Messages.properties

Messages.properties is a file, which contains user interface text of DSpace.

Let us open this file.

To do so, type the command as shown.

Show Messages.properties file Messages.properties file contains Key Value pairs.

Keys are referenced from jsp files and the corresponding value is rendered in UI.

Banner Heading Text

jsp.layout.header-default.brand.heading = IITB Repository

Scroll down and locate the key

jsp.layout.header-default.brand.heading

Change its default value to IITB Repository.

Basic HTML tags such as heading can be used to write value.

jsp.layout.header-default.brand.heading = IITB Repository If you wish to display the text in a stylish way, we can use those html tags also.

For example, I can type the value as shown.

IITB Digital Repository is the collection of digital assets

 		Now locate the key jsp.layout.header-default.brand.description

Change its default value as shown.

Save and close Save and close the file.
[Terminal] Type:

$HOME/Rebuild-DSpace

Now, rebuild DSpace to update the changes.

Build is successful as indicated by the on-screen message.

Refresh DSpace Home page Now, switch to the browser and refresh the page.

Observe the change.

The banner section content is updated.

Point to Top and Sidebar news on Home Page Top news and Sidebar news are used to display updates and news about the Repository.

We will edit these in the front end itself with the help of an administrator.

Log in to DSpace

Mail address: dspace.u1@gmail.com

Password: u1pass

Click on the Sign on to button at the top right corner.

From the drop-down, select My DSpace.

Log into DSpace with your administrator’s email address and password.

For this demonstration, I will log in with the administrator’s email id dspace.u1@gmail.com.

My DSpace page appears on the screen.

Select Administer Click on the down arrow at the top right corner next to the admin’s mail id.

Then select Administer.

General Settings > Edit News We will be redirected to the admin interface.

On the top navigation bar, click on General Settings menu

Then select Edit News from drop-down.

Select Top News Select Top News in the News Editor section to edit Top News.
Click on Edit button Click on the Edit button.
Point to News Editor News Editor page opens for the Top News with default DSpace Top News.

You can use HTML tags in the News Editor.

Welcome to IITB digital repository!

 		I am updating the Top News as shown.
Click on Save button Click on the Save button.
Select Sidebar News and click on Edit button

Update the Sidebar News

Explore IITB digital repository and Enhance learning.

 		Likewise, I will edit the sidebar news.
Save Sidebar News Click on the Save button.
Click on Home Tab In the top navigation bar, click on the menu Home.

The Top News and Sidebar News section for the DSpace home page is updated.

Only narration LIkewise, we can customise our DSpace home page based on our needs.
Logout from DSpace interface.
[Terminal] type:

Logout [enter]

Switch to the terminal.

Type logout to exit from DSpace user login.

With this we have come to the end of this tutorial.

Let us summarize.

Slide: Summary In this tutorial we learnt to :
  • Change DSpace logos
  • Modify DSpace banner and
  • Update news sections.
Slide: Assignment As an assignment
  • Change Navbar logo and DSpace logo
  • Modify the DSpace banner content
Slide : About Spoken Tutorial project The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide : Spoken Tutorial workshops The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide: Answers for THIS Spoken Tutorial Please post your timed queries in this Forum.
Slide: Acknowledgement -I The Spoken Tutorial project is funded by MHRD, Government of India.
Slide: Acknowledgement -II DSpace spoken tutorial series is funded by the National Virtual Library of India, Ministry of Culture, Government of India.
Narration only This script and video for this tutorial was contributed by Pankaj Patil from IIT Bombay.

And this is Nancy Varkey signing off. Thanks for joining.

Contributors and Content Editors

Nancyvarkey, Pankajpatil694

Retrieved from "https://script.spoken-tutorial.org/index.php?title=DSpace/C2/Customization-of-DSpace-Home-page-on-Ubuntu-Linux-OS/English&oldid=52364"