About Features Downloads Getting Started Documentation Events Support GitHub

Site Tools


development:architecture:user_interface

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
development:architecture:user_interface [2020/03/04 13:40]
demiankatz [Why Use Mix-Ins?]
development:architecture:user_interface [2020/03/19 21:29] (current)
crhallberg [What Should I Start Editing?]
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 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]]. 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]].
development/architecture/user_interface.txt · Last modified: 2020/03/19 21:29 by crhallberg