Page History

...

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 start:dev) while you are doing theme work.

Customize UI labels using Internationalization (i18n) files

Much of the text (like headers and labels) displayed by the DSpace UI is captured in translation files to support the use of DSpace in multiple languages. This model of multi-language support is called internationalization (abbreviated i18n). The default set of these i18n files are stored in src/assets/i18n and named using the language code, so en.json5 is the English translation, fr.json5  is the French translation, etc.

If you would like to change the text displayed in the UI, you will need to edit the i18n translation files. 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 .

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.

To capture i18n changes in your theme, you will need to:

1. Create an i18n directory under src/themes/[theme-name]/assets
2. For each language you would like to update, add a file to the new i18n directory following the naming scheme in the default i18n directory (en.json5 for English, fr.json5 for French, etc)
3. In each translation file add only the settings that you wish to add or override

There is an example of this configuration in the custom theme, which you can find in src/themes/custom/assets/i18n . 

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

1. In a terminal window, change to the /scripts directory

2. Execute:

   Code Block
   yarn 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.

Removing Subdirectories / Components from your Theme

...