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:11] – [Where Should I Start?] demiankatz | development:architecture:user_interface [2020/06/11 12:14] – [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 15: | Line 15: | ||
==== Creating a Theme ==== | ==== Creating a Theme ==== | ||
- | Starting with VuFind 4.1, a command-line generator tool is available to create and configure a new theme using a simple example directory as the foundation. If you are using an earlier version of the software, you can still make use of this example by manually copying the files from GitHub into a new subdirectory of your VuFind installation' | + | Starting with VuFind 4.1, a [[development: |
==== Configuring VuFind' | ==== Configuring VuFind' | ||
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 39: | Line 39: | ||
If you want to begin customizing your theme, a useful starting point is to identify a template that you would like to modify -- good starting points are the **header.phtml** and **footer.phtml** files that define VuFind' | If you want to begin customizing your theme, a useful starting point is to identify a template that you would like to modify -- good starting points are the **header.phtml** and **footer.phtml** files that define VuFind' | ||
- | If you want to begin customizing your styles, you can create a brand new CSS file to override some defaults, and register it in your theme' | + | As you do this, you will likely notice bits of code wrapped in " |
+ | |||
+ | <code php> | ||
+ | <?php $this-> | ||
+ | < | ||
+ | <?php $this-> | ||
+ | |||
+ | <?php include $this-> | ||
+ | </ | ||
+ | |||
+ | If you want to begin customizing your styles, you can create a brand new CSS file to override some defaults, and register it in your theme' | ||
Looking at existing themes and templates should help give you some ideas about how to achieve the effects you need... and if you get stuck, please feel free to reach out to the VuFind community for help through the channels listed on our [[https:// | Looking at existing themes and templates should help give you some ideas about how to achieve the effects you need... and if you get stuck, please feel free to reach out to the VuFind community for help through the channels listed on our [[https:// | ||
Line 67: | Line 77: | ||
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 88: | ||
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 [[development: | ||
+ | |||
+ | ==== 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