Differences

This shows you the differences between two versions of the page.

--- development:architecture:user_interface [2020/03/04 13:40] – [Why Use Mix-Ins?] demiankatz
+++ development:architecture:user_interface [2020/06/11 12:14] – [CSS Inheritance] demiankatz
@@ 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's default header and footer. Copy one of the files from your theme's parent theme into your own, edit the HTML, and see how things change when you access your site through a web browser.
-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's module.config.php -- or you can use the more advanced [[[[development:architecture:less|LESS]] technology to adjust some variables and recompile VuFind's core CSS with some local adjustments.
+As you do this, you will likely notice bits of code wrapped in "slots". Slots are a [[development:plugins:view_helpers|view helper]] that makes it easy to override and customize content. You can learn all the ways to use them on our [[development:plugins:view_helpers|view helpers page]].
+<code php>
+<?php $this->slot('footer-left')->start(); ?>
+    <p>Custom left foot(er)</p>
+<?php $this->slot('footer-left')->end(); ?>
+<?php include $this->parentTemplate('footer.phtml'); ?>
+</code>
+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's module.config.php -- or you can use the more advanced [[development:architecture:less|LESS]] technology to adjust some variables and recompile VuFind's core CSS with some local adjustments.
 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://vufind.org/vufind/support.html|support page]].
@@ Line 67: / Line 77: @@
 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.//