Building a Silverstripe Page Elements template for Web designers

4,928 views
4,818 views

Published on

A quick start guide how to build templates to use with Page Elements for Silverstripe CMS.
Download at http://www.page-elements.com/

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,928
On SlideShare
0
From Embeds
0
Number of Embeds
1,577
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building a Silverstripe Page Elements template for Web designers

  1. 1. Howto Create a Page Elements Template
  2. 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. 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. 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. 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. 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. 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. 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. 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/

×