Page History
...
In the "themes" section of your
config/config.*.yml
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
- 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.
- You will have better luck with customizing the favicon.svg file, as that this the file that is actually used by default. It would be possible to refactor to use only favicon.ico, but would be a large undertaking.
Customize Home Page News
- First, you'll want to decide if you want to modify just the Home Page News HTML, or styles (CSS/Sass), or both.
- 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.
- 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.
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 title home-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' })
- Now, based on what you want to modify, you will need to either update your theme's copy of
home-news.component.html
orhome-news.component.scss
or both.- 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 fromsrc/app/home-page/home-news/home-news.component.html
into your version of this file. - 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 fromsrc/app/home-page/home-news/home-news.component.scss
into your version of this file.
- To change HTML: Your theme's version of the
- Modify the HTML or Sass as you see fit.
- 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. - Keep in mind, all Bootstrap variables, utility classes & styles can be used in these files. Take advantage of Bootstrap when you can do so.
- If you want to add images, add them to your theme's
- 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.
...
Overview
Content Tools