Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
development:architecture:user_interface [2020/03/19 21:29] – [What Should I Start Editing?] crhallberg | development:architecture:user_interface [2023/11/09 19:27] – [Icon Libraries] demiankatz |
---|
The first thing you'll have to set up in a new theme is the file **theme.config.php**. This file allows you to establish your theme as a child of another theme (see the section below on [[#theme_inheritance|Theme Inheritance]] for more on this) and allows you to add new CSS and Javascript files (among other things). If you've created custom [[development:plugins:view_helpers|view helpers]], you will also set up their service manager configuration in this file. You only need to add settings here that wouldn't be loaded from a parent theme via inheritance (such as adding a new jQuery plugin). | The first thing you'll have to set up in a new theme is the file **theme.config.php**. This file allows you to establish your theme as a child of another theme (see the section below on [[#theme_inheritance|Theme Inheritance]] for more on this) and allows you to add new CSS and Javascript files (among other things). If you've created custom [[development:plugins:view_helpers|view helpers]], you will also set up their service manager configuration in this file. You only need to add settings here that wouldn't be loaded from a parent theme via inheritance (such as adding a new jQuery plugin). |
| |
A minimal setup is already included in the template used by the custom theme generator. For a full example, see the [[https://github.com/vufind-org/vufind/blob/master/themes/bootstrap3/theme.config.php|bootstrap config file]]. | A minimal setup is already included in the template used by the custom theme generator. For a full example, see the [[https://github.com/vufind-org/vufind/blob/dev/themes/bootstrap3/theme.config.php|bootstrap config file]]. |
| |
After establishing the basic configuration, you can add template and resource files to your theme. Understanding the structure and inheritance rules described below should help you achieve the desired effects. | After establishing the basic configuration, you can add template and resource files to your theme. Understanding the structure and inheritance rules described below should help you achieve the desired effects. |
The way CSS inheritance works requires a few notes. If you are going to take advantage of this feature, here are some important things to keep in mind: | The way CSS inheritance works requires a few notes. If you are going to take advantage of this feature, here are some important things to keep in mind: |
| |
* Always use [[development:architecture:laminas|Laminas]]' $this->headLink() helper to include CSS files. If you don't use the helper, CSS inheritance will not happen! | * Always use [[development:architecture:laminas|Laminas]]' $this->headLink() helper (as opposed to inline HTML tags) when you need to include specific CSS files in your templates. If you don't use the helper, CSS inheritance will not happen! |
* Watch out for @import statements in your CSS files. The target of the @import must be in the same theme as the caller. Inheritance cannot apply here since "@import" is resolved by the client's web browser rather than the server-side logic. //For example, suppose you customize styles.css and copy it to your MyUniversity theme. styles.css has an "@import layout.css" statement in it. If you do not copy layout.css into your MyUniversity theme, it will not load at all -- the user's browser isn't smart enough to find it in the default theme.// | * Watch out for @import statements in your CSS files. The target of the @import must be in the same theme as the caller. Inheritance cannot apply here since "@import" is resolved by the client's web browser rather than the server-side logic. //For example, suppose you customize styles.css and copy it to your MyUniversity theme. styles.css has an "@import layout.css" statement in it. If you do not copy layout.css into your MyUniversity theme, it will not load at all -- the user's browser isn't smart enough to find it in the default theme.// |
| |
Some of the graphics provided with VuFind's themes come from the Fugue, Silk and Tango icon libraries. For more information on licensing terms and to find additional icons for use in your local customizations, see these links: | Some of the graphics provided with VuFind's themes come from the Fugue, Silk and Tango icon libraries. For more information on licensing terms and to find additional icons for use in your local customizations, see these links: |
| |
| * [[https://fontawesome.com/|Font Awesome]] (Font: SIL OFL 1.1 License, Icons: CC BY 4.0 License) |
| * [[https://remixicon.com/|Remix Icons]] (Apache License, Version 2.0) |
* [[http://p.yusukekamiyamane.com/|Fugue]] (Copyright © Yusuke Kamiyamane) | * [[http://p.yusukekamiyamane.com/|Fugue]] (Copyright © Yusuke Kamiyamane) |
* [[http://www.famfamfam.com/lab/icons/silk/|Silk]] | * [[https://github.com/legacy-icons/famfamfam-silk|Silk]] |
* [[http://damieng.com/creative/icons/silk-companion-1-icons|Silk Companion Icons]] | * [[http://damieng.com/creative/icons/silk-companion-1-icons|Silk Companion Icons]] |
* [[http://tango.freedesktop.org/|Tango]] | * [[http://tango.freedesktop.org/|Tango]] |
| |
See also the [[development:architecture:user_interface:icon_set|Icon Set]] page for more icon-related discussion/notes. | See also the [[development:architecture:user_interface:icon_set|Icon Set]] page for more icon-related discussion/notes. |
| |
| ===== Related Video ===== |
| |
| The [[videos:creating_themes|Creating Themes]] video provides an introduction to VuFind's theme system. |
---- struct data ---- | ---- struct data ---- |
| properties.Page Owner : |
---- | ---- |
| |