Lets take some HTML template for bootstrap and in a few steps make it compatible with cms. And look at the creation of template for iblocks..
Step one - Preparation
First install a last version of SyDES on the server and create a test site. It has come in handy a couple of times to bypass routine. Then in the template directory create a folder with a unique name of theme, containing only letters and numbers. Select the file with some simple page from your html template, for example with the content on the entire width, upload in the theme folder and rename to page.html. Then you can upload another folders with styles, scripts, images and fonts.
Do not forget to change the filepath to the styles and scripts. Token {template} will help you by turning into a line template/yourtheme/. And remove the lines with jquery and bootstrap, they will automatic loaded later.
Then, go to the admin System - Settings - Sites - Edit (your site) and select the new template. Then just go to System - Templates and in the theme folder will be automatically created layouts and file manifest.ini, where you can tweak the template data.
Step two - add dynamics
Make the following changes or simply add a markup to the specified locations.
<html lang="en"> |
<html lang="{language}">
|
<title>Single page</title> <meta name="description" content=""> <meta name="keywords" content=""> <base href="http://demosite.com/"> |
{head}
|
<body> |
<body>
{toolbar}
|
A piece of code that represents the content |
{alerts}
{layout}
|
The current year in the copyright |
{year}
|
Now you are almost ready theme that you can edit to your liking. Check this by opening the home page.
Step third - the creation of layouts
Evaluate what layouts you may need. Normally, the division is by type of material. It may be the main page, news, category, product, project, or anything else. Create them in the Templates section, specifying a key, name and markup, which is often different by a number of columns. In the folder with the theme you have the necessary files will be created, which you can edit in your favorite ide. In the case of a multiple layouts have identical markup or with minor differences, they can be cloned.
Step fourth - iblocks
Some blocks of code, such as sliders, banners and widgets, you can cut from the template and paste in the newly created iblocks that appears by tokens {iblock:slider}. This greatly simplifies the further work with a template.
The main menu should be replaced by a token {iblock:menu?show=main&class=main-menu} where class can specify your own. The result will be displayed with a bulleted list of all pages that have the status "in menu". You can also create your own menu in a constructor, and output through the specified token.
For the product categories or a blog you can display pages by token {iblock:page}. At the same time, you can manually edit the template of this iblock to the style of your site. For this, add a new template to iblock in the Templates section. The necessary files will be created in your theme folder.
