Versions Compared

Old Version 30

changes.mady.by.user Tim Donohue

Saved on

compared with

New Version 31

changes.mady.by.user Tim Donohue

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Updates for 7.2

...

  • UI starts more rapidly
  • UI will use a separate "config.dev.yml" configuration file (in 7.1 or 7.0 this file was named "environment.dev.ts" configuration file). This lets you have development specific configs, separate from your Production settings in "environmentconfig.prod.tsyml" or the default (in 7.1 or 7.0 this file was named "environment.commonprod.ts")
  • UI will automatically reload anytime you modify a file.  Essentially the UI will constantly "watch" for changes (as you make them) & will reload anytime you modify a file.  This lets you find issues/bugs more rapidly and also test more rapidly.

...

  1. Start with the "custom" theme: The best place to start with a new theme is the "custom" theme folder (src/themes/custom). This folder contains the boilerplate code for all theme-able components. It's a scaffolding for a new theme which doesn't modify any of the "base theme" (src/app/ directories). This means that by default it's a plain Bootstrap look and feel, with a few tweaks for better accessibility.
  2. Create your own theme folder OR edit the "custom" theme: Either edit the "custom" theme directory, or copy the "custom" theme folder (and all its contents) into a new folder under src/themes/ (choose whatever folder name you want)
  3. Register your theme folder (only necessary if you create a new folder in previous step): Now, we need to make the UI aware of this new theme folder, before it can be used in configuration.

    1. Modify angular.json (in the root folder), adding your theme folder's main "theme.scss" file to the "styles" list.  The below example is for a new theme folder named src/themes/mydspacesite/

      Code Block
      "styles": [
  "src/styles/startup.scss",
  {
     "input": "src/styles/base-theme.scss",
     "inject": false,
     "bundleName": "base-theme"
  },
  ...
  {
     "input": "src/themes/mydspacesite/styles/theme.scss",
     "inject": false,
     "bundleName": "mydspacesite-theme"
  },
]

      NOTE: the "bundleName" for your custom them MUST use the format "${folder-name}-theme".  E.g. if the folder is named "arc/themes/amazingtheme", then the "bundleName" MUST be "amazingtheme-theme"

  4. Enable your theme: Modify your config/config.*.yml configuration file (in 7.1 or 7.0 this file was named src/environments/environment.*.ts configuration file), adding your new theme to the "themes" array in that file.  Pay close attention to modify the correct environment configuration file (e.g. modify environmentconfig.dev.ts yml if running in dev mode, or environmentconfig.prod.ts yml if running in prod mode).  We recommend starting in "dev mode" (environmentconfig.dev.tsyml) as this mode lets you see your changes immediately in a browser without a full rebuild of the UI – see next step. 

    Code Block
    languageyml
    titleFormat for 7.2 or above (config.*.yml)
    # In this example, we only show one theme enabled. It's possible to enable multiple (see below note)
themes: 
  - name: 'mydspacesite'



    Code Block
    titleFormat for 7.1 or 7.0 (environment.*.ts)
    //// In this example, we only show one theme enabled. It's possible to enable multiple (see below note)
themes: [
 {
    name: 'mydspacesite'
 },
]


    NOTE: The "name" used is the name of the theme's folder, so the example is for enabling a theme at src/themes/mydspacesite/ globally.  You should also comment out the default "dspace" theme, if you intend to replace it entirely.
    NOTE #2: You may also choose to enable multiple themes for your site, and even specify a different theme for different Communities, Collections, Items or URL paths. See User Interface Configuration for more details on "Theme Settings" in your environment.*.ts

  5. Verify your settings by starting the UI (ideally in Dev mode): At this point, you should verify the basic settings you've made all "work".  We recommend doing your theme work while running the UI in "dev mode", as the UI will auto-restart anytime you save a new change.  This will allow you to quickly see the impact of each change in your browser. 

    Code Block
    # Start in dev mode (which uses environmentconfig.dev.tsyml)
yarn start:dev


  6. At this point, you can start making changes to your theme.  See the following sections for examples of how to make common changes.

...

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

...

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/environmentof your config/config.*.ts configuration yml configuration file, add (one or more) "headTags", pointing at the favicon file you want to use. For example:

    Code Block
    themes: [
  {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',: 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.

...