Skip to content
This repository
Browse code

ENHANCEMENT Updated tutorial documentation (thanks to Cam Findlay and…

… Andy Adiwidjaja)
  • Loading branch information...
commit 71b3fe5760e1b08b937d88f971988ad61e515706 1 parent 013abcb
adiwidjaja authored June 08, 2012 chillu committed June 08, 2012

Showing 66 changed files with 349 additions and 525 deletions. Show diff stats Hide diff stats

  1. 385  docs/en/tutorials/1-building-a-basic-site.md
  2. 284  docs/en/tutorials/2-extending-a-basic-site.md
  3. 205  docs/en/tutorials/4-site-search.md
  4. BIN  docs/en/tutorials/_images/2nd_level-cut.jpg
  5. BIN  docs/en/tutorials/_images/articleholder.jpg
  6. BIN  docs/en/tutorials/_images/cms-numbered.jpg
  7. BIN  docs/en/tutorials/_images/create-staff.jpg
  8. BIN  docs/en/tutorials/_images/data-collation.jpg
  9. BIN  docs/en/tutorials/_images/einstein-small.jpg
  10. BIN  docs/en/tutorials/_images/einstein.jpg
  11. BIN  docs/en/tutorials/_images/home-first.jpg
  12. BIN  docs/en/tutorials/_images/home-small.jpg
  13. BIN  docs/en/tutorials/_images/home-template.jpg
  14. BIN  docs/en/tutorials/_images/homepage-news.jpg
  15. BIN  docs/en/tutorials/_images/homepage-type.jpg
  16. BIN  docs/en/tutorials/_images/icons2.jpg
  17. BIN  docs/en/tutorials/_images/menu-highlighted.jpg
  18. BIN  docs/en/tutorials/_images/menu-two-level-small.jpg
  19. BIN  docs/en/tutorials/_images/menu-two-level.jpg
  20. BIN  docs/en/tutorials/_images/menu.jpg
  21. BIN  docs/en/tutorials/_images/news-cms.jpg
  22. BIN  docs/en/tutorials/_images/news-with-rss-small.jpg
  23. BIN  docs/en/tutorials/_images/news.jpg
  24. BIN  docs/en/tutorials/_images/pagetype-inheritance.jpg
  25. BIN  docs/en/tutorials/_images/photo.jpg
  26. BIN  docs/en/tutorials/_images/rss-feed.jpg
  27. BIN  docs/en/tutorials/_images/rss.jpg
  28. BIN  docs/en/tutorials/_images/searchform.jpg
  29. BIN  docs/en/tutorials/_images/searchresults-small.jpg
  30. BIN  docs/en/tutorials/_images/staff-section.jpg
  31. BIN  docs/en/tutorials/_images/subtemplates-diagram.jpg
  32. BIN  docs/en/tutorials/_images/title.jpg
  33. BIN  docs/en/tutorials/_images/treeicons/home-file.gif
  34. BIN  docs/en/tutorials/_images/treeicons/news-file.gif
  35. BIN  docs/en/tutorials/_images/treeicons/search-file.gif
  36. BIN  docs/en/tutorials/_images/tutorial1_2nd_level-cut.jpg
  37. BIN  docs/en/tutorials/_images/tutorial1_addpage.jpg
  38. BIN  docs/en/tutorials/_images/tutorial1_cms-basic.jpg
  39. BIN  docs/en/tutorials/_images/tutorial1_cms-numbered-2b.jpg
  40. BIN  docs/en/tutorials/_images/tutorial1_cms-numbered.jpg
  41. BIN  docs/en/tutorials/_images/tutorial1_editpage-numbered.jpg
  42. BIN  docs/en/tutorials/_images/tutorial1_home-small.jpg
  43. BIN  docs/en/tutorials/_images/tutorial1_home-template.jpg
  44. BIN  docs/en/tutorials/_images/tutorial1_homepage-type.jpg
  45. BIN  docs/en/tutorials/_images/tutorial1_menu-two-level-small.jpg
  46. BIN  docs/en/tutorials/_images/tutorial1_menu-two-level.jpg
  47. BIN  docs/en/tutorials/_images/tutorial1_menu.jpg
  48. BIN  docs/en/tutorials/_images/tutorial1_subtemplates-diagram.jpg
  49. BIN  docs/en/tutorials/_images/tutorial1_url.jpg
  50. BIN  docs/en/tutorials/_images/tutorial2_articleholder.jpg
  51. BIN  docs/en/tutorials/_images/tutorial2_create-staff.jpg
  52. BIN  docs/en/tutorials/_images/tutorial2_data-collation.jpg
  53. BIN  docs/en/tutorials/_images/tutorial2_einstein.jpg
  54. BIN  docs/en/tutorials/_images/tutorial2_homepage-news.jpg
  55. BIN  docs/en/tutorials/_images/tutorial2_icons2.jpg
  56. BIN  docs/en/tutorials/_images/tutorial2_news-cms.jpg
  57. BIN  docs/en/tutorials/_images/tutorial2_news.jpg
  58. BIN  docs/en/tutorials/_images/tutorial2_newslist.jpg
  59. BIN  docs/en/tutorials/_images/tutorial2_pagetype-inheritance.jpg
  60. BIN  docs/en/tutorials/_images/tutorial2_photo.jpg
  61. BIN  docs/en/tutorials/_images/tutorial2_rss-feed.jpg
  62. BIN  docs/en/tutorials/_images/tutorial2_staff-section.jpg
  63. BIN  docs/en/tutorials/_images/tutorial4_search.png
  64. BIN  docs/en/tutorials/_images/tutorial4_searchbox.png
  65. BIN  docs/en/tutorials/_images/url.jpg
  66. BIN  docs/en/tutorials/_images/welcome.png
385  docs/en/tutorials/1-building-a-basic-site.md
Source Rendered
@@ -14,9 +14,6 @@ We are going to create a site in which all the content can be edited in the Silv
14 14
 navigation system, which will be generated on the fly to include all pages you add in the CMS. We will use two different
15 15
 templates - one for the home page, and one for the rest of the site.
16 16
 
17  
-![](_images/home-small.jpg)![](_images/menu-two-level-small.jpg)
18  
-
19  
-
20 17
 ##  Installation
21 18
 
22 19
 You need to [download the SilverStripe software](http://www.silverstripe.org/stable-download) and install it to your local
@@ -24,13 +21,13 @@ machine or to a webserver.
24 21
 
25 22
 For more infomation about installing and configuring a webserver read the [Installation instructions and videos](../installation). 
26 23
 
27  
-If you want to follow this tutorial please choose "empty template" when installing SilverStripe. If you want a fully
28  
-featured theme then select the 'BlackCandy' option.
  24
+This tutorial uses the SilverStripe CMS default theme 'Simple' which you will find in the themes folder. We will investigate the existing template files that make up the theme as well as create some new files to build upon the theme.
29 25
 
30 26
 ##  Exploring the installation
31 27
 
32  
-After installation, open up the folder where you installed SilverStripe. If you installed on windows with WAMP, it will
33  
-likely be at *c:\wamp\wwww*. 
  28
+After installation, open up the folder where you installed SilverStripe. 
  29
+
  30
+If you installed on windows with WAMP, it will likely be at *c:\wamp\wwww*. On Mac OS X with MAMP, it will likely be at */Applications/MAMP/htdocs/*
34 31
 
35 32
 Let's have a look at the folder structure.
36 33
 
@@ -46,40 +43,59 @@ When designing your site you should only need to modify the *mysite*, *themes* a
46 43
 
47 44
 ##  Using the CMS
48 45
 
49  
-The CMS is the area in which you can manage your site content. You can access the cms at http://localhost/admin. You
  46
+### User Interface Basics
  47
+
  48
+![](_images/tutorial1_cms-basic.jpg)
  49
+
  50
+The CMS is the area in which you can manage your site content. You can access the cms at http://localhost/admin (or http://yourdomain.com/admin if you are using you own domain name). You
50 51
 will be presented with a login screen. You can login with the details you provided at installation. After logging in you
51  
-should be greeted with the CMS, pictured below (we've entered some test content).
  52
+should be greeted with the CMS and a list of the pages currently in the CMS. Here you can add, delete and reorganize the pages using the buttons at the top. Clicking on a page will open it in the page editing interface pictured below (we've entered some test content).
  53
+
  54
+![](_images/tutorial1_cms-numbered.jpg)
52 55
 
53  
-![](_images/cms-numbered.jpg)
  56
+1.  These buttons allow you to move between the different sections in the CMS. There are four core sections in the CMS - "Pages", "Files", "Users" and "Settings". Modules may have their own sections here as well, if any are installed. In this tutorial we will be focusing on the "Pages" section.
  57
+2.  While in "Pages" you can quickly move between the pages in the CMS by clicking the vertical bar between the CMS menu and the editor. This will slide out a sidebar. To hide this, click the arrow at the bottom of the sidebar.
  58
+
  59
+![](_images/tutorial1_cms-numbered-2b.jpg)
54 60
 
55  
-1.  These buttons allow you to move between the different sections in the CMS. There are three core sections in the CMS - Site Content, Files & Images and Security. Modules may have their own sections here as well, if any are installed. In this tutorial we will be focusing on the Site Content section.
56  
-2.  All the pages in the site are laid out in the site tree. You can add, delete and reorganize the pages using the buttons at the top. Clicking on a page will open it in the editor on the right.
57 61
 3.  This section allows you to edit the content for the currently selected page, as well as changing other properties of the page such as the page name and URL. The content editor has full [WYSIWYG](http://en.wikipedia.org/wiki/WYSIWYG) abilities, allow you to change formatting and insert links, images and tables.
58  
-4.  There are two copies of each page: draft & published. These buttons allow you to save your changes to the draft copy, publish your draft copy, or revert your draft copy to the published copy. By having separate draft & published copies, we can preview draft changes in the site before publishing them to the live site.
59  
-5.  The navigator will open the current page in the CMS, the draft site, or the published site.
  62
+4.  These buttons allow you to save your changes to the draft copy, publish your draft copy, unpublish from the live website or remove a page from the draft website. 
  63
+The SilverStripe CMS workflow stores two copies of a page, a draft and a published one. By having separate draft & published copies, we can preview draft changes in the site before publishing them to the live website. You can quickly preview your draft pages without leaving the CMS by clicking the "Preview" button.
  64
+
  65
+### Page Editor
  66
+
  67
+Once you have selected a page to modify from the Pages section your page will open in the Page Editior. 
  68
+
  69
+The Edit Page section has 3 main areas in which you can edit the content of the page, change the settings and track your revision history (These will be covered in more detail further on in the tutorials).
  70
+
  71
+![](_images/tutorial1_editpage-numbered.jpg)
  72
+
  73
+1.  *Content* - Allows you to set the title, wysiwyg content, URL and Meta data for your page.
  74
+2.  *Settings* - Here you set the type of page behavior, parent page, show in search, show in menu, and who can view or edit the page.
  75
+3.  *History* - This allow you to view previous version of your page, compare change and revert to previous version if need be.
  76
+
60 77
 
61 78
 ### Try it
62 79
 
63 80
 There are three pages already created for you - "Home", "About Us" and "Contact Us", as well as a 404 page. Experiment
64 81
 with the editor - try different formatting, tables and images. When you are done, click "Save" to save the page or "Save
65  
-& Publish" to post the content to the live site. In our screenshot we've entered some test content. 
66  
-
67  
-> Don't worry that we currently have no way of navigating from page to page without using the CMS - we will build a navigation system soon.
  82
+& Publish" to post the content to the live site. 
68 83
 
69  
-When you create a new page, you are given a drop down that allows you to select the page type of the page. The page type
70  
-specifies the templates used to render the page, the fields that are able to be edited in the CMS, and page specific
  84
+When you create a new page, you are given a drop down that allows you to set the structure of the page (Top level or Under another page) and the page type. 
  85
+The page type specifies the templates used to render the page, the fields that are able to be edited in the CMS, and page specific
71 86
 behavior. We will explain page types in more depth as we progress; for now, make all pages of the type "Page".
72 87
 
  88
+![](_images/tutorial1_addpage.jpg)
73 89
 
74  
-![](_images/home-first.jpg)
75  
-
76  
-**SilverStripe's virtual URLs**
  90
+**SilverStripe's friendly URLs**
77 91
 
78 92
 While you are on the draft or live SilverStripe site, you may notice the URLs point to files that don't exist, e.g.
79  
-http://localhost/contact. SilverStripe uses the URL field on the Meta-Data tab of the editor to look up the appropriate
  93
+http://localhost/contact or http://yourdomainname.com/about-us etc. SilverStripe uses the URL field on the Meta-Data tab of the Edit Page -> Content section to look up the appropriate
80 94
 page in the database.
81 95
 
82  
-![](_images/url.jpg)
  96
+Note that if you have sub-pages, changing the Top level URL field for a page will affect the URL for all sub-pages. For example, if we changed the URL field "/about-us/" to "/about-silverstripe/" then the sub-pages URLs would now be "/about-silverstripe/URL-of-subpage/" rather than "/about-us/URL-of-subpage/".
  97
+
  98
+![](_images/tutorial1_url.jpg)
83 99
 
84 100
 When you create a new page, SilverStripe automatically creates an appropriate URL for it. For example, *About Us* will
85 101
 become *about-us*. You are able to change it yourself so that you can make long titles more usable or descriptive. For
@@ -96,22 +112,30 @@ control codes. Because of this, you can have as much control of your site’s HT
96 112
 
97 113
 Every page in your site has a **page type**. We will briefly talk about page types later, and go into much more detail
98 114
 in tutorial two; right now all our pages will be of the page type *Page*. When rendering a page, SilverStripe will look
99  
-for a template file in the *tutorial/templates* folder, with the name `<PageType>`.ss - in our case *Page.ss*.
  115
+for a template file in the *simple/templates* folder, with the name `<PageType>`.ss - in our case *Page.ss*.
100 116
 
101  
-Open *themes/tutorial/templates/Page.ss*. It uses standard HTML with three exceptions: `<% base_tag %>`, *$Content* and
102  
-*$SilverStripeNavigator*. These template markers are processed by SilverStripe into HTML before being sent to your
103  
-browser.
  117
+Open *themes/simple/templates/Page.ss*. It uses standard HTML apart from these exceptions: 
104 118
 
105 119
 `<% base_tag %>` is replaced with the HTML [base element](http://www.w3.org/TR/html401/struct/links.html#h-12.4). This
106 120
 ensures the browser knows where to locate your site's images and css files.
107 121
 
  122
+*$MetaTitle, $Title, and $SiteConfig.Title* in the html <title> tag are replaced by the title set in the Meta tags, Page Name, or Settings -> Site Title.
  123
+
  124
+*$Title* is simply replaced with the name of the page ('Page name' on the 'Main' tab in the editor).
  125
+
  126
+*$MetaTags* adds meta tags for search engines, as well as the page title ('Title' on the 'Meta-data' tab in the
  127
+editor). You can define your metatags in the meta-data tab off the content editor in the CMS. 
  128
+
  129
+*$Layout* is replaced with the contents of a template file with the same name as the page type we are using. 
  130
+
  131
+Open *themes/simple/templates/Layout/Page.ss*. You will see more HTML and more SilverStripe template replacement tags and variables.
  132
+
108 133
 *$Content* is replaced with the content of the page currently being viewed. This allows you to make all changes to
109 134
 your site's content in the CMS.
110 135
 
111  
-*$SilverStripeNavigator* inserts the HTML for the navigator at the bottom of the page, which allows you to move
112  
-quickly between the CMS and the draft and published version of your page.
  136
+These template markers are processed by SilverStripe into HTML before being sent to your
  137
+browser and are formatted either with a *$* at the beginning or are between the SilverStripe template tags *`<%  %>`*.
113 138
 
114  
-![The SilverStripe Navigator](_images/navigator.jpg)
115 139
 
116 140
 **Flushing the cache**
117 141
 
@@ -119,85 +143,38 @@ Whenever we edit a template file, we need to append *?flush=1* onto the end of t
119 143
 http://localhost/home/?flush=1. SilverStripe stores template files in a cache for quicker load times. Whenever there are
120 144
 changes to the template, we must flush the cache in order for the changes to take effect.
121 145
 
122  
-## Inserting the page title
123  
-
124  
-Let's introduce two new template variables - *$Title* and *$MetaTags*.
125  
-
126  
-*$Title* is simply replaced with the name of the page ('Page name' on the 'Main' tab in the editor). 
127  
-
128  
-Open *themes/tutorial/templates/Page.ss* and find the following code:
129  
-
130  
-	:::ss
131  
-	<div id="Header">
132  
-	   <h1>&nbsp;</h1>
133  
-	</div>
134  
-
135  
-and replace it with
136  
-
137  
-	:::ss
138  
-	<div id="Header">
139  
-	 <h1>$Title</h1>
140  
-	</div>
141  
-
142  
-
143  
-*$MetaTags* adds meta tags for search engines, as well as the page title ('Title' on the 'Meta-data' tab in the
144  
-editor). You can define your metatags in the meta-data tab off the content editor in the CMS. 
145  
-
146  
-Add *$MetaTags* to the head so that it looks like this:
147  
-
148  
-	:::ss
149  
-	<head>
150  
-	   <% base_tag %>
151  
-	   $MetaTags
152  
-	   <% require themedCSS(layout) %> 
153  
-	   <% require themedCSS(typography) %> 
154  
-	   <% require themedCSS(form) %>
155  
-	</head>
156  
-
  146
+##  The Navigation System
157 147
 
158  
-> Don't forget to flush the cache each time you change a template by adding *?flush=1* onto the end of the URL.
  148
+We are now going to look at how the navigation system is implemented in the template. 
159 149
 
160  
-Your page should now look something like this (with your own content of course):
  150
+Open up *themes/simple/templates/Includes/Navigation.ss*
161 151
 
162  
-![](_images/title.jpg)
  152
+Menu for our site are created using a **loop**. Loops allow us to iterate over a data set, and render each item using a sub-template. The
  153
+**loop** *Menu(1)* returns the set of the first level menu items. We can then use the template variable
  154
+*$MenuTitle* to show the title of the page we are linking to, $Link for the URL of the page and $LinkingMode to help style our menu with CSS (explained in more detail shortly).
163 155
 
164  
-##  Making a Navigation System
165  
-
166  
-So far we have made several pages, but we have no way to navigate between them. We can create a menu for our site using
167  
-a **control block**. Control blocks allow us to iterate over a data set, and render each item using a sub-template. The
168  
-**page control** *Menu(1)* returns the set of the first level menu items. We can then use the template variable
169  
-*$MenuTitle* to show the title of the page we are linking to.
170  
-
171  
-Open up *themes/tutorial/templates/Page.ss*, and insert the following code inside `<div id="Main">`:
  156
+> $Title refers to *Page Name* in the CMS, whereas $MenuTitle refers to (the often shorter) *Navigation label*
172 157
 
173 158
 	:::ss
174  
-	<ul id="Menu1">
175  
-	   <% control Menu(1) %>
176  
-	      <li><a href="#">$MenuTitle</a></li>
177  
-	   <% end_control %>
  159
+	<ul>
  160
+		<% loop Menu(1) %>	  
  161
+			<li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>
  162
+		<% end_loop %>
178 163
 	</ul>
179 164
 
180  
-Here we've created an unordered list called *Menu1*, which *themes/tutorial/css/layout.css* will style into the menu.
181  
-Then, using a control block over the page control *Menu(1)*, we add a link to the list for each menu item. 
  165
+Here we've created an unordered list called *Menu1*, which *themes/simple/css/layout.css* will style into the menu.
  166
+Then, using a loop over the page control *Menu(1)*, we add a link to the list for each menu item. 
182 167
 
183  
-All going to plan, your page should look like this:
  168
+This creates the navigation at the top of the page:
184 169
 
185  
-![](_images/menu.jpg)
  170
+![](_images/tutorial1_menu.jpg)
186 171
 
187  
-The menu isn't really very useful until each button links to the relevant page. We can get the link for the menu item in
188  
-question by using the *$Link* template variable. 
189 172
 
190  
-Replace the list item line with this one:
191  
-
192  
-	:::ss
193  
-	<li><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li>
194  
-
195  
-> $Title refers to *Page Name* in the CMS, whereas $MenuTitle refers to (the often shorter) *Navigation label*
196 173
 
197 174
 ## Highlighting the current page
198 175
 
199 176
 A useful feature is highlighting the current page the user is looking at. We can do this with the template variable
200  
-*$LinkingMode*. *$LinkingMode* returns one of three values:
  177
+*$LinkingMode* which we mentioned before. *$LinkingMode* returns one of three values:
201 178
 
202 179
 *  *current* - This page is being visited, and should be highlighted
203 180
 *  *link* - The page is not currently being visited, so shouldn't be highlighted
@@ -205,59 +182,57 @@ A useful feature is highlighting the current page the user is looking at. We can
205 182
 
206 183
 > For example: if you were visiting a staff member such as "Home > Company > Staff > Bob Smith", you would want to highlight 'Company' to say you are in that section.
207 184
 
208  
-Highlighting the current page is easy, simply assign a css class based on the value of *$LinkingMode*. Then provide a different style for current/section in css, as has been provided for you in *tutorial/css/layout.css*. 
209  
-
210  
-Change the list item line in *Page.ss* so it looks like this:
  185
+Highlighting the current page is easy, simply assign a css class based on the value of *$LinkingMode*. Then provide a different style for current/section in css, as has been provided for you in *simple/css/layout.css*. 
211 186
 
212  
-	:::ss
213  
-	<li class="$LinkingMode">
214  
-		<a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a>
215  
-	</li>
  187
+![](_images/tutorial1_menu-highlighted.jpg)
216 188
 
217  
-You should now have a fully functional top menu
  189
+## A second level of navigation
218 190
 
219  
-![](_images/menu-highlighted.jpg)
  191
+The top navigation system is currently quite restrictive. There is no way to
  192
+nest pages, we have a completely flat site. Adding a second level in SilverStripe is easy. First (if you haven't already done so), let's add some pages. 
220 193
 
221  
-## Adding a second level
  194
+The "About Us" section could use some expansion. 
222 195
 
223  
-Although we have a fully functional navigation system, it is currently quite restrictive. Currently there is no way to
224  
-nest pages, we have a completely flat site. Adding a second level in SilverStripe is easy. First, let's add some pages. The "About Us" section could use some expansion. 
  196
+Select "Add New" in the Pages section, and create two new pages nested under the page "About Us" called "What we do" and "Our History" with the type "Page". 
225 197
 
226  
-Select "About Us", and create two new pages "What we do" and "Our History" of the type "Page" inside. You can also create the pages elsewhere on the site tree, and use the reorganize button to drag and drop the pages into place. 
  198
+You can also create the pages elsewhere on the site tree, and drag and drop the pages into place. 
227 199
 
228 200
 Either way, your site tree should now look something like this:
229 201
 
230  
-![](_images/2nd_level-cut.jpg)
  202
+![](_images/tutorial1_2nd_level-cut.jpg)
  203
+
  204
+Great, we now have a hierarchical site structure, let's now look at how this is created and displayed in our template.
231 205
 
232  
-Great, we now have a hierarchical site structure, but we still have no way of getting to these second level pages.
233 206
 Adding a second level menu is very similar to adding the first level menu. 
234 207
 
235  
-Open up our *Page.ss* template, and find the `<div id="ContentContainer">` tag. Underneath it, add the following code:
  208
+Open up */themes/simple/templates/Includes/Sidebar.ss* template and look at the following code:
236 209
 
237 210
 	:::ss
238  
-	<ul id="Menu2">
239  
-	  <% control Menu(2) %>
240  
-	    <li class="$LinkingMode"><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li>
241  
-	  <% end_control %>
  211
+	<ul>
  212
+	  <% loop Menu(2) %>
  213
+	    <li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><span class="arrow">&rarr;</span><span class="text">$MenuTitle.XML</span></a></li>
  214
+	  <% end_loop %>
242 215
 	</ul>
243 216
 
244  
-This should look very familiar. It is exactly the same as our first menu, except we have named our linked list *Menu2*
245  
-and we are using the control *Menu(2)* instead of *Menu(1)*. As we can see here, the *Menu* control takes a single
  217
+This should look very familiar. It is the same idea as our first menu, except the loop block now uses *Menu(2)* instead of *Menu(1)*. 
  218
+As we can see here, the *Menu* control takes a single
246 219
 argument - the level of the menu we want to get. Our css file will style this linked list into the second level menu,
247 220
 using our usual *$LinkingMode* technique to highlight the current page.
248 221
 
249  
-We now have our second level menu, but we also have a problem. The menu is displayed on every page, even those that
250  
-don't have any nested pages. We can solve this problem with an **if block**. Simply surround the menu with an if block
  222
+To make sure the menu is not displayed on every page, even those that *don't* have any nested pages. We use an **if block**. 
  223
+Look again in the *Sidebar.ss* file and you will see that the menu is surrounded with an **if block**
251 224
 like this:
252 225
 
253 226
 	:::ss
254 227
 	<% if Menu(2) %>
255  
-	  <ul id="Menu2">
256  
-	    <% control Menu(2) %>
257  
-	      <li class="$LinkingMode"><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li>
258  
-	    <% end_control %>
259  
-	  </ul>
260  
-	<% end_if %>
  228
+		...
  229
+			<ul>
  230
+				<% loop Menu(2) %>
  231
+				<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><span class="arrow">&rarr;</span><span class="text">$MenuTitle.XML</span></a></li>
  232
+				<% end_loop %>
  233
+			</ul>
  234
+		...
  235
+	<% end_if %>  	
261 236
 
262 237
 The if block only includes the code inside it if the condition is true. In this case, it checks for the existence of
263 238
 *Menu(2)*. If it exists then the code inside will be processed and the menu will be shown. Otherwise the code will not
@@ -265,38 +240,52 @@ be processed and the menu will not be shown.
265 240
 
266 241
 Now that we have two levels of navigation, it would also be useful to include some "breadcrumbs". 
267 242
 
268  
-Find *`<div id="Content" class="typography">`* and underneath it add:
  243
+Open up */themes/simple/templates/Includes/BreadCrumbs.ss* template and look at the following code:
269 244
 
270 245
 	:::ss
271  
-	<div class="breadcrumbs">
272  
-	  $Breadcrumbs
273  
-	</div>	
  246
+	<% if Level(2) %>
  247
+	<div id="Breadcrumbs">
  248
+	   	$Breadcrumbs
  249
+	</div>
  250
+<% end_if %>	
274 251
 
275 252
 Breadcrumbs are only useful on pages that aren't in the top level. We can ensure that we only show them if we aren't in
276 253
 the top level with another if statement.
277 254
 
278  
-	:::ss
279  
-	<% if Level(2) %>
280  
-	  <div class="breadcrumbs">
281  
-	    $Breadcrumbs
282  
-	  </div>
283  
-	<% end_if %>
284  
-
285  
-The *Level* page control allows you to get data from the page's parents, eg if you used *Level(1)*, you could use
  255
+The *Level* page control allows you to get data from the page's parents, e.g. if you used *Level(1)*, you could use
286 256
 *$Level(1).Title* to get the top level page title. In this case, we merely use it to check the existence of a second
287 257
 level page; if one exists then we include the breadcrumbs.
288 258
 
289  
-We now have a fully functioning two level navigation system. Both menus should be updating and highlighting as you move
  259
+This shows how the two level navigation system functions. Both menus should be updating and highlighting as you move
290 260
 from page to page. They will also mirror changes done in the SilverStripe CMS, such as renaming pages or moving them
291 261
 around.
292 262
 
293  
-![](_images/menu-two-level.jpg)
  263
+![](_images/tutorial1_menu-two-level.jpg)
  264
+
  265
+Feel free to experiment with the if and loop blocks, for example you could create a drop down style menu from the top navigation using a combination of the if blocks, loop blocks and some CSS to style it. This uses a *Children* if and loop block which checks to see if there is any sub-pages available within each top level navigation item, you will need to come up with your own CSS to correctly style this approach.
  266
+
  267
+	::ss
  268
+	<ul>
  269
+	  <% loop Menu(1) %>
  270
+	    <li class="$LinkingMode">
  271
+	      <a href="$Link" title="$Title.XML">$MenuTitle.XML</a>
  272
+	      <% if Children %>
  273
+	      <ul>
  274
+	        <% loop Children %>
  275
+	          <li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><span class="arrow">&rarr;</span><span class="text">$MenuTitle.XML</span></a></li>
  276
+	        <% end_loop %>
  277
+	      <ul>
  278
+	      <% end_if %>
  279
+	    </li>
  280
+	  <% end_loop %>
  281
+	</ul>
  282
+
294 283
 
295 284
 
296 285
 
297 286
 ## Using a different template for the home page
298 287
 
299  
-So far, a single template *Page.ss* is being used for the entire site. This is useful for the purpose of this
  288
+So far, a single template layout *Layouts/Page.ss* is being used for the entire site. This is useful for the purpose of this
300 289
 tutorial, but in a finished website we can expect there to be several page layouts.
301 290
 
302 291
 To illustrate how we do this, we will create a new template for the homepage. This template will have a large graphical
@@ -305,7 +294,7 @@ banner to welcome visitors.
305 294
 ### Creating a new page type
306 295
 
307 296
 Earlier we stated that every page in a SilverStripe site has a **page type**, and that SilverStripe will look for a
308  
-template corresponding to the page type. Therefore, the first step to get the homepage using a different template is to
  297
+template or template layout corresponding to the page type. Therefore, the first step to get the homepage using a different template is to
309 298
 create a new page type.
310 299
 
311 300
 Each page type is represented by two php classes: a *data object* and a *controller*. Don't worry about the details of page
@@ -332,8 +321,9 @@ Create a new file *HomePage.php* in *mysite/code*. Copy the following code into
332 321
 
333 322
 
334 323
 Every page type also has a database table corresponding to it. Every time we modify the database, we need to rebuild it.
335  
-We can do this by going to [http://localhost/dev/build?flush=1](http://localhost/dev/build?flush=1). It may take a
336  
-moment, so be patient. This add tables and fields needed by your site, and modifies any structures that have changed. It
  324
+We can do this by going to [http://localhost/dev/build?flush=1](http://localhost/dev/build?flush=1) or replace *localhost* with your own domain name. 
  325
+
  326
+It may take a moment, so be patient. This add tables and fields needed by your site, and modifies any structures that have changed. It
337 327
 does this non-destructively - it will never delete your data.
338 328
 
339 329
 As we have just created a new page type, SilverStripe will add this to the list of page types in the database.
@@ -342,9 +332,9 @@ As we have just created a new page type, SilverStripe will add this to the list
342 332
 
343 333
 After building the database, we can change the page type of the homepage in the CMS. 
344 334
 
345  
-Under the "Behaviour" tab. Change it to *HomePage*, and click "Save Draft" and "Publish".
  335
+Navigate in the CMS to the "Home" page and under the "Behaviour" tab in the "Edit Page > Settings" section. Change it to *Home Page*, and click "Save & Publish".
346 336
 
347  
-![](_images/homepage-type.jpg)
  337
+![](_images/tutorial1_homepage-type.jpg)
348 338
 
349 339
 Our homepage is now of the page type *HomePage*. However, even though it is of the *HomePage* page type, it is still
350 340
 rendered with the *Page* template. SilverStripe still renders the homepage using the *Page* template because when we
@@ -352,118 +342,39 @@ created the *HomePage* page type, we inherited from *Page*. So when SilverStripe
352 342
 will use the *Page* template. SilverStripe always attempts to use the most specific template first, and then falls back
353 343
 to the template of the page type's parents.
354 344
 
355  
-### Creating a new template
356  
-
357  
-To create a new template, create a copy of *Page.ss* (found in *themes/tutorial/templates*) and call it *HomePage.ss*. If we flush the cache (*?flush=1*), SilverStripe should now be using *HomePage.ss* for the homepage, and *Page.ss* for the rest of the site. Now let's customize the *HomePage* template. 
358  
-
359  
-First, remove the breadcrumbs and the secondary menu; we don't need them for the homepage. Let's replace the title with our image. Add this line above the *Content* div:
360 345
 
361  
-	:::ss
362  
-	<div id="Banner">
363  
-	  <img src="themes/tutorial/images/welcome.png" alt="Homepage image" />
364  
-	</div>
365  
-
366  
-
367  
-![](_images/home-template.jpg)
368  
-
369  
-### Using a subtemplate
370  
-
371  
-Having two templates is good, but we have a lot of identical code in the two templates. Rather than having two
372  
-completely separate templates, we can use subtemplates to specify only the part of the template that has changed.
373  
-If we compare *Page.ss* and *HomePage.ss*, we can see the only differences are within the *ContentContainer* div. 
374  
-
375  
-Copy the contents of the *ContentContainer* div from *themes/tutorial/templates/Page.ss* to a new file
376  
-*themes/tutorial/templates/Layout/Page.ss*, and do the same from *themes/tutorial/templates/HomePage.ss* to
377  
-*themes/tutorial/templates/Layout/HomePage.ss*. 
378  
-
379  
-The files should look like this:
380  
-
381  
-**themes/tutorial/templates/Layout/Page.ss**
  346
+### Creating a new template
382 347
 
383  
-	:::ss
384  
-	<% if Menu(2) %>
385  
-	  <ul id="Menu2">
386  
-	    <% control Menu(2) %>
387  
-	      <li class="$LinkingMode"><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li>
388  
-	    <% end_control %>
389  
-	  </ul>
390  
-	<% end_if %>
391  
-	
392  
-	<div id="Content" class="typography">
393  
-	  <% if Level(2) %>
394  
-	    <div class="breadcrumbs">
395  
-	      $Breadcrumbs
396  
-	    </div>
397  
-	  <% end_if %>			
398  
-	  $Content
399  
-	  $Form
400  
-	</div>
  348
+To create a new template layout, create a copy of *Page.ss* (found in *themes/simple/templates/Layouts*) and call it *HomePage.ss*. If we flush the cache (*?flush=1*), SilverStripe should now be using *HomePage.ss* for the homepage, and *Page.ss* for the rest of the site. Now let's customize the *HomePage* template. 
401 349
 
  350
+First, remove the breadcrumbs and the secondary menu by removing the `<% include SideBar %>` line of code; we don't need them for the homepage. Let's replace the title with an image. Add this line above the *$Content* variable.
402 351
 
403  
-**themes/tutorial/templates/Layout/HomePage.ss**
  352
+Now add the following to replace the `<h1>$Title</h1>` code in your template:
404 353
 
405 354
 	:::ss
406 355
 	<div id="Banner">
407  
-	  <img src="themes/tutorial/images/welcome.png" alt="Homepage image" />
  356
+	  <img src="http://www.silverstripe.org/themes/silverstripe/images/sslogo.png" alt="Homepage image" />
408 357
 	</div>
409  
-	<div id="Content" class="typography">
410  
-	  $Content
411  
-	</div>
412  
-
413  
-
414 358
 
415 359
 
416  
-We can then delete *themes/tutorial/templates/HomePage.ss*, as it is no longer needed. 
  360
+Your Home page should now look like this:
417 361
 
418  
-Replace the code we just copied out of *themes/tutorial/templates/Page.ss* with *$Layout*, so it looks like this:
419 362
 
420  
-**themes/tutorial/templates/Page.ss**
  363
+![](_images/tutorial1_home-template.jpg)
421 364
 
422  
-	:::ss
423  
-	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
424  
-	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
425  
-	  <head>
426  
-	    <% base_tag %>
427  
-	    $MetaTags
428  
-	    <% require themedCSS(layout) %> 
429  
-	   	<% require themedCSS(typography) %> 
430  
-	   	<% require themedCSS(form) %>
431  
-	  </head>
432  
-	  <body>
433  
-	    <div id="Main">
434  
-	      <ul id="Menu1">
435  
-	        <% control Menu(1) %>
436  
-	          <li class="$LinkingMode"><a href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li>
437  
-	        <% end_control %>
438  
-	      </ul>
439  
-	      <div id="Header">
440  
-	        <h1>$Title</h1>
441  
-	      </div>
442  
-	      <div id="ContentContainer">
443  
-	        $Layout
444  
-	      </div>
445  
-	      <div id="Footer">
446  
-	        <span>Visit <a href="http://www.silverstripe.com" title="Visit www.silverstripe.com">www.silverstripe.com</a> to download the CMS</span>
447  
-	      </div>
448  
-	    </div>
449  
-	    $SilverStripeNavigator
450  
-	  </body>
451  
-	</html>
452  
-
453  
-> As you have just done a few template changes, remember to add *?flush=1* in your URL to flush the cache so see your changes in the browser
454  
-
455  
-SilverStripe first searches for a template in the *themes/tutorial/templates* folder. Since there is no *HomePage.ss*,
  365
+SilverStripe first searches for a template in the *themes/simple/templates* folder. Since there is no *HomePage.ss*,
456 366
 it will use the *Page.ss* for both *Page* and *HomePage* page types. When it comes across the *$Layout* tag, it will
457  
-then descend into the *themes/tutorial/templates/Layout* folder, and will use *Page.ss* for the *Page* page type, and
458  
-*HomePage.ss* for the *HomePage* page type.
  367
+then descend into the *themes/simple/templates/Layout* folder, and will use *Page.ss* for the *Page* page type, and
  368
+*HomePage.ss* for the *HomePage* page type. So while you could create a HomePage.ss in the *themes/simple/templates/* it is better to reuse the navigation and footer common to both our Home page and the rest of the pages on our website and lets you write less code to achieve the end result.
  369
+
  370
+![](_images/tutorial1_subtemplates-diagram.jpg)
459 371
 
460  
-![](_images/subtemplates-diagram.jpg)
461 372
 
462 373
 ## Summary
463 374
 
464  
-Starting from a basic template, we have introduced template variables, controls and if blocks, and we have used these
  375
+We have introduced template variables, controls and if blocks, and we have used these
465 376
 to build a basic but fully functional site. You have also been briefly introduced to page types, and seen how they
466  
-correspond to templates and subtemplates. By using these templates, you have seen how to customize the site content
  377
+correspond to templates and sub-templates. By using these templates, you have seen how to customize the site content
467 378
 according to the page type of the page you are displaying.
468 379
 
469 380
 In the next tutorial, [Extending a Basic Site](2-extending-a-basic-site), we will explore page types on a
284  docs/en/tutorials/2-extending-a-basic-site.md
Source Rendered
@@ -16,7 +16,9 @@ Throughout this tutorial we are going to work on adding two new sections to the
16 16
 first is a news section, with a recent news listing on the homepage and an RSS feed. The second is a staff section,
17 17
 which demonstrates more complex database structures by associating an image with each staff member.
18 18
 
19  
-![](_images/news-with-rss-small.jpg)![](_images/einstein-small.jpg)
  19
+![](_images/tutorial2_newslist.jpg)
  20
+
  21
+![](_images/tutorial2_einstein.jpg)
20 22
 
21 23
 
22 24
 
@@ -57,7 +59,7 @@ the database, which fields can be edited in the CMS, and can use code to make ou
57 59
 A more in-depth introduction of Model-View-Controller can be found
58 60
 [here](http://www.slash7.com/articles/2005/02/22/mvc-the-most-vexing-conundrum).
59 61
 
60  
-![](_images/pagetype-inheritance.jpg)
  62
+![](_images/tutorial2_pagetype-inheritance.jpg)
61 63
 
62 64
 ## Creating the news section page types
63 65
 
@@ -171,8 +173,10 @@ method to the *ArticlePage* class.
171 173
 		public function getCMSFields() {
172 174
 			$fields = parent::getCMSFields();
173 175
 			
174  
-			$fields->addFieldToTab('Root.Content', new DateField('Date'), 'Content');
175  
-			$fields->addFieldToTab('Root.Content', new TextField('Author'), 'Content');
  176
+			$datefield = new DateField('Date');
  177
+			$datefield->setConfig('showcalendar', true);
  178
+			$fields->addFieldToTab('Root.Main', $datefield, 'Content');
  179
+			$fields->addFieldToTab('Root.Main', new TextField('Author'), 'Content');
176 180
 			
177 181
 			return $fields;
178 182
 		}
@@ -192,13 +196,14 @@ Firstly, we get the fields from the parent class; we want to add fields, not rep
192 196
 returned is a `[api:FieldList]` object.
193 197
 
194 198
 	:::php
195  
-	$fields->addFieldToTab('Root.Content', new DateField('Date'), 'Content');
196  
-	$fields->addFieldToTab('Root.Content', new TextField('Author'), 'Content');
  199
+	$fields->addFieldToTab('Root.Main', new TextField('Author'), 'Content');
  200
+	$fields->addFieldToTab('Root.Main', new DateField('Date'), 'Content');
197 201
 
198 202
 
199 203
 We can then add our new fields with *addFieldToTab*. The first argument is the tab on which we want to add the field to:
200  
-"Root.Content" is the tab which the content editor is on. The second argument is the field to add; this is not a
201  
-database field, but a `[api:FormField]` documentation for more details.
  204
+"Root.Main" is the tab which the content editor is on (another is "Root.Metadata". The second argument is the field to add; this is not a database field, but a `[api:FormField]` - see the documentation for more details.
  205
+
  206
+We add two fields: A simple `[api:TextField}` and a `[api:DateField]`. There are many more FormFields available in the default installation, please refer to [Form Field Types](form-field-types) for the list.
202 207
 
203 208
 	:::php
204 209
 	return $fields;
@@ -210,14 +215,15 @@ to edit the fields in the CMS.
210 215
 Now that we have created our page types, let's add some content. Go into the CMS and create an *ArticleHolder* page
211 216
 named "News", and create some *ArticlePage*s inside it.
212 217
 
213  
-![](_images/news-cms.jpg)
  218
+![](_images/tutorial2_news-cms.jpg)
214 219
 
215 220
 ##  Modifing the date field
216 221
 
217  
-**Please note:** As of version 2.4, the DateField type no longer automatically adds a javascript datepicker. Your date field will look just like a text field. 
  222
+At the moment, your date field will look just like a text field. 
218 223
 This makes it confusing and doesn't give the user much help when adding a date. 
219 224
 
220  
-To make the date field a bit more user friendly, you can add a dropdown calendar, set the date format and add better title.
  225
+To make the date field a bit more user friendly, you can add a dropdown calendar, set the date format and add better title. By default,
  226
+the date field will have the date format defined by your locale.
221 227
 
222 228
 	:::php
223 229
 	<?php
@@ -229,11 +235,11 @@ To make the date field a bit more user friendly, you can add a dropdown calendar
229 235
 	public function getCMSFields() {
230 236
 		$fields = parent::getCMSFields();
231 237
 		
232  
-		$fields->addFieldToTab('Root.Content', $dateField = new DateField('Date','Article Date (for example: 20/12/2010)'), 'Content');
  238
+		$fields->addFieldToTab('Root.Main', $dateField = new DateField('Date','Article Date (for example: 20/12/2010)'), 'Content');
233 239
 		$dateField->setConfig('showcalendar', true);
234 240
 		$dateField->setConfig('dateformat', 'dd/MM/YYYY');
235 241
 		
236  
-		$fields->addFieldToTab('Root.Content', new TextField('Author','Author Name'), 'Content');
  242
+		$fields->addFieldToTab('Root.Main', new TextField('Author','Author Name'), 'Content');
237 243
 		
238 244
 		return $fields;
239 245
 	}
@@ -243,7 +249,7 @@ Let's walk through these changes.
243 249
 	:::php
244 250
 	$fields->addFieldToTab('Root.Content', $dateField = new DateField('Date','Article Date (for example: 20/12/2010)'), 'Content');
245 251
 
246  
-*$dateField* is added only to the DateField in order to change the configuration.
  252
+*$dateField* is declared only to in order to change the configuration of the DateField.
247 253
 
248 254
 	:::php
249 255
 	$dateField->setConfig('showcalendar', true);
@@ -258,8 +264,8 @@ Set *showCalendar* to true to have a calendar appear underneath the Date field w
258 264
 	:::php
259 265
 	$fields->addFieldToTab('Root.Content', new TextField('Author','Author Name'), 'Content');
260 266
 
261  
-By default the first argument *'Date'* or *'Author'* is shown as the title, however this might not be that helpful so to change the title,
262  
-add the new title as the second argument. See the `[api:DateField]` documentation for more details.
  267
+By default the field name *'Date'* or *'Author'* is shown as the title, however this might not be that helpful so to change the title,
  268
+add the new title as the second argument. See the `[api:DateField]` documentation for more details of the DateField configuration.
263 269
 
264 270
 
265 271
 ##  Creating the templates
@@ -273,153 +279,121 @@ page layout.
273 279
 
274 280
 First, the template for displaying a single article:
275 281
 
276  
-**themes/tutorial/templates/Layout/ArticlePage.ss**
  282
+**themes/simple/templates/Layout/ArticlePage.ss**
  283
+
277 284
 
278 285
 	:::ss
279  
-	<% if Menu(2) %>
280  
-		<ul id="Menu2">
281  
-			<% control Menu(2) %>
282  
-				<li class="$LinkingMode"><a href="$Link" title="Go to the $Title page">$MenuTitle</a></li>
283  
-			<% end_control %>
284  
-		</ul>
285  
-	<% end_if %>
286  
-	
287  
-	<div id="Content" class="typography">
288  
-		<% if Level(2) %>
289  
-			<div class="breadcrumbs">
290  
-				$Breadcrumbs
  286
+	<div class="content-container"> 
  287
+		<article>
  288
+			<h1>$Title</h1>
  289
+			<div class="news-details">
  290
+				<p>Posted on $Date.Nice by $Author</p>
291 291
 			</div>
292  
-		<% end_if %>
293  
-				
294  
-		<h1>$Title</h1>
295  
-		$Content
296  
-		<div class="newsDetails">
297  
-			Posted on $Date.Nice by $Author
298  
-		</div>
  292
+			<div class="content">$Content</div>
  293
+		</article>
  294
+			$Form
  295
+			$PageComments
299 296
 	</div>
  297
+	<% include SideBar %>
300 298
 
301 299
 
302  
-The first block of code is our regular second level menu; we also have our regular breadcrumbs code here. We will see
303  
-how to remove these blocks of repetitive code in a bit.
  300
+Most of the code is just like the regular Page.ss, we include an informational div with the date and the author of the Article.
304 301
 
305 302
 We use *$Date* and *$Author* to access the new fields. In fact, all template variables and page controls come from
306  
-either the data object or the controller for the page being displayed. The *$Breadcrumbs* variable comes from the
307  
-*Breadcrumbs()* method of the `[api:SiteTree]` class. *$Date* and *$Author* come from the *Article* table through
308  
-your data object. *$Content* comes from the *SiteTree* table through the same data object. The data for your page is
  303
+either the data object or the controller for the page being displayed. The *$Title* variable comes from the
  304
+*Title* field of the `[api:SiteTree]` class. *$Date* and *$Author* come from the *ArticlePage* table through
  305
+your custom Page. *$Content* comes from the *SiteTree* table through the same data object. The data for your page is
309 306
 spread across several tables in the database matched by id - e.g. *Content* is in the *SiteTree* table, and *Date* and
310  
-*Author* are in the *Article* table. SilverStripe matches these records by their ids and collates them into the single
  307
+*Author* are in the *ArticlePage* table. SilverStripe matches these records by their ids and collates them into the single
311 308
 data object.
312 309
 
313  
-![](_images/data-collation.jpg)
  310
+![](_images/tutorial2_data-collation.jpg)
314 311
 
315 312
 Rather than using *$Date* directly, we use *$Date.Nice*. If we look in the `[api:Date]` documentation, we can see
316 313
 that the *Nice* function returns the date in *dd/mm/yyyy* format, rather than the *yyyy-mm-dd* format stored in the
317 314
 database.
318 315
 
319  
-![](_images/news.jpg)
  316
+![](_images/tutorial2_news.jpg)
320 317
 
321 318
 Now we'll create a template for the article holder: we want our news section to show a list of news items, each with a
322 319
 summary.
323 320
 
324  
-**themes/tutorial/templates/Layout/ArticleHolder.ss**
  321
+**themes/simple/templates/Layout/ArticleHolder.ss**
325 322
 
326 323
 	:::ss
327  
-	<div id="Content" class="typography">		
328  
-		$Content
329  
-		<ul id="NewsList">
330  
-			<% control Children %>
331  
-				<li class="newsDateTitle"><a href="$Link" title="Read more on &quot;{$Title}&quot;">$Title</a></li>
332  
-				<li class="newsDateTitle">$Date.Nice</li>
333  
-				<li class="newsSummary">$Content.FirstParagraph <a href="$Link" title="Read more on &quot;{$Title}&quot;">Read more &gt;&gt;</a></li>
334  
-			<% end_control %>
335  
-		</ul>
  324
+	<div class="content-container">     
  325
+		<article>
  326
+			<h1>$Title</h1>
  327
+			$Content        
  328
+			<div class="content">$Content</div>
  329
+		</article>
  330
+		<% loop Children %>
  331
+			<article>
  332
+				<h2><a href="$Link" title="Read more on &quot;{$Title}&quot;">$Title</a></h2>
  333
+				<p>$Content.FirstParagraph</p>
  334
+				<a href="$Link" title="Read more on &quot;{$Title}&quot;">Read more &gt;&gt;</a>
  335
+			</article>
  336
+		<% end_loop %>
  337
+			$Form
336 338
 	</div>
  339
+	<% include SideBar %>
337 340
 
338 341
 
339 342
 Here we use the page control *Children*. As the name suggests, this control allows you to iterate over the children of a
340 343
 page, which in this case is our news articles. The *$Link* variable will give the address of the article which we can
341 344
 use to create a link, and the *FirstParagraph* function of the `[api:HTMLText]` field gives us a nice summary of the
342  
-article.
343  
-
344  
-![](_images/articleholder.jpg)
  345
+article. The function strips all tags from the paragraph extracted.
345 346
 
346  
-Remember that the visual styles are not part of the CMS, they are defined in the tutorial CSS file.
  347
+![](_images/tutorial2_articleholder.jpg)
347 348
 
348 349
 
349 350
 ### Using include files in templates
350 351
 
351  
-The second level menu is something we want in most, but not all, pages so we can't put it in the base template. By
352  
-putting it in a separate file in the *tutorial/templates/Includes* folder, we can use `<% include templatename %>` to
353  
-include it in our other templates. Separate the second level menu into a new file *themes/tutorial/templates/Includes/Menu2.ss*.
  352
+You can make your templates more modular and easier to maintain by separating commonly-used pieces into include files. 
  353
+You are already familiar with the `<% include Sidebar %>`-Line for the menu.
354 354
 
355  
-**themes/tutorial/templates/Includes/Menu2.ss**
356  
-
357  
-	:::ss
358  
-	<% if Menu(2) %>
359  
-		<ul id="Menu2">
360  
-			<% control Menu(2) %>
361  
-				<li class="$LinkingMode"><a href="$Link" title="Go to the $Title page">$MenuTitle</a></li>
362  
-			<% end_control %>
363  
-		</ul>
364  
-	<% end_if %>
  355
+We'll separate the display of linked articles as we want to reuse this code later on.
365 356
 
  357
+Replace the code in *ArticleHolder.ss** with an include statement:
366 358
 
367  
-And then replace the second level menu with `<% include Menu2 %>` in *Page.ss* and *ArticlePage.ss* like so:
368  
-
369  
-**themes/tutorial/templates/Layout/Page.ss**, **themes/tutorial/templates/Layout/ArticlePage.ss**
  359
+**themes/simple/templates/Layout/ArticleHolder.ss**
370 360
 
371 361
 	:::ss
372  
-	<% include Menu2 %>
373  
-	 
374  
-	<div id="Content" class="typography">
375 362
 	...
376  
-
377  
-
378  
-Do the same with the breadcrumbs:
379  
-
380  
-**themes/tutorial/templates/Includes/Breadcrumbs.ss**
381  
-
382  
-	:::ss
383  
-	<% if Level(2) %>
384  
-	<div class="breadcrumbs">
385  
-		$Breadcrumbs
386  
-	</div>
387  
-	<% end_if %>
388  
-
389  
-
390  
-**themes/tutorial/templates/Layout/Page.ss**, **themes/tutorial/templates/Layout/ArticlePage.ss**
391  
-
392  
-	:::ss
  363
+	<% loop Children %>
  364
+		<% include ArticleTeaser %>
  365
+	<% end_loop %>
393 366
 	...
394  
-	<div id="Content" class="typography">
395  
-		<% include Breadcrumbs %>
396  
-	...
397  
-
398 367
 
399  
-You can make your templates more modular and easier to maintain by separating commonly-used pieces into include files.
  368
+and paste the code in a new include snippet:
400 369
 
  370
+**themes/simple/templates/Includes/ArticleTeaser.ss**
401 371
 
  372
+	:::ss
  373
+	<article>
  374
+		<h2><a href="$Link" title="Read more on &quot;{$Title}&quot;">$Title</a></h2>
  375
+		<p>$Content.FirstParagraph</p>
  376
+		<a href="$Link" title="Read more on &quot;{$Title}&quot;">Read more &gt;&gt;</a>
  377
+	</article>
  378
+		
402 379
 ### Changing the icons of pages in the CMS
403 380
 
404 381
 Let's now make a purely cosmetic change that nevertheless helps to make the information presented in the CMS clearer.
405 382
 Add the following field to the *ArticleHolder* and *ArticlePage* classes:
406 383
 
407 384
 	:::php
408  
-	static $icon = "themes/tutorial/images/treeicons/news";
  385
+	static $icon = "framework/docs/en/tutorials/_images/treeicons/news-file.gif";
409 386
 
410 387
 
411 388
 And this one to the *HomePage* class:
412 389
 
413 390
 	:::php
414  
-	static $icon = "themes/tutorial/images/treeicons/home";
  391
+	static $icon = "framework/docs/en/tutorials/_images/treeicons/home-file.gif";
415 392
 
416 393
 
417 394
 This will change the icons for the pages in the CMS.  
418 395
 
419  
-> Note: that the corresponding filename to the path given for $icon will end with **-file.gif**, 
420  
-> e.g. when you specify **news** above, the filename will be **news-file.gif**.
421  
-
422  
-![](_images/icons2.jpg)
  396
+![](_images/tutorial2_icons2.jpg)
423 397
 
424 398
 ## Showing the latest news on the homepage
425 399
 
@@ -432,28 +406,25 @@ control. We can get the data for the news articles by implementing our own funct
432 406
 	:::php
433 407
 	...
434 408
 	public function LatestNews($num=5) {
435  
-		$news = DataObject::get_one("ArticleHolder");
436  
-		return ($news) ? DataObject::get("ArticlePage", "ParentID = $news->ID", "Date DESC", "", $num) : false;
  409
+		$holder = DataObject::get_one("ArticleHolder");        
  410
+		return ($holder) ? DataList::create('ArticlePage')->where('"ParentID" = '.$holder->ID)->sort('Date DESC')->limit($num) : false;
437 411
 	}
438 412
 	...
439 413
 
440 414
 
441 415
 This function simply runs a database query that gets the latest news articles from the database. By default, this is
442  
-five, but you can change it by passing a number to the function. See the `[api:DataObject]` documentation for
  416
+five, but you can change it by passing a number to the function. See the [Data Model](../topics/datamodel) documentation for
443 417
 details. We can reference this function as a page control in our *HomePage* template:
444 418
 
445 419
 **themes/tutorial/templates/Layout/Homepage.ss**
446 420
 
447 421
 	:::ss
448 422
 	...
449  
-	$Content
450  
-	<ul id="NewsList">
451  
-		<% control LatestNews %>
452  
-			<li class="newsDateTitle"><a href="$Link" title="Read more on &quot;{$Title}&quot;">$Title</a></li>
453  
-			<li class="newsDateTitle">$Date.Nice</li>
454  
-			<li class="newsSummary">$Content.FirstParagraph<a href="$Link" title="Read more on &quot;{$Title}&quot;">Read more &gt;&gt;</a></li>
455  
-		<% end_control %>
456  
-	</ul>
  423
+	<div class="content">$Content</div>
  424
+	</article>
  425
+	<% loop LatestNews %>
  426
+		<% include ArticleTeaser %>
  427
+	<% end_loop %>
457 428
 	...
458 429
 
459 430
 
@@ -466,7 +437,7 @@ page is referenced in other pages, e.g. by page controls. A good rule of thumb i
466 437
 page currently being viewed in the controller; only if a function needs to be used in another page should you put it in
467 438
 the data object.
468 439
 
469  
-![](_images/homepage-news.jpg)
  440
+![](_images/tutorial2_homepage-news.jpg)
470 441
 
471 442
 
472 443
 
@@ -491,7 +462,7 @@ that name on the controller if it exists.
491 462
 Depending on your browser, you should see something like the picture below. If your browser doesn't support RSS, you
492 463
 will most likely see the XML output instead.
493 464
 
494  
-![](_images/rss-feed.jpg)
  465
+![](_images/tutorial2_rss-feed.jpg)
495 466
 
496 467
 Now all we need is to let the user know that our RSS feed exists. The `[api:RSSFeed]` in your controller, it will be
497 468
 called when the page is requested. Add this function to *ArticleHolder_Controller*:
@@ -505,9 +476,9 @@ called when the page is requested. Add this function to *ArticleHolder_Controlle
505 476
 
506 477
 This automatically generates a link-tag in the header of our template. The *init* function is then called on the parent
507 478
 class to ensure any initialization the parent would have done if we hadn't overridden the *init* function is still
508  
-called. In Firefox you can see the RSS feed link in the address bar:
  479
+called. Depending on your browser, you can see the RSS feed link in the address bar:
509 480
 
510  
-![](_images/rss.jpg)
  481
+![](_images/tutorial2_rss.jpg)
511 482
 
512 483
 ## Adding a staff section
513 484
 
@@ -553,7 +524,7 @@ insert an image in the *$Content* field).
553 524
 		public function getCMSFields() {
554 525
 			$fields = parent::getCMSFields();
555 526
 			
556  
-			$fields->addFieldToTab("Root.Content.Images", new UploadField('Photo'));
  527
+			$fields->addFieldToTab("Root.Images", new UploadField('Photo'));
557 528
 			
558 529
 			return $fields;
559 530
 		}
@@ -569,74 +540,71 @@ a simple database field like all the fields we have seen so far, but has its own
569 540
 array, we create a relationship between the *StaffPage* table and the *Image* table by storing the id of the respective
570 541
 *Image* in the *StaffPage* table.
571 542
 
572  
-We then add an `[api:UploadField]` in the *getCMSFields* function to the tab "Root.Content.Images". Since this tab doesn't exist,