Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Howto Create a
Page Elements Template
Prequesites

   A working setup of         General
    Silverstripe CMS            understanding of
   A copy of the pa...
First Steps
   Open the “blackcandy/” folder in “themes/”
   Look in Page.ss:
    “$Layout” is where the template will b...
Creating the template file

   Create a new file called “GridPage_test.ss” in
    “themes/demo/Layout/”
   This file wil...
Building the Layout

   Put “$Slot()” as placeholders in the dynamic
    areas.
   Think about a useful name for these a...
Example file

<div class=”Content”>
  <div class=”Top”>
           $Slot(Top)
  </div>
  <div class=”Columns”>
           ...
Some Notes

   Slotnames should be short and useful.
   They must be unique across the file (not the
    theme though)
...
Using it

   Run http://yoursite/dev/build/?flush=1
   Login to the Admin interface in Silverstripe
   Select the page ...
The end

   Start adding elements in the Slots and putting
    your site together.
   Enjoy!
   Questions, Comments, Id...
Upcoming SlideShare
Loading in …5
×

Building a Silverstripe Page Elements template for Web designers

5,060 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
  • Be the first to comment

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/

×