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.
- 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.
- 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
orhome-news.component.scss
or both.- 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 fromsrc/app/home-page/home-news/home-news.component.html
into your version of this file. - 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 fromsrc/app/home-page/home-news/home-news.component.scss
into your version of this file.
- To change HTML: Your theme's version of the
- Modify the HTML or Sass as you see fit.
- 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. - Keep in mind, all Bootstrap variables, utility classes & styles can be used in these files. Take advantage of Bootstrap when you can do so.
- If you want to add images, add them to your theme's
- 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 detectedyour 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.
- 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. - 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.
- If you want to modify the HTML, you'll need to create a copy of the HTML in "
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
oruntyped-item.component.scss
or both.- 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 fromsrc/item-page/simple/item-types/untyped-item/untyped-item.component.html
into your version of this file. - 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 fromsrc/item-page/simple/item-types/untyped-item/untyped-item.component
.scss
into your version of this file
- To change HTML: Your theme's version of the
- 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.
<ds-generic-item-page-field>
- This tag can be used to display the value of any metadata field (as a string).- Put the name of the metadata field in the "[fields]" attribute... see existing fields as an example.
- 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) - 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 "
<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)- This field has the same attributes at
<ds-generic-item-page-field>
above.
- This field has the same attributes at
- 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
...
Code Block | ||||
---|---|---|---|---|
| ||||
<!-- This example shows the theme named "dspace" was used for the "themed-header-navbar-wrapper.component.ts" --> <ds-themed-header-navbar-wrapper ... data-used-theme="dspace"></ds-themed-header-navabar-wrapper> <main> <!-- But, on the same page, the theme named "base" (core code) was used for the "themed-breadcrumbs.component.ts" --> <ds-themed-breadcrumbs ... data-used-theme="base"></ds-themed-breadcrumbs> </main> |
Finding which component is generating the content on a page
See "Finding which component is generating the content on a page" in our User Interface Debugging guide.
Additional Theming Resources
- User Interface Debugging - Our guide to debugging basic behaviors in the User Interface
- "Getting Started with DSpace 7.0" Basic Workshop at OR2021 Conference
- Bootstrap Documentation - DSpace's UI strives to be compliant with "out-of-the-box" Bootstrap as much as possible. Therefore, Bootstrap knowledge is very beneficial in customizing DSpace.
- Sass Documentation - Bootstrap and DSpace both use Sass to enhance your ability to customize styles quickly via variables, etc. Some familiarity with Sass is recommended, though you need not be an expert.