Versions Compared

Old Version 46

changes.mady.by.user Mark H. Wood

Saved on

compared with

New Version 47

changes.mady.by.user Tim Donohue

Saved on

Key

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

...

Note
titleCSS custom properties vs. SASS variables

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, $red is mapped to --bs-red and may be referenced as var("--bs-red").


Customize Logo in Header

  1. Read all of these instructions.  There are two components you'll be customizing:  the header and the navbar. The header is used on user profile pages. The navbar is used everywhere else.
  2. Copy your logo to your theme's assets/images/ folder. Anything in this theme folder will be deployed to /assets/[theme-name]/images/ URL  path.

  3. 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
    titleheader.component.ts
    @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',
})


  4. Your theme's version of the 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.

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


  6. Obviously, you can also make additional modifications to the HTML of the header in this file!  You'll also see that the header references several other DSpace UI components (e.g. <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.
  7. 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.
  8. NOTE: If you have a theme based on the "dspace" theme, be aware that theme places the header logo in two locations (in order .  This allows the "dspace" theme to support a more streamlined header than single-line header (whereas the "custom" theme's header is multi-line):
    1. In the The Header component (as described above) is only used on user profile pages
    2. The In the Navbar component (src/app/navbar/navbar.component.html) is used everywhere else.  The Navbar component can be customized in the same way as the Header Component.  Just edit the logo path in the "navbar.component.html".

...