Another way that we can change the look of individual pages beyond the basic layout is by overriding our TypoScript template settings with another kind of template concept. As we've seen, each website uses one main TypoScript template, and we've used this to define the style of our menus and assign values to our own TypoScript objects like the logo and the timestamp. We can change these values by assigning an extension template to any page, and it will affect that page and any pages below it with our TypoScript changes. Let's make some special modifications to the products page to make it more of a distinct store section under the main website.
- In the backend, click on the Template link on the main sidebar to jump to the template editing view.
- We need to edit the Products page, so we should choose it from the page tree after we are in the template view.
- There is currently no TypoScript template assigned to the Products page besides the main site template, so we will see a screen like the one shown in the following screenshot. This page warns us that there is no current template and even points us to the closest page in the page tree with a template. We have the choice of creating a new website that will give us a brand new template and ignore all values above it in the page tree. Alternatively, we can create an extension template that will add or change values from the current templates for this page and the pages below it. We want to extend our current template without replacing it completely, so we need to click on the Click here to create an extension template button.
- Once we choose to create an extension template, we are now presented with a new template to edit. The template is currently completely blank, but it is implied that all properties or values are already inherited from the templates before it. All we need to do is adjust the setup, so we'll click on the pencil icon next to the Setup: label to start editing the TypoScript setup values.
- We are going to remove the timestamp from the Products page because our boss heard a consultant say that it was unnecessary in the catalog section of our site. Currently, the
lib.timestampobject is assigned a value in the TypoScript of our main page. All we need to do is set the object to null in our TypoScript setup:lib.timestamp >
- We also want to replace the logo in the upper-left with an alternative version telling users they are in the store section of our website. We'll use the logo our designer handed us that looks suspiciously like he just added the word "Store" in grey Helvetica. We could eventually have a lot of pages under here, so we're also going to make sure that users who get too deep and click on the logo are brought straight back to the store page (instead of the main home page). We don't have redefine the entire
lib.logoTypoScript object because it is already completely defined in the parent template; we just need to adjust two of the values in our setup with some TypoScript:lib.logo.file = fileadmin/templates/logo_store.png lib.logo.stdWrap.wrap = <a href="http://www.example.com/products">|</a>
After our changes, we can refresh the Products page in the frontend and see a new logo (and missing timestamp):
