Page.ss

Adding $variable to a page.ss file rendered the variable contents in its place

Var can also be like: $Level(1).Title to retrieve the current top level page title

ie \tutorial\templates\Page.ss

Element .. id="xxx" will style per xxx from  tutorial/css/layout.css

Do ?flush=1 to clear the cach after altering css file


Subtemplates:

They say:

Having two templates is good, but we have a lot of identical code in the two templates. Rather than having two completely separate templates, we can use subtemplates to specify only the part of the template that has changed. If we compare Page.ss and HomePage.ss, we can see the only differences are within the ContentContainer div. Copy the contents of the ContentContainer div from tutorial/templates/Page.ss to a new file tutorial/templates/Layout/Page.ss, and do the same from tutorial/templates/HomePage.ss to tutorial/templates/Layout/HomePage.ss.

..

We can then delete tutorial/templates/HomePage.ss, as it is no longer needed. Replace the code we just copied out of tutorial/templates/Page.ss with $Layout, so it looks like this:

I say: How does it know to look into ..layout/ folder?.  Anyway, crazy stuff.  Oh look they already answered my question:

SilverStripe first searches for a template in the tutorial/templates folder. Since there is no HomePage.ss, it will use the Page.ss for both Page and HomePage page types. When it comes across the $Layout tag, it will then descend into the tutorial/templates/Layout folder, and will use Page.ss for the Page page type, and HomePage.ss for the HomePage page type.

And gave a nice image of it here: http://doc.silverstripe.com/lib/exe/detail.php?id=tutorial%3A1-building-a-basic-site&cache=cache&media=tutorial:subtemplates-diagram.png