| 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 [2020/09/22 14:34] – 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.// |
| |
