Preparing a Template
For this example we're going to use a free, high quality template from http://andreasviklund.com/templates/1024px/
Download the zip file with the HTML, CSS, and images.
Unpack the zip file. Move the images/background.gif into the parent folder with 1024px.css. Edit 1024px.css and do a search for 'images/' and remove it. Save the file. This makes it so that the background image is in the same folder as the CSS file (this is optional but makes it easy to keep track of things).
Now let's upload the CSS file and the image file. Inside of eCrowds, click "Quick Link" followed by "Files" under "Content." Click "Create new file" and upload 1024px.css and background.gif. You can also import and unpack a zip file with multiple files by clicking the "Import" link in the files screen.
Now let's edit the index.html and turn it into a template by doing the following steps:
- The first step is to replace 1024px.css with /1024px.css as all files and images need to have absolute paths.
- Replace the content in the title tag with:
[[title]] - [[site.name]]
Note: Replace [ with { and ] with } throughout this tutorial.
Items within two curly braces represent variables. This example code dynamically substitutes the title or name of the current object (e.g. page, blog post, forum, idea, etc) along with the name of your site. - Replace the contents of the h1 tag with:
<a href="/">[[site.name]]</a> - Replace the contents of the p tag with id of slogan with:
[[site.description]]
This dynamically outputs your site's description field. - Replace the contents of the first h2 tag inside the div with id of content with:
[[title]] - Replace everything else in the div with id of content with:
%%Content%%
Items with two percent signs represent regions whereby one or more dynamic assignments can be made. - Replace everything inside of the div with id of sidebar with:
%%Side Bar%% - Replace everything inside of the div with id of footer with:
%%Footer%%
<p>
<a href="[[sign_in_url]]">Sign in</a>
</p>
With the template ready, now it is time to copy it into eCrowds. Click "Quick Links" followed by "Templates" under "Presentation." Click "Create new template", for "Type" select "Custom", for the name, put in "Standard Layout", and for "Content" paste in the HTML from the template. Click "Reload Regions" to be able to make assignments to the different regions. For the region "Content", click "Add assignment" and choose "Requesting Object" and then "Content" to have the content for the current object shown. Click "Add assignment" a second time on the region and choose "Requesting Object" and then "Manage" to have links to edit and create content right on the site for authorized users. For "Side Bar", click "Add assignment" and choose "Menu" followed by an existing menu (e.g. "Context Navigation"). For "Footer", click "Add assignment" and choose "Block" followed by an existing block (e.g. "Footer"). Now, click "Create template" to save the new template.
That's it! Your template is now ready to be used in the system. To apply it to a site, click "Quick Links" followed by "Sites" and edit the site making the new template the default. Templates can also be used in Content Types to apply specific templates based on the type of content.
1 attachment
No comments
Sign in | Free trial sign up | Follow eCrowds on Twitter
