Page History

...

1. Global style changes: All global style changes can be made in your theme's styles folder (e.g. src/themes/mydspacesite/styles). There are four main files in that folder:
   1. _theme_sass_variable_overrides.scss - May be used to override Bootstrap's default Sass variables.  This is the file you may wish to use for most  style changes. There are a large number of Bootstrap variables available which control everything from fonts, colors and the base style for all Bootstrap web components.  For a full list of Bootstrap variables you can override in this file, see the node_modules/bootstrap/scss/_variables.scss file (which is installed in your source directory when you run "yarn install"). More information may also be found in the Bootstrap Sass documentation at https://getbootstrap.com/docs/4.0/getting-started/theming/#sass
   2. _theme_css_variable_overrides.scss - May be used to override DSpace's default CSS variables. DSpace's UI uses CSS variables for all its components. These variables all start with "--ds-*", and are listed in src/styles/_custom_variables.scss. You can also use this file to add your own, custom CSS variables which you want to use for your theme.  If you create custom variables, avoid naming them with a "--ds-*" or a "--bs-*" prefix, as those are reserved for DSpace and Bootstrap variables.
   3. _global-styles.scss - May be used to modify the global CSS/SCSS for the site.  This file may be used to override the default global style contained in src/styles/_global-styles.scss .  Keep in mind, many styles can be more quickly changed by simply updating a variable in one of the above "*_variable_overrides.scss" files.  So, it's often easier to use those first, where possible.
   4. theme.scss - This just imports all the necessary Sass files to create the theme. It's unnecessary to modify directly, unless you with to add new Sass files to your theme.
2. Modifying the default font:  By default, DSpace uses Bootstrap's "native font stack", which just uses system UI fonts. However, the font used in your site can be quickly updated via Bootstrap variables in your theme's _theme_sass_variable_overrides.scss file. 

   1. One option is to add a new import statement and modify the "$font-family-sans-serif" variable:

      Code Block

      // Import the font (from a URL) @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro'); // Configure Bootstrap to use this font (and list a number of backup fonts to use on various systems) $font-family-sans-serif: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

      
      

   2. If your font requires installing local files, you can do the following
      1. Copy your font file(s) in your theme's assets/fonts/ folder

      2. Create a new ".scss" file specific to your font in that folder, e.g. assets/fonts/open-sans.scss, and use the "@font-face" CSS rule to load that font:

         Code Block
         title open-sans.scss
         @font-face {  font-family: "Open Sans"; src: url("/assets/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/assets/fonts/OpenSans-Regular-webfont.woff") format("woff"); }

         
         

      3. Then, import that new "open-sans.scss" file and use it in the "$font-family-sans-serif" variable

         Code Block
         // Import the font via the custom SCSS file @import '../assets/fonts/open-sans'; // Configure Bootstrap to use this font (and list a number of backup fonts to use on various systems) $font-family-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

         
         

   3. Keep in mind, as changing the font just requires adjusting Bootstrap Sass variables, there are a lot of Bootstrap guides out there that can help you make more advanced changes
3. Modifying default color scheme: The colors used in your site can be quickly updated via Bootstrap variables in your theme's _theme_sass_variable_overrides.scss file. 
   1. Again, you can use entirely Bootstrap variables to adjust color schemes.  See the Bootstrap Theming Colors documentation
   2. A list of all Bootstrap color variables can be found in the node_modules/bootstrap/scss/_variables.scss file
   3. Additional examples can be found in the out-of-the-box "dspace" theme, which adjusts the default Bootstrap colors slightly for both accessibility & to match the DSpace logo.

...

1. 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 Logo in Header

1. Copy your logo to your theme's assets/image/ folder. Anything in this theme folder will be deployed to `/assets/[theme-name]/images/` URL  path.

2. Edit your theme's app/header/header.componentscomponent.ts file & swap . Swap the "templateUrl" properties" property that your theme is using the local copy of "header.component.html"

   Code Block
   title header.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', })

   
   

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

4. Then, modify your copy of header.component.html to use your logo. In this example, we're assuming you have a logo file named assets/images/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/images/my-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/> </a> ... </header>

   
   

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

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
   title footer.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.

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
   title footer.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
   title footer.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.

Additional Theming Resources

...