View source for DSpace/C2/Customization-of--DSpace-Home-page-on-Windows-OS/English

'''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'''

{| border=1
|- 
| align=center| '''Visual Cue'''
| align=center| '''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 = <b> IITB Repository </b>'''
|| 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.
|- 
|| '''<h3> IITB Digital Repository is the collection of digital assets </h3>'''
|| 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.'''
|- 
|| '''<p>Welcome to IITB digital repository!</p>'''
|| 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'''

'''<p>Explore IITB digital repository and Enhance learning.</p>'''
|| 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.
|-
|}