Difference between revisions of "DSpace/C2/Customization-of-DSpace-Home-page-on-Ubuntu-Linux-OS/English"
Nancyvarkey (Talk | contribs) |
|||
Line 11: | Line 11: | ||
|- | |- | ||
|| Slide: Title | || Slide: Title | ||
− | || Welcome to this spoken tutorial on '''Customization of''' '''DSpace | + | || Welcome to this spoken tutorial on '''Customization of''' '''DSpace Home Page.''' |
|- | |- | ||
|| Slide: Learning Objectives | || Slide: Learning Objectives | ||
|| In this tutorial, we will learn to | || In this tutorial, we will learn to | ||
− | * Change '''DSpace | + | * Change '''DSpace logos''' |
− | * Modify the '''DSpace | + | * Modify the '''DSpace banner''' and |
* Update the '''News''' sections | * Update the '''News''' sections | ||
Line 24: | Line 24: | ||
* '''Ubuntu Linux OS 18.04''' | * '''Ubuntu Linux OS 18.04''' | ||
* '''DSpace version 6.3''' | * '''DSpace version 6.3''' | ||
− | * '''gedit | + | * '''gedit text editor '''and |
* '''Firefox web browser''' | * '''Firefox web browser''' | ||
Line 33: | Line 33: | ||
* Installed '''DSpace version 6.3''' on your system | * Installed '''DSpace version 6.3''' on your system | ||
* '''Tomcat''' service running | * '''Tomcat''' service running | ||
− | * '''Administrator''' | + | * '''Administrator authority''' in '''DSpace '''and |
− | * A working internet connection | + | * A working '''internet''' connection |
|- | |- | ||
Line 61: | Line 61: | ||
* Present tool tip or help to use | * Present tool tip or help to use | ||
− | Now, let us understand the different sections of the '''DSpace | + | Now, let us understand the different sections of the '''DSpace Home Page.''' |
|- | |- | ||
|| Open Web Browser | || Open Web Browser | ||
Line 83: | Line 83: | ||
|| 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''' | + | Below the '''breadcrumb bar, '''we have''' Top News '''and''' Sidebar news '''sections. |
|- | |- | ||
|| Slide: '''DSpace Navbar logo''' | || Slide: '''DSpace Navbar logo''' | ||
Line 98: | Line 98: | ||
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'''. |
|- | |- | ||
|| '''Ctrl+Alt+T keys''' | || '''Ctrl+Alt+T keys''' | ||
Line 137: | Line 137: | ||
'''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 | + | || 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. | ||
Line 206: | Line 206: | ||
'''cp $HOME/logo.gif .''' | '''cp $HOME/logo.gif .''' | ||
− | || Copy the new '''logo''' from '''Home''' directory of '''dspace''' | + | || 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. | ||
Line 225: | Line 225: | ||
|- | |- | ||
|| 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 285: | Line 285: | ||
|| '''Top news''' and '''Sidebar news''' are used to display updates and news about the '''Repository'''. | || '''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'''. | + | We will edit these in the front end itself, with the help of an '''administrator'''. |
+ | |- | ||
+ | ||Click on '''Sign on to ''' >> select '''My DSpace''' | ||
+ | || Click on the '''Sign on to '''button at the top right corner. | ||
+ | |||
+ | From the drop-down, select '''My DSpace.''' | ||
|- | |- | ||
|| Log in to '''DSpace''' | || Log in to '''DSpace''' | ||
Line 292: | Line 297: | ||
'''Password: u1pass''' | '''Password: u1pass''' | ||
− | || | + | ||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. | ||
Line 336: | Line 337: | ||
'''<p>Explore IITB digital repository and Enhance learning.</p>''' | '''<p>Explore IITB digital repository and Enhance learning.</p>''' | ||
− | || Likewise, I will edit the ''' | + | || Likewise, I will edit the '''Sidebar news'''. |
|- | |- | ||
|| Save '''Sidebar News''' | || Save '''Sidebar News''' | ||
Line 344: | Line 345: | ||
|| 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 | + | The''' Top News '''and''' Sidebar News '''section for the '''DSpace Home Page''' is updated. |
|- | |- | ||
|| Only narration | || Only narration | ||
− | || | + | || Likewise, we can customise our '''DSpace home page''' based on our needs. |
|- | |- | ||
|| | || | ||
Line 369: | Line 370: | ||
* Change '''DSpace logos''' | * Change '''DSpace logos''' | ||
* Modify '''DSpace banner''' and | * Modify '''DSpace banner''' and | ||
− | * Update | + | * Update '''News''' sections. |
|- | |- |
Revision as of 17:52, 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
|
Slide: System requirements | This tutorial is recorded using
However you may use any other text editor or browser of your choice. |
Slide: Pre-requisites | To practice this tutorial, you should have
|
Slide: Pre-requisites | Pre-requisites:
|
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 |
|
Slide : DSpace UI Customization | The user interface of DSpace can be modified for
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. |
Click on Sign on to >> select My DSpace | Click on the Sign on to button at the top right corner.
From the drop-down, select My DSpace. |
Log in to DSpace
Mail address: dspace.u1@gmail.com Password: u1pass |
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 :
|
Slide: Assignment | As an assignment
|
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. |