Components 2.0

If you need to customize a system component template, copy it entirely to a site template folder and then edit the copy.

Editing A Simple Component Template

To edit a component template, copy the system component template to a site template folder. The system provides the convenient user interface to copy a component template to a required site template, edit the template and apply it.

To copy the template, switch to site design mode by clicking the Design tab. Click the component control button and select the command: Copy component template. This will open the template copying form:

Specify here the name for a new component (otherwise, the system will offer a default name). You also have to select the site template to which the template will be copied.

If the option Apply new component template is active, the new template will be applied to the component, and the component management menu will contain the following commands:

- edits the template;
- edits the template CSS file.

If you uncheck this option, you can apply the new template when editing the component parameters.

If the option Edit template is checked, the component template will be opened for editing. Otherwise, you can edit it later in Site Explorer or by clicking Edit component template:

Editing the Composite Component Template

The composite components support themes. The concept of theme includes:

• All templates of single page components as a part of a composite component.
  
  For example, the following single page component templates comprise the News (bitrix:news) composite component theme:
  • Filter by elements (bitrix:catalog.filter);
  • Topic (comments) (bitrix:forum.topic.reviews);
  • Vote (bitrix:iblock.vote);
  • News details (bitrix:news.detail);
  • All news (bitrix:news.index);
  • News list (bitrix:news.list);
  • News RSS (export) (bitrix:rss.out);
  • Search form (bitrix:search.form);
  • Search page (bitrix:search.page);
• Page templates used by a composite component. A theme includes files that define the layout of subcomponents on a page.
  
  For example, the news page shows the following items: a filter, a search form, an RSS feed link, the news headlines. The component layout definition file is news.php.
• CSS files style.css and other theme elements. For more detailed information on the theme structure, see the Composite component theme structure lesson.

To edit the composite component theme, switch to the Design mode. The page will show the component control buttons. The topmost button controls the component core. Other buttons serve to control the simple subcomponents that comprise the composite component.

Click the component core control button and select Copy component template in the menu. This command copies the component theme to a site template of your choice. You will have to provide the copy parameters in a dialog window:

Click Save. The whole theme will be copied to the specified site template.

As you can see, the folder template1 contains the duplicated theme. Now you can edit the template by selecting the command Edit component template in the component control menu, or copy the theme again by selecting Copy component template.

If a composite component uses a custom template, the subcomponent control menus are slightly different:

• Edit component template – edits the template of a current subcomponent;
• Edit template CSS-file – opens the CSS definitions for editing.