Versions Compared

Old Version 29

changes.mady.by.user Tim Donohue

Saved on

compared with

New Version 30

changes.mady.by.user Tim Donohue

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

  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
    titlefooter.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
    titlefooter.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 Favicon for site or theme

Available in 7.2 or above. In 7.0-7.1, the only way to change the favicon is to modify the src/assets/images/favicon.ico file.

Each theme has the ability to add a set of (attribute-only) HTML tags in the <head> section of the page. This is useful for example to change the favicon based on the active theme. Whenever the theme changes, the head tags are reset. A theme can inherit head tags from the parent theme only if it doesn't have any head tags itself. (E.g. theme B extends theme A; if theme B does not have head tags, the head tags of theme A will be used (if any). However, if theme B does have head tags, only the tags from theme B will be used.) If none of the themes in the inheritance hierarchy have head tags configured, the head tags of the default theme (if any) will be used.

Note that a simple hardcoded favicon is set in case no head tags are currently active. The hardcoded favicon is stored at src/assets/images/favicon.ico. This implies that if head tags are added to a theme, the favicon should also be configured explicitly for that theme, else the behavior is undefined.

...