All Versions
- DSpace 7.x (Current Release)
- DSpace 8.x (Unreleased)
- DSpace 6.x (EOL)
- DSpace 5.x (EOL)
- More Versions...
...
assets/images/
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 | ||
---|---|---|
| ||
@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', }) |
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 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> |
<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.src/app/navbar/navbar.component.html
). The Navbar component can be customized in the same way as the Header Component. Just edit the logo path in the "navbar.component.html"....