Page History

...

1. Copy your logo to your theme's assets/image/ folder

2. Edit your theme's app/header/header.components.ts file & swap the "templateUrl" properties

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

   
   

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 you have a logo file 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/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.

Additional Theming Resources

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