All Versions
- DSpace 7.x (Current Release)
- DSpace 8.x (Unreleased)
- DSpace 6.x (EOL)
- DSpace 5.x (EOL)
- More Versions...
...
Note | ||
---|---|---|
| ||
Support for theme switching at runtime requires that components use CSS custom properties (which vary at runtime) rather than SASS variables (which are fixed at build time). Thus, SASS variables will be undefined in individual components' stylesheets. The Bootstrap SASS variables are mapped to CSS properties for use in these places. For example, |
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
, and is customized in exactly the same way as the src/app/header/header.component.html
file you just customized.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 | ||
---|---|---|
| ||
@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' }) |
footer.component.html
or footer.component.scss
or both.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.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.assets/images
folder. Then reference them at the /assets/[theme-name]/images/
URL path.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 | ||
---|---|---|
| ||
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 | ||
---|---|---|
| ||
<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> |
...