Page History

...

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

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

   
   

3. 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.
4. Modify the HTML or Sass as you see fit.

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

   
   

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

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:

1. 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.
2. Copy the default 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.
3. Modify those theme-specific files.  Remember to either rebuild the UI after each change, or run in dev mode (yarn start:dev) while you are doing theme work.

Additional Theming Resources

...