Page History

...

In the "themes" section of your config/config.*.yml configuration file, add (one or more) "headTags", pointing at the favicon file you want to use. For example:

Code Block

themes:
  # The default dspace theme
  - name: dspace
    # Whenever this theme is active, the following tags will be injected into the <head> of the page.
    # Example use case: set the favicon based on the active theme.
    headTags:
      # Insert <link rel="icon" href="assets/dspace/images/favicons/favicon.ico" sizes="any"/> into the <head> of the page.
      - tagName: link
        attributes:
          rel: icon
          href: assets/dspace/images/favicons/favicon.ico
          sizes: any
      # Insert <link rel="icon" href="assets/dspace/images/favicons/favicon.svg" type="image/svg+xml"/> into the <head> of the page.
      - tagName: link
        attributes:
          rel: icon
          href: assets/dspace/images/favicons/favicon.svg
          type: image/svg+xml
      # Insert <link rel="apple-touch-icon" href="assets/dspace/images/favicons/apple-touch-icon.png"/> into the <head> of the page.
      - tagName: link
        attributes:
          rel: apple-touch-icon
          href: assets/dspace/images/favicons/apple-touch-icon.png
      # Insert <link rel="manifest" href="assets/dspace/images/favicons/manifest.webmanifest"/> into the <head> of the page.
      - tagName: link
        attributes:
          rel: manifest
          href: assets/dspace/images/favicons/manifest.webmanifest

In 7.2 or above, any changes to this configuration just require restarting your site (no rebuild necessary). In 7.1 or 7.0, you must rebuild your site after modifying the favicon.ico.
NOTE: If you specify multiple formats for your favicon (e.g. favicon.svg and favicon.ico), then your browser will select which one it prefers (e.g. Chrome seems to favor SVG over ICO). However, if you want to force all browser to use a single favicon, then you may wish to only specify one "icon" format in your headTags section.

Customize Home Page News

The primary Home page content is all included in the source code under "src/app/home-page". The News section is specifically under "src/app/home-page/home-news".

First, you'll want to decide if you want to modify just the Home Page News HTML, or styles (CSS/Sass), or both.
1. If you want to modify the HTML, you'll need to create a copy of the HTML in "app/home-page/home-news/home-news.component.html" in your theme, . This is where you place your changes.
2. If you want to modify the styles, you'll need to create a copy of the CSS in "app/home-page/home-news/home-news.component.scss" in your theme, . This is where you place your changes.

Edit your theme's app/home-page/home-news/home-news.component.ts file. Swap the "templateUrl" and "styleUrls" properties, based on which you want to modify in your theme.

Code Block

title	home-news.component.ts

@Component({
  selector: 'ds-home-news',
  // If you want to modify styles, then...
  // Uncomment the styleUrls which references the "home-news.component.scss" file in your theme's directory
  // and comment out the one that references the default "src/app/home-page/home-news/home-news.component.scss"
  styleUrls: ['./home-news.component.scss'],
  //styleUrls: ['../../../../../app/home-page/home-news/home-news.component.scss'],
  // If you want to modify HTML, then...
  // Uncomment the templateUrl which references the "home-news.component.html" file in your theme's directory
  // and comment out the one that references the default "src/app/home-page/home-news/home-news.component.html"
  templateUrl: './home-news.component.html'
  //templateUrl: '../../../../../app/home-page/home-news/home-news.component.html'
})

Now, based on what you want to modify, you will need to either update your theme's copy of home-news.component.html or home-news.component.scss or both.
1. To change HTML: Your theme's version of the home-news.component.html file will be empty by default. Copy over the default HTML code from src/app/home-page/home-news/home-news.component.html into your version of this file.
2. To change Styles: Your theme's version of the home-news.component.scss file will be empty by default. Copy over the default Sass code from src/app/home-page/home-news/home-news.component.scss into your version of this file.
Modify the HTML or Sass as you see fit.
1. If you want to add images, add them to your theme's assets/images folder. Then reference them at the /assets/[theme-name]/images/ URL path.
2. Keep in mind, all Bootstrap variables, utility classes & styles can be used in these files. Take advantage of Bootstrap when you can do so. Take advantage of Bootstrap when you can do so.
Any changes require rebuilding your UI. If you are running in "dev mode" (yarn start:dev), then the UI will restart automatically whenever changes are detected.

Customize the simple Item page

The "simple" Item page is the default display for an Item (when you visit any item via a URL like [dspace.ui.url]/items/[uuid]). If you want to modify the metadata fields displayed on that page by default, that can be done quite easily.

Normal Item: The code for the simple Item page for a normal Item (i.e. not an Entity) can be found in the source code at "src/app/item-page/simple/item-types/untyped-item/"
Publication Entity: If you are wanting to modify the display of Publication Entities, it has separate source code under "src/app/item-page/simple/item-types/publication/"

Here's the basics of modifying this page. The below examples assume you are working with a normal Item. But the same logic would work for modifying the Publication pages (you'd just need to modify it's HTML/CSS instead)

First, you'll want to decide if you want to modify just the Item Page HTML, or styles (CSS/Sass), or both.
1. If you want to modify the HTML, you'll need to create a copy of the HTML in "src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html" in your theme. This is where you place your changes.
2. If you want to modify the styles, you'll need to create a copy of the CSS in "src/app/item-page/simple/item-types/untyped-item/untyped-item.component.scss" in your theme. This is where you place your changes.

Edit your theme's app/item-page/simple/item-types/untyped-item/untyped-item.component.ts file. Swap the "templateUrl" and "styleUrls" properties, based on which you want to modify in your theme. Also, MAKE SURE the "@listableObjectComponent" is using your theme... the last parameter should be the name of your theme!

Code Block

title	untyped-item.component.ts

// MAKE SURE that the final parameter here is the name of your theme. This one assumes your theme is named "custom".
@listableObjectComponent(Item, ViewMode.StandalonePage, Context.Any, 'custom')
@Component({
  selector: 'ds-untyped-item',
  // If you want to modify styles, then...
  // Uncomment the styleUrls which references the "untyped-item.component.scss" file in your theme's directory
  // and comment out the one that references the default in "src/app/"
  styleUrls: ['./untyped-item.component.scss'],
  //styleUrls: ['../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component.scss'],
  // If you want to modify HTML, then...
  // Uncomment the templateUrl which references the "untyped-item.component.html" file in your theme's directory
  // and comment out the one that references the default "src/app/"
  templateUrl: './untyped-item.component.html',
  //templateUrl: '../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component.html',
})

Now, based on what you want to modify, you will need to either update your theme's copy of untyped-item.component.html or untyped-item.component.scss or both.
1. To change HTML: Your theme's version of the untyped-item.component.html file may be empty by default. Copy over the default HTML code from src/item-page/simple/item-types/untyped-item/untyped-item.component.html into your version of this file.
2. To change Styles: Your theme's version of the untyped-item.component.scss file may be empty by default. Copy over the default Sass code from src/item-page/simple/item-types/untyped-item/untyped-item.component.scss into your version of this file
In the HTML of the Simple Item page, you'll see a number of custom "ds-" HTML-like tags which make displaying individual metadata fields easier. These tags make it easier to add/remove metadata fields on this page.
1. <ds-generic-item-page-field> - This tag can be used to display the value of any metadata field (as a string).
  1. Put the name of the metadata field in the "[fields]" attribute... see existing fields as an example.
  2. Put the i18n label you want to use for this field in the "[label]" attribute. Again, see existing fields as an example. This i18n tag MUST then be added to your "src/assets/i18n/en.json5" file (or corresponding file depending on your language)
  3. For example, here's a new ds-generic-item-page-field which displays the value of the "dc.title.alternative" field with a label defined in the "
2. <ds-item-page-uri-field> - This tag can be used to display the value of any metadata field as an HTML link. (The value must already be a URL)
  1. This field has the same attributes at <ds-generic-item-page-field> above.
3. Some specific tags exist for other fields (e.g. <ds-item-page-date-field> and <ds-item-page-abstract-field>). These are currently separate components under "src/app/item-page/simple/field-components/specific-field/" directories. They are hardcoded to use a specific metadata field and label, but you could customize the components in that location.
To add new fields, just add new "<ds-generic-item-page-field>" tags (or similar). To remove fields, just comment them out or remove the HTML. You can also restructure the columns on that page using simple HTML and Bootstrap CSS.
Any changes require rebuilding your UI. If you are running in "dev mode" (yarn start:dev), then the UI will restart automatically whenever changes are detected.

NOTE: If your changes to the simple item page don't appear to be working, make sure that you have updated the eager-theme.module.ts to load your custom theme as described in the "Getting Started" section above! This small change is REQUIRED for the untyped-item component to work in a custom theme. You also may wish to restart your dev server to ensure nothing is being cached.

Customize other Components in your Theme

...

Every DSpace Angular component has a corresponding "<ds-*>" HTML HTML-like tag. The HTML tag is called the "selector" (or CSS selector), and it is defined in the "*.component.ts" tag using the "@Component" decorator (see Angular's Component Overview for the basics). The key point to remember is that if you can find the "<ds-* >" tag, then it is easy to determine which component generated that tag!

...

View the HTML source of the page in your browser. Search for that section of the page. (Or, right click on that part of the page and select "Inspect")
1. For example, on the homepage view the source of the "Communities in DSpace" heading
Look for a parent HTML tag that begins with "ds-". This is the component selector!
1. Continuing the example, if you view the source of the "Communities in DSpace" heading, you'll see something like this (all HTML attributes have been removed to make the example simplier):
  Code Block
  <ds-top-level-community-list> <div> <h2> Communities in DSpace </h2> <p>Select a community to browse its collections.</p> </div> </ds-top-level-community-list>
2. Based on the above HTML source, you can see that the "Communities in DSpace" header/content is coming from a component who's selector is "ds-top-level-community-list"
Now, search the source code (./src/app/) directories for a ".component.ts" file which includes that "ds-" tag name. This can most easily be done in an IDE, but also could be done using command line tools (e.g. grep like this).
1. Continuing the example, if you search the ./src/app/ directories for "ds-top-level-community-list" you'll find a match in the "src/app/home-page/top-level-community-list/top-level-community-list.component.ts" file:
  Code Block
  @Component({ selector: 'ds-top-level-community-list', ... })
2. This lets you know that to modify the display of that section of the page, you may need to edit either the "top-level-community-list.component.ts" file or it's corresponding HTML file at "top-level-community-list.component.html"
Once you've located the component, you can edit that component's HTML file (ending in "component.html") to change that section of the page.
1. Keep in mind, the component's HTML file may reference other "ds-" tags! Those are other components in DSpace which you can find again by searching the "./src/app" directories for that tag.

...

All Versions

DSpace Documentation

Page tree

Versions Compared

Old Version 60

New Version Current

Key

Customize Home Page News

Customize the simple Item page

Customize other Components in your Theme