Page History
...
- 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:_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 thenode_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_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 insrc/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._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 insrc/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.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.
- Modifying the default font: The font used in your site can be quickly updated via Bootstrap variables in your theme's
_theme_sass_variable_overrides.scss
file.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;
- If your font requires installing local files, you can do the following
- Copy your font file(s) in your theme's
assets/fonts/
folder 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"); }
Then, import that new SCSS "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;
- Copy your font file(s) in your theme's
- 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
- 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.d- Again, you can use entirely Bootstrap variables to adjust color schemes. See the Bootstrap Theming Colors documentation
- 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.
Overview
Content Tools