Warning: This page has not been updated in over over a year and may be outdated or deprecated.
development:architecture:user_interface
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
development:architecture:user_interface [2017/08/02 16:15] – [Creating a Theme] demiankatz | development:architecture:user_interface [2020/03/04 13:40] – [CSS Inheritance] demiankatz | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== User Interface Customization ====== | ====== User Interface Customization ====== | ||
- | // This page refers to VuFind 2.x and later; | + | :!: // This page refers to VuFind 2.x and later; |
VuFind uses a theme system to isolate the user interface from the business logic, and to make it easy to customize the software' | VuFind uses a theme system to isolate the user interface from the business logic, and to make it easy to customize the software' | ||
Line 25: | Line 25: | ||
The **mobile_theme** setting can also be used to default to a different theme when a mobile device is detected; however, with the advent of responsive design, mobile-specific themes are no longer as useful as they once were, and VuFind no longer includes a default mobile theme as of release 4.0. | The **mobile_theme** setting can also be used to default to a different theme when a mobile device is detected; however, with the advent of responsive design, mobile-specific themes are no longer as useful as they once were, and VuFind no longer includes a default mobile theme as of release 4.0. | ||
- | If you use the command-line generator tool mentioned earlier, it will automatically set VuFind' | + | If you use the [[development: |
==== Configuring a Theme ==== | ==== Configuring a Theme ==== | ||
Line 67: | Line 67: | ||
The way CSS inheritance works requires a few notes. | The way CSS inheritance works requires a few notes. | ||
- | * Always use Zend Framework's $this-> | + | * Always use [[development: |
* Watch out for @import statements in your CSS files. | * Watch out for @import statements in your CSS files. | ||
Line 78: | Line 78: | ||
To take advantage of Javascript inheritance, | To take advantage of Javascript inheritance, | ||
+ | |||
+ | ===== Mix-ins ===== | ||
+ | |||
+ | VuFind 4.1 introduced the concept of theme " | ||
+ | |||
+ | The directory structure and configuration for a mixin is identical to that of a theme -- mixins can contain templates, Javascript, CSS, etc. and may define view helpers and other settings. There are only two key differences: | ||
+ | |||
+ | 1.) The configuration for a mix-in is called mixin.config.php, | ||
+ | |||
+ | 2.) A mix-in may not extend anything, nor may it include additional mix-ins. | ||
+ | |||
+ | VuFind ships with a sample mix-in called local_example_mixin, | ||
+ | |||
+ | ==== Why Use Mix-Ins? ==== | ||
+ | |||
+ | The average VuFind user will probably not have much need to use mix-ins; however, this feature is useful for sharing functionality between VuFind instances. By creating a Zend Framework module full of custom code and a theme mix-in containing custom templates and assets, it should be possible to isolate entire custom features and share them between institutions without having to significantly change core VuFind code. | ||
+ | |||
+ | ==== Mix-Ins and Inheritance ==== | ||
+ | |||
+ | Note that when you load a mix-in into a custom theme, the custom theme' | ||
===== Icon Libraries ===== | ===== Icon Libraries ===== |
development/architecture/user_interface.txt · Last modified: 2024/04/24 18:14 by emaijala