Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
development:architecture:user_interface [2017/10/18 12:41] – demiankatz | development:architecture:user_interface [2020/03/04 13:40] – [Why Use Mix-Ins?] demiankatz |
---|
====== User Interface Customization ====== | ====== User Interface Customization ====== |
| |
// This page refers to VuFind 2.x and later; for 1.x documentation, see [[legacy:vufind_1.x_developer_manual:user_interface_customization|User Interface Customization (VuFind 1.x)]]. // | :!: // This page refers to VuFind 2.x and later; use of earlier versions is no longer recommended. // |
| |
VuFind uses a theme system to isolate the user interface from the business logic, and to make it easy to customize the software's look and feel. You can use one of VuFind's built-in themes, or you can design your own. This page provides guidance and background information to help you make the most of VuFind themes. | VuFind uses a theme system to isolate the user interface from the business logic, and to make it easy to customize the software's look and feel. You can use one of VuFind's built-in themes, or you can design your own. This page provides guidance and background information to help you make the most of VuFind themes. |
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 Zend Framework's $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 to include CSS files. 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.// |
| |
==== Why Use Mix-Ins? ==== | ==== 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. | 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:architecture:laminas|Laminas]] 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 ==== | ==== Mix-Ins and Inheritance ==== |