| Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
| development:architecture:user_interface [2020/06/11 12:14] – [CSS Inheritance] demiankatz | 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. |
| 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 : |
| ---- | ---- |
| |
