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

...

All Versions

DSpace Documentation

Page tree

Versions Compared

Old Version 61

New Version Current

Key

Customize Home Page News

Customize the simple Item page

Customize other Components in your Theme