Versions Compared

Old Version 28

changes.mady.by.user Bill Branan

Saved on

compared with

New Version 29

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

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.

  1. In the "themes" section of your src/environments/environment.*.ts configuration file, add (one or more) "headTags", pointing at the favicon file you want to use. For example:

    Code Block
    themes: [
  {
    // The default dspace theme
    name: 'dspace',
    // Whenever this theme is active, the following tags will be injected into the <head> of the page.
    // Example use case: set the favicon based on the active theme.
    headTags: [
      {
        // Insert <link rel="icon" href="assets/dspace/images/favicons/favicon.ico" sizes="any"/> into the <head> of the page.
        tagName: 'link',
        attributes: {
          'rel': 'icon',
          'href': 'assets/dspace/images/favicons/favicon.ico',
          'sizes': 'any',
        }
      },
      {
        // Insert <link rel="icon" href="assets/dspace/images/favicons/favicon.svg" type="image/svg+xml"/> into the <head> of the page.
        tagName: 'link',
        attributes: {
          'rel': 'icon',
          'href': 'assets/dspace/images/favicons/favicon.svg',
          'type': 'image/svg+xml',
        }
      },
      {
        // Insert <link rel="apple-touch-icon" href="assets/dspace/images/favicons/apple-touch-icon.png"/> into the <head> of the page.
        tagName: 'link',
        attributes: {
          'rel': 'apple-touch-icon',
          'href': 'assets/dspace/images/favicons/apple-touch-icon.png',
        }
      },
      {
        // Insert <link rel="manifest" href="assets/dspace/images/favicons/manifest.webmanifest"/> into the <head> of the page.
        tagName: 'link',
        attributes: {
          'rel': 'manifest',
          'href': 'assets/dspace/images/favicons/manifest.webmanifest',
        }
      },
    ]
  },
]


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

  1. First, you'll want to decide if you want to modify just the Home Page News HTML, or styles (CSS/Sass), or both. 
    1. If you want to modify the HTML, you'll need to create a copy of "home-news.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 "home-news.component.scss" in your theme, where you place your changes.

  2. Edit your theme's app/home-page/home-news/home-news.component.ts file. Swap the "templateUrl" and "styleUrls" properties, based on which you want to modify in your theme. 

    Code Block
    titlehome-news.component.ts
    @Component({
  selector: 'ds-home-news',
  // If you want to modify styles, then...
  // Uncomment the styleUrls which references the "home-news.component.scss" file in your theme's directory
  // and comment out the one that references the default "src/app/home-page/home-news/home-news.component.scss"
  styleUrls: ['./home-news.component.scss'],
  //styleUrls: ['../../../../../app/home-page/home-news/home-news.component.scss'],
  // If you want to modify HTML, then...
  // Uncomment the templateUrl which references the "home-news.component.html" file in your theme's directory
  // and comment out the one that references the default "src/app/home-page/home-news/home-news.component.html"
  templateUrl: './home-news.component.html'
  //templateUrl: '../../../../../app/home-page/home-news/home-news.component.html'
})


  3. Now, based on what you want to modify, you will need to either update your theme's copy of home-news.component.html or home-news.component.scss or both.
    1. To change HTML: Your theme's version of the home-news.component.html file will be empty by default. Copy over the default HTML code from src/app/home-page/home-news/home-news.component.html into your version of this file.
    2. To change Styles: Your theme's version of the home-news.component.scss file will be empty by default. Copy over the default Sass code from src/app/home-page/home-news/home-news.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. 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.

...