Versions Compared

Old Version 1

changes.mady.by.user Tim Donohue

Saved on

compared with

New Version 2

changes.mady.by.user Tim Donohue

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Whenever you are testing changes in the User Interface, may wish to see you changes "live" instead of rebuilding after each change.  The easiest way to achieve this is to run the User Interface locally (i.e. on localhost) in developer mode by running:

Code Block
yarnnpm run start:dev

This mode has several development-specific advantages:

  • UI starts more rapidly
  • UI will use a separate "config.dev.yml" configuration file (in 7. 1 or 7.0 this file was named "environment.dev.ts"). This lets you have development specific configs, separate from your Production settings in "config.prod.yml" (in 7.1 or 7.0 this file was named "environment.prod.ts")
  • UI will automatically reload anytime you modify a file.  Essentially the UI will constantly "watch" for changes (as you make them) & will reload anytime you modify a file.  This lets you find issues/bugs more rapidly and also test more rapidly.

...

  • Base Theme (src/app/ directories):  The primary look & feel of DSpace (e.g. HTML layout, header/footer, etc) is defined by the HTML5 templates under this directory. Each HTML5 template is stored in a subdirectory named for the Angular component where that template is used. The base theme includes very limited styling (CSS, etc), based heavily on default Bootstrap (4.x) styling, and only allowing for minor tweaks to improve WCAG 2.1 AA accessibility.
  • Custom Theme (src/themes/custom directories): This directory acts as the scaffolding or template for creating a new custom theme.  It provides (empty) Angular components/templates which allow you to change the theme of individual components.  Since all files are empty by default, if you enable this theme (without modifying it), it will look identical to the Base Theme.
  • DSpace Theme (src/themes/dspace directories): This is the default theme for DSpace 7.  It's a very simple example theme providing a custom color scheme, header & homepage on top of the Base Theme. It's important to note that this theme ONLY provides custom CSS/images to override our Base Theme. All HTML5 templates are included at the Base Theme level, as this ensures those HTML5 templates are also available to the Custom Theme.

...

  1. Choose a theme to start from:  As documented above, there are two "src/theme/" directories provided out of the box: "custom" or "dspace".  You should select one to use as the basis for your theme.  Which you choose is up to you, but here are a few things to consider:
    1. DSpace Theme (src/themes/dspace): This is a simple, example theme for novice users.  Primarily, in this theme, you can immediately customize the CSS, header & homepage components. You can add other components as needed (see "Adding Component Directories to your Theme" below).
      1. Advantages: This theme is small and simple. It provides an easy starting point / example for basic themes.  Future User Interface upgrades (e.g. from 7.1 → 7.2) are likely to be easier because the theme is smaller in size.
      2. Disadvantages: It has very few component directories by default. But you can always add more.  See "Adding Component Directories to your Theme" below.
    2. Custom Theme (src/themes/custom): This theme provides all available theme-able components for more advanced or complex theming options. This provides you full control over everything that is theme-able in the User Interface
      1. Advantages: All theme-able components are provided in subdirectories. This makes it easier to modify the look and feel of any area of the User Interface.
      2. Disadvantages: After creating your theme, you may wish to remove any component directories that you didn't modify (see "Removing Component Directories from your Theme" below).  Generally speaking, upgrades (e.g. from 7.1 → 7.2) are often easier if your theme includes fewer components (as your theme may require updates if any component it references change significantly).
  2. Create your own theme folder OR edit the existing theme folder: Either edit the theme directory in place, or copy it (and all its contents) into a new folder under src/themes/ (choose whatever folder name you want)
  3. Register your theme folder (only necessary if you create a new folder in previous step): Now, we need to make the UI aware of this new theme folder, before it can be used in configuration.

    1. Modify angular.json (in the root folder), adding your theme folder's main "theme.scss" file to the "styles" list.  The below example is for a new theme folder named src/themes/mydspacesite/

      Code Block
      "styles": [
  "src/styles/startup.scss",
  {
     "input": "src/styles/base-theme.scss",
     "inject": false,
     "bundleName": "base-theme"
  },
  ...
  {
     "input": "src/themes/mydspacesite/styles/theme.scss",
     "inject": false,
     "bundleName": "mydspacesite-theme"
  },
]

      NOTE: the "bundleName" for your custom them MUST use the format "${folder-name}-theme".  E.g. if the folder is named "src/themes/amazingtheme", then the "bundleName" MUST be "amazingtheme-theme"

  4. (As of 7.3 or above) Import the new theme's eager-theme.module.ts in themes/eager-themes.module.ts. If you're switching from one theme to another, remove the old theme from the imports. Below is an example for a theme named "my-theme":

    Code Block
    titlethemes/eager-themes.module.ts
    // COMMENT out the imports for any themes you are NOT using
//import { EagerThemeModule as DSpaceEagerThemeModule } from './dspace/eager-theme.module';
//import { EagerThemeModule as CustomEagerThemeModule } from './custom/eager-theme.module';

// Add a new import for your custom theme. Give its EagerThemeModule a unique name (e.g. "as [choose-a-unique-name]").
// Make sure the path points at its "eager-theme.module.ts" (see 'from' portion of the import statement).
// NOTE: You can import multiple themes if you plan to use multiple themes
import { EagerThemeModule as MyThemeEagerThemeModule } from './my-theme/eager-theme.module';

...
@NgModule({
  imports: [
    // Again, comment out any themes you are NOT using
    //DSpaceEagerThemeModule,
    //CustomEagerThemeModule,

    // Add your custom theme's EagerThemeModule to this list
    // NOTE: you can add multiple theme's to this list if you plan to use multiple themes.
    MyThemeEagerThemeModule,
  ],
})


  5. Enable your theme: Modify your config/config.*.yml configuration file (in 7.1 or 7.0 this file was named src/environments/environment.*.ts), adding your new theme to the "themes" array in that file.  Pay close attention to modify the correct configuration file (e.g. modify config.dev.yml if running in dev mode, or config.prod.yml if running in prod mode).  We recommend starting in "dev mode" (config.dev.yml) as this mode lets you see your changes immediately in a browser without a full rebuild of the UI – see next step. 

    Code Block
    languageyml
    titleFormat for 7.2 or above (config.*.yml)
    # In this example, we only show one theme enabled. It's possible to enable multiple (see below note)
themes: 
  - name: 'mydspacesite'



    Code Block
    titleFormat for 7.1 or 7.0 (environment.*.ts)
    // In this example, we only show one theme enabled. It's possible to enable multiple (see below note)
themes: [
 {
    name: 'mydspacesite'
 },
]


    NOTE: The "name" used is the name of the theme's folder, so the example is for enabling a theme at src/themes/mydspacesite/ globally.  You should also comment out the default "dspace" theme, if you intend to replace it entirely.
    NOTE #2: You may also choose to enable multiple themes for your site, and even specify a different theme for different Communities, Collections, Items or URL paths. See User Interface Configuration for more details on "Theme Settings"

  6. Verify your settings by starting the UI (ideally in Dev mode): At this point, you should verify the basic settings you've made all "work".  We recommend doing your theme work while running the UI in "dev mode", as the UI will auto-restart anytime you save a new change.  This will allow you to quickly see the impact of each change in your browser. 

    Code Block
    # Start in dev mode (which uses config.dev.yml)
yarnnpm run start:dev


  7. At this point, you can start making changes to your theme.  See the following sections for examples of how to make common changes.

...

  1. Global style changes: All global style changes can be made in your theme's styles folder (e.g. src/themes/mydspacesite/styles). There are four main files in that folder:
    1. _theme_sass_variable_overrides.scss - May be used to override Bootstrap's default Sass variables.  This is the file you may wish to use for most  style changes. There are a large number of Bootstrap variables available which control everything from fonts, colors and the base style for all Bootstrap web components.  For a full list of Bootstrap variables you can override in this file, see the node_modules/bootstrap/scss/_variables.scss file (which is installed in your source directory when you run "yarn installnpm install"). More information may also be found in the Bootstrap Sass documentation at https://getbootstrap.com/docs/4.0/getting-started/theming/#sass
    2. _theme_css_variable_overrides.scss - May be used to override DSpace's default CSS variables. DSpace's UI uses CSS variables for all its components. These variables all start with "--ds-*", and are listed in src/styles/_custom_variables.scss. You can also use this file to add your own, custom CSS variables which you want to use for your theme.  If you create custom variables, avoid naming them with a "--ds-*" or a "--bs-*" prefix, as those are reserved for DSpace and Bootstrap variables.
    3. _global-styles.scss - May be used to modify the global CSS/SCSS for the site.  This file may be used to override the default global style contained in src/styles/_global-styles.scss .  Keep in mind, many styles can be more quickly changed by simply updating a variable in one of the above "*_variable_overrides.scss" files.  So, it's often easier to use those first, where possible.
    4. theme.scss - This just imports all the necessary Sass files to create the theme. It's unnecessary to modify directly, unless you with to add new Sass files to your theme.
  2. Modifying the default font:  By default, DSpace uses Bootstrap's "native font stack", which just uses system UI fonts. However, the font used in your site can be quickly updated via Bootstrap variables in your theme's _theme_sass_variable_overrides.scss file. 

    1. One option is to add a new import statement and modify the "$font-family-sans-serif" variable:

      Code Block
      // Import the font (from a URL)
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

// Configure Bootstrap to use this font (and list a number of backup fonts to use on various systems)
$font-family-sans-serif: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;


    2. If your font requires installing local files, you can do the following
      1. Copy your font file(s) in your theme's assets/fonts/ folder

      2. Create a new ".scss" file specific to your font in that folder, e.g. assets/fonts/open-sans.scss, and use the "@font-face" CSS rule to load that font:

        Code Block
        titleopen-sans.scss
        @font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/assets/fonts/OpenSans-Regular-webfont.woff") format("woff");
}


      3. Then, import that new "open-sans.scss" file and use it in the "$font-family-sans-serif" variable

        Code Block
        // Import the font via the custom SCSS file
@import '../assets/fonts/open-sans';

// Configure Bootstrap to use this font (and list a number of backup fonts to use on various systems) 
$font-family-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;


    3. Keep in mind, as changing the font just requires adjusting Bootstrap Sass variables, there are a lot of Bootstrap guides out there that can help you make more advanced changes
  3. Modifying default color scheme: The colors used in your site can be quickly updated via Bootstrap variables in your theme's _theme_sass_variable_overrides.scss file. 
    1. Again, you can use entirely Bootstrap variables to adjust color schemes.  See the Bootstrap Theming Colors documentation
    2. A list of all Bootstrap color variables can be found in the node_modules/bootstrap/scss/_variables.scss file
    3. Additional examples can be found in the out-of-the-box "dspace" theme, which adjusts the default Bootstrap colors slightly for both accessibility & to match the DSpace logo.
  4. Any changes require rebuilding your UI. If you are running in "dev mode" (yarn startnpm run start:dev), then the UI will restart automatically whenever changes are detected.

...

  1. Copy your logo to your theme's assets/images/ folder. Anything in this theme folder will be deployed to /assets/[theme-name]/images/ URL  path.

  2. Edit your theme's app/header/header.component.ts file. Swap the "templateUrl" property that your theme is using the local copy of "header.component.html"

    Code Block
    titleheader.component.ts
    @Component({
  selector: 'ds-header',
  // styleUrls: ['header.component.scss'],
  styleUrls: ['../../../../app/header/header.component.scss'],
  // Uncomment the templateUrl which references the "header.component.html" file in your theme directory
  templateUrl: 'header.component.html',
  // Comment out the templateUrl which references the default "src/app/header/header.component.html" file.
  //templateUrl: '../../../../app/header/header.component.html',
})


  3. Your theme's version of the header.component.html file will be empty by default. Copy over the default HTML code from src/app/header/header.component.html into your version of this file.

  4. Then, modify your copy of header.component.html to use your logo. In this example, we're assuming your theme name is "mytheme" and the logo file is named "my-logo.svg"

    Code Block
    <header>
  <div class="container">
    <div class="d-flex flex-row justify-content-between">
      <a class="navbar-brand my-2" routerLink="/home">
        <!-- Modify the logo on the next line -->
        <img src="/assets/mytheme/images/my-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
      </a>
      ...
</header>


  5. Obviously, you can also make additional modifications to the HTML of the header in this file!  You'll also see that the header references several other DSpace UI components (e.g. <ds-search-navbar> is the search icon in the header). You can easily comment out these tags to disable them, or move them around to change where that component appears in the header.
  6. Any changes require rebuilding your UI. If you are running in "dev mode" (yarn startnpm run start:dev), then the UI will restart automatically whenever changes are detected.
  7. NOTE: If you have a theme based on the "dspace" theme, be aware that theme places the header logo in two locations.  This allows the "dspace" theme to support a single-line header (whereas the "custom" theme's header is multi-line):
    1. The Header component (as described above) is only used on user profile pages
    2. The Navbar component (src/app/navbar/navbar.component.html) is used everywhere else.  The Navbar component can be customized in the same way as the Header Component.  Just edit the logo path in the "navbar.component.html".

...

  1. Edit your theme's existing app/navbar/navbar.component.html file. This file defines the entire <nav> which displays the navigation header across the entire DSpace site.  While much of the content in this <nav> is loaded dynamically via other Angular components, it is possible to easily add a hardcoded link to the existing header.  Find the section of this <nav> which is the <div id="collapsingNav">, as that's where you'll want to add your new link.  See inline comments in the example below.

    Code Block
    titlenavbar.component.html
    <nav>
...
   <!-- This DIV is where the header links are added dynamically. 
        You should see it surrounding all links in the header if you view HTML source -->
   <div id="collapsingNav" ... >
    <!-- The links themselves are in an unordered list (UL) --> 
    <ul class="navbar-nav" ... >   
       ...
       <!-- Add your new link at the end (or beginning) of this UL in a new LI tag -->
       <!-- NOTE: All classes used below are the same Bootstrap CSS classes used by our 'dspace' and 'custom' themes. 
            You can modify them if the link doesn't look correct in your theme. -->
       <li class="nav-item d-flex align-items-center">
          <div class="text-md-center">
            <a href="http://dspace.org" class="nav-link">DSpace.org</a>
          </div>
       </li>
    </ul>
   </div>
</nav>


  2. Obviously, you can also make additional modifications to the HTML of the header in this file, as necessary for your navigation header.  Keep in mind though that anything you remove may impact the dynamic content that is pulled into this navigation header. 
    1. An example is that the header logo for the "dspace" theme also exists in this same file. 
  3. Any changes require rebuilding your UI. If you are running in "dev mode" (yarn startnpm run start:dev), then the UI will restart automatically whenever changes are detected.

...

  1. First, you'll want to decide if you want to modify just the footer's HTML, or the footer's styles (CSS/Sass), or both. 
    1. If you want to modify the HTML, you'll need to create a copy of "footer.component.html" in your theme, where you place your changes.
    2. If you want to modify the styles, you'll need to create a copy of "footer.component.scss" in your theme, where you place your changes.

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

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


  3. Now, based on what you want to modify, you will need to either update your theme's copy of footer.component.html or footer.component.scss or both.
    1. To change footer HTML: Your theme's version of the footer.component.html file will be empty by default. Copy over the default HTML code from src/app/footer/footer.component.html into your version of this file.
    2. To change footer Styles: Your theme's version of the footer.component.scss file will be empty by default. Copy over the default Sass code from src/app/footer/footer.component.scss into your version of this file.
  4. 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.

  5. DSpace also has a option to display a two-level footer, which is becoming more common these days.  By default. DSpace just displays a small, bottom footer.  But, you can enable a top footer (above that default footer) by add this line into your theme's footer.component.ts

    Code Block
    titlefooter.component.ts
    export class FooterComponent extends BaseComponent {
   // This line will enable the top footer in your theme
   showTopFooter = true;
}

    This top footer appears in the footer.component.html within a div.  Notice the "*ngIf='showTopFooter'", which only shows that div when that variable is set to "true"

    Code Block
    titlefooter.component.html
    <footer class="text-lg-start">
  <!-- This div and everything within it only displays if showTopFooter=true -->
  <div *ngIf="showTopFooter" class="top-footer">
    ...
  </div>
  <!-- The bottom footer always displays -->
  <div class="bottom-footer ...">
    ...
  </div>
</footer>


  6. Any changes require rebuilding your UI. If you are running in "dev mode" (yarn startnpm run start:dev), then the UI will restart automatically whenever changes are detected.

Customize Favicon for site or theme

Available in 7.2 or above. In 7.1 or 7.0, the only way to change the favicon is to modify the src/assets/images/favicon.ico file.

Each theme has the ability to add Each theme has the ability to add a set of (attribute-only) HTML tags in the <head> section of the page. This is useful for example to change the favicon based on the active theme. Whenever the theme changes, the head tags are reset. A theme can inherit head tags from the parent theme only if it doesn't have any head tags itself. (E.g. theme B extends theme A; if theme B does not have head tags, the head tags of theme A will be used (if any). However, if theme B does have head tags, only the tags from theme B will be used.) If none of the themes in the inheritance hierarchy have head tags configured, the head tags of the default theme (if any) will be used.

...

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


  2. In 7.2 or above, any 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.
  3. 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.

...

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

  2. 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
    titlehome-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'
})


  3. 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.
  4. 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.
  5. Any changes require rebuilding your UI. If you are running in "dev mode" (yarn startnpm run start:dev), then the UI will restart automatically whenever changes are detected.

...

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

  2. 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
    titleuntyped-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',
})


  3. 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
  4. 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.
  5. 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.
  6. Any changes require rebuilding your UI. If you are running in "dev mode" (yarn startnpm run start:dev), then the UI will restart automatically whenever changes are detected.

...

  1. Configure your theme to use its copies of files: Modify the corresponding *.component.ts in your theme. 
    1. If you want to modify component style, replace the "styleUrls" in that file to point at the copy of *.component.scss in your theme.
    2. If you want to modify component HTML, replace the "template" in that file to point at the copy of *.component.html in your theme.
  2. Copy the default UI code into your theme file(s)
    1. If you want to modify component style, copy the default *.component.scss code (from src/app/) into your theme's component.scss file.
    2. If you want to modify component HTML, copy the default *.component.html code (from src/app/) into your theme's component.html file.
  3. Modify those theme-specific files  
    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.
  4. Remember to either rebuild the UI after each change, or run in dev mode (yarn startnpm run start:dev) while you are doing theme work.

...

  1. You can edit the src/assets/i18n/*.json5 file(s) directly
    1. For example, to change the label for the browse menu when viewing the UI in English (which defaults to "All of DSpace"), you would edit src/assets/i18n/en.json5 and change the value for menu.section.browse_global .
  2. And/or, you can create a separate *.json5 file in your theme which only lists the keys you have changed.  This can keep your language changes in your theme, and will override the default keys in the src/assets/i18n/ files. However, a specific setup is necessary, see the "Theme override approach" instructions below.

...

titleTheme override approach
  1. .

...

While editing the default i18n files directly is effective, the recommended approach is to capture i18n changes in your theme. This ensures that your changes to the default values are easy to find and review and also removes the risk of losing your changes when upgrading to newer versions of DSpace.

...

Once you have changes in place within your theme, they need to be applied by executing a script:

Code Block
yarnnpm merge-i18n -s src/themes/[theme-name]/assets/i18n

The merge-i18n script will merge the changes captured in your theme with the default settings, resulting in updated versions of the default i18n files. Any setting you included in your theme will override the default setting. Any new properties will be added. Files will be merged based on file name, so en.json5 in your theme will be merged with the en.json5 file in the default i18n directory.

Extending other Themes

...

Themes can extend other themes using the "extends" configuration.  See User Interface Configuration for more examples.

...