Page History

...

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

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

title	header.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',
})

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.

Then, modify your copy of header.component.html to use your logo. In this example, we're assuming you have a your theme name is "mytheme" and the logo file is named assets/images/"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>

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

...

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.

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

title	footer.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'
})

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

DSpace also has a option to display a two-level footer, which is becoming more common these days. By default. DSpace just displays a 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

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

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

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 Home Page 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 "home-news.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 "home-news.component.scss" in your theme, 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	footer.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 other UI Components

By now, if you've followed this entire guide, you'll notice a pattern! Customizing specific DSpace UI components requires just three steps:steps:

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.
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.
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.
Remember to either rebuild the UI after each change, or run in dev mode (yarn start:dev) while you are doing theme work.

...

All Versions

DSpace Documentation

Page tree

Versions Compared

Old Version 17

New Version 18

Key

Customize Home Page News

Customize other UI Components