Building a Silverstripe Page Elements template for Web designers
- 1. Howto Create a Page Elements Template
- 2. Prequesites A working setup of General Silverstripe CMS understanding of A copy of the page- HTML elements module CSS extracted in the root Web Design
- 3. First Steps Open the “blackcandy/” folder in “themes/” Look in Page.ss: “$Layout” is where the template will be inserted. Doesn't work for you? Create a copy “Gridpage.ss” and modify it. Have a look at the documentation Silverstripe provides about the powerfull template engine: http://doc.silverstripe.org/doku.php?id=templates
- 4. Creating the template file Create a new file called “GridPage_test.ss” in “themes/demo/Layout/” This file will be inserted in Page.ss in $Layout Create the html layout in your favorite Editor.
- 5. Building the Layout Put “$Slot()” as placeholders in the dynamic areas. Think about a useful name for these areas: “MainContent”, “LeftSidebar”, “Tagline” etc Put these names inside the bracket: “$Slot(Name)” Eg. $Slot(MainContent)
- 6. Example file <div class=”Content”> <div class=”Top”> $Slot(Top) </div> <div class=”Columns”> <div class=”ColumnRight”> $Slot(Right) </div> <div class=”ColumnLeft”> $Slot(Left) </div> </div>
- 7. Some Notes Slotnames should be short and useful. They must be unique across the file (not the theme though) It makes sense using the same name for simmilar areas on different templates.
- 8. Using it Run http://yoursite/dev/build/?flush=1 Login to the Admin interface in Silverstripe Select the page you wish to edit In the behavior tab ensure that the pagetype is set to “GridPage” Select your template in the Dropdown menu. Save! You should see the layout editor in the Content Tab
- 9. The end Start adding elements in the Slots and putting your site together. Enjoy! Questions, Comments, Ideas? Please check http://www.page-elements.com/