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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''SayScript: Customization of DSpace Home Page (on Windows 10)''' '''Author : Pankaj Patil''' '''Keywords: DSpace Customization, Home page customization, Dspace Logo, DSpac...")
 
Line 60: Line 60:
 
* Enhance aesthetics and usability and
 
* Enhance aesthetics and usability and
 
* Present tool tip or help to use
 
* 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.'''
 
|-  
 
|-  
Line 65: Line 66:
 
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'''.
 +
 
The '''DSpace''' interface opens.
 
The '''DSpace''' interface opens.
 
|-  
 
|-  
 
|| 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 a '''Banner''' section.
 
Below that we have a '''Banner''' section.
 +
 
The''' DSpace logo''' is located next to the '''banner'''.
 
The''' DSpace logo''' is located next to the '''banner'''.
 
|-  
 
|-  
 
|| 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''' Side news '''sections.
 
Below the '''breadcrumb bar, '''we have''' Top News '''and''' Side news '''sections.
 
|-  
 
|-  
Line 82: Line 88:
 
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 a new one.
 
We will replace this default '''logo''' with a 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'''.
 
|-  
 
|-  
 
|| 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.
 
|-  
 
|-  
Line 108: Line 118:
 
|| Browse to '''Downloads''' folder
 
|| Browse to '''Downloads''' folder
 
|| Go to the folder where you downloaded the images from the '''Code files''' link.
 
|| Go to the folder where you downloaded the images from the '''Code files''' link.
 +
 
I have downloaded it in the '''Downloads''' folder.
 
I have downloaded it in the '''Downloads''' folder.
 
|-  
 
|-  
Line 131: Line 142:
 
|-  
 
|-  
 
|| Show closing of '''Command Prompt'''
 
|| Show closing of '''Command Prompt'''
|| After the '''rebuild''' process, the '''Command Prompt '''closes automatically.''' '''
+
|| After the '''rebuild''' process, the '''Command Prompt '''closes automatically.
 
|-  
 
|-  
 
|| 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.
 
|-  
 
|-  
Line 145: Line 157:
 
Dimensions: '''165 x 132 pixels'''.
 
Dimensions: '''165 x 132 pixels'''.
 
|| Now, next let us try to add our '''logo''' instead of the '''DSpace logo''' next to the '''banner''' section.
 
|| Now, 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'''.
 
|-  
 
|-  
Line 175: Line 190:
 
|| 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 our own '''logo'''.
 
The '''DSpace logo''' next to the '''banner''' section is replaced with our own '''logo'''.
 
|-  
 
|-  
 
|| 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.
 
|-  
 
|-  
Line 194: Line 212:
 
|| Show '''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'''.  
 
|-  
 
|-  
 
|| Banner Heading Text
 
|| Banner Heading Text
 
'''jsp.layout.header-default.brand.heading = IITB Repository'''
 
'''jsp.layout.header-default.brand.heading = IITB Repository'''
|| Scroll down and locate the '''key '''
+
|| Scroll down and locate the '''key 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 the '''value'''.
 
Basic '''HTML tags''' such as '''heading''' can be used to write the '''value'''.
 
|-  
 
|-  
 
|| '''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.
 
|-  
 
|-  
 
|| '''<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.
 
|-  
 
|-  
Line 222: Line 244:
 
|| 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 now.
 
The '''banner section''' content is updated now.
 
|-  
 
|-  
 
|| Point to '''Top and Sidebar news on Home Page'''
 
|| Point to '''Top and Sidebar news on Home Page'''
 
|| '''Top news''' and '''Side news''' are used to display updates and news about the '''Repository'''.
 
|| '''Top news''' and '''Side news''' are used to display updates and news about the '''Repository'''.
 +
 
We will edit these in the front end itself with the help of the '''administrator'''.
 
We will edit these in the front end itself with the help of the '''administrator'''.
 
|-  
 
|-  
Line 233: Line 258:
 
'''Password: u1pass'''
 
'''Password: u1pass'''
 
|| Click on the '''Sign on to '''button at the top right corner.
 
|| Click on the '''Sign on to '''button at the top right corner.
 +
 
From the drop-down, select '''My DSpace.'''
 
From the drop-down, select '''My DSpace.'''
 +
 
'''Log''' into '''DSpace''' with your '''administrator’s email address '''and''' password'''.
 
'''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'''
 
For this demonstration, I will log in with the '''administrator’s email id dspace.u1@gmail.com'''
 +
 
'''My DSpace''' page appears on the screen.
 
'''My DSpace''' page appears on the screen.
 
|-  
 
|-  
 
|| Select''' Administer'''
 
|| Select''' Administer'''
 
|| Click on the down arrow at the top right corner next to the '''admin’s mail id.'''
 
|| Click on the down arrow at the top right corner next to the '''admin’s mail id.'''
 +
 
Then select '''Administer'''.
 
Then select '''Administer'''.
 
|-  
 
|-  
 
|| '''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 the '''General Settings''' menu.
 
On the top '''navigation bar''', click on the '''General Settings''' menu.
 +
 
Then select '''Edit News '''from the drop-down.
 
Then select '''Edit News '''from the drop-down.
 
|-  
 
|-  
Line 255: Line 287:
 
|| Point to''' News Editor'''
 
|| 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.'''
 
|-  
 
|-  
Line 264: Line 297:
 
|-  
 
|-  
 
|| Select''' Sidebar News '''and click on''' Edit '''button
 
|| Select''' Sidebar News '''and click on''' Edit '''button
 +
 
Update the '''Sidebar News'''
 
Update the '''Sidebar News'''
 +
 
'''<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 '''as shown here.
 
|| Likewise, I will edit the '''sidebar news '''as shown here.
Line 273: Line 308:
 
|| Click on''' Home Tab'''
 
|| Click on''' Home Tab'''
 
|| In the top '''navigation bar''', click on the '''Home '''menu'''.'''
 
|| In the top '''navigation bar''', click on the '''Home '''menu'''.'''
 +
 
The''' Top News '''and''' Sidebar News '''section for the '''DSpace home page''' is now updated.
 
The''' Top News '''and''' Sidebar News '''section for the '''DSpace home page''' is now updated.
 
|-  
 
|-  
Line 299: Line 335:
 
|  | 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.
 
|-
 
|-
 
|  | 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.
 
|-  
 
|-  

Revision as of 13:00, 9 January 2021

SayScript: Customization of DSpace Home Page (on Windows 10)

Author : Pankaj Patil

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

Visual Cue Narration
Slide: Title Welcome to this spoken tutorial on Customization of DSpace home page (on Windows 10)
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
  • Windows 10 64 bit OS
  • DSpace version 6.3
  • WordPad 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 should be running
  • Have Administrator authority in DSpace and
  • And have a working internet connection
Slide: Pre-requisites
  • You should also have familiarity with basic 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 a file in the Code Files link on this tutorial page.
  • Please download and extract the files before practicing.
Switch to WordPad and open the file I have opened the commands file in the WordPad editor on my machine.

And I will use the same file to copy-paste the commands during the demonstration. The shortcut to paste on the Command Prompt is Ctrl and V keys.

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 and
  • 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.

The 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 a 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 Side news sections.

Slide: DSpace Navbar logo

Name: dspace-logo-only.png Location: C:\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 a new one.

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

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.

Narration only Let us rename the default DSpace navigation bar logo for backup purposes.
Browse to image folder of dspace

C drive >> dspace-6.3-src-release >> dspace-jspui >> src >> main >> webapp >> image

To do so, browse to the image folder of dspace as shown.
Rename dspace-logo-only.png as dspace-logo-only-old.png Rename dspace-logo-only.png as dspace-logo-only-old.png as shown.
Narration Only Now, let us proceed to copy a new logo into the image directory.
Open File Explorer For that, open the File Explorer application.
Browse to Downloads folder Go to the folder where you downloaded the images from the Code files link.

I have downloaded it in the Downloads folder.

Browse to dimages folder I will now browse to the dimages folder.
Copy dspace-logo-only.png from dimages to image folder of DSpace Copy dspace-logo-only.png from dimages to the image folder of DSpace as shown.
Narration only Next we have to rebuild DSpace to update these changes.
Go to the Desktop

Right click on Rebuild-DSpace >> Run as Administrator

Go to the Desktop and locate the file Rebuild-DSpace

Then right-click on it and select Run as Administrator.

Click on yes If prompted, click on the Yes button in the User Account Control dialog box
Point to BUILD SUCCESSFUL message On successful completion, BUILD SUCCESSFUL message will appear on the Command Prompt.
Show closing of Command Prompt After the rebuild process, the Command Prompt closes automatically.
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: C:\dspace-6.3-src-release\dspace-jspui\src\main\webapp\image Dimensions: 165 x 132 pixels.

Now, 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.

Narration Only Let us rename the existing logo for backup purposes.
Switch back to images folder of DSpace Switch to the images folder of DSpace.
Rename logo.gif as logo-old.gif Rename logo.gif as logo-old.gif as shown.
copy logo.gif image from dimages to image folder of DSpace Next, copy the new logo.gif image from dimages to the image folder of DSpace as shown.
Narration only Now, rebuild DSpace to update the changes.
Go to the Desktop Go to the Desktop.
Right click on Rebuild-DSpace >> Select Run as Administrator Rebuild DSpace as shown.
Point to BUILD SUCCESSFUL message The build is successful.
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 our own logo.

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

Let us proceed to modify the banner content now.

Browse to resources folder

C Drive >> dspace-6.3-src-release >> dspace-api >> src >> main >> resources

So, in the file explorer, browse to the resources folder of dspace as shown.
Point to Messages.properties Messages.properties is a file, which contains user interface text of DSpace
Open Messages.properties with WordPad Let us open this file using the WordPad editor.
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 the 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.
Right click on Rebuild-DSpace >> Run as Administrator Once again, rebuild DSpace as shown.
Narration Only The 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 now.

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

We will edit these in the front end itself with the help of the 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 the General Settings menu.

Then select Edit News from the 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 now.
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 as shown here.
Save Sidebar News Click on the Save button.
Click on Home Tab In the top navigation bar, click on the Home menu.

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

Only narration LIkewise, we can customise our DSpace home page based on our requirements.
Logout form DSpace Let us now logout from the DSpace interface.
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 with your own logos
  • Modify the DSpace banner content as well
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 Spoken Tutorial project is funded by the Ministry of Education (MoE), 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, Pravin1389