Bitrix Framework

Display the design fully and correctly, graphics and style must be added.

Graphics

Potentially, images can be stored in any system folder. However, it is recommended to place them in a special folder of the template itself.

• Open the folder, where the template is located (/bitrix/templates/test).
• Create an /images folder in it.
  Note: Images can be placed in the root /images folder. But, if the proposed variant is used to place the images, it will have an advantage. When copying (or exporting) the template, the images won't be have to be re-imported again into the new template. The copy will be created together with the folder with images.

• Upload the graphics files from the design archive. Files are located in the Site\izo\ folder.

Now, change paths to images in the templates coding. Image paths are specified as izo/ in the initial design. Change them to bitrix/templates/test/images/.

• Save changes.
• Open site via the Preview button.

After that all images, except the images in Blogs and Gallery columns, as well as in the article's body will be displayed. With that the borders will not be outlined and the site will display text (listing of site sections), video and images, not envisaged in the design.

Images in Blogs and Gallery columns, as well as the image in the article's body are not displayed, because they are not uploaded to the site. (They weren't located in the izo folder.) This may be disregarded, because these parts of code will be deleted and replaced with other required components.

The redundant text, video and images will be handled later. (Please be advised that the text that appeared "by itself" can be very different from the provided picture - it depends on the template content that you have applied to a specific site.)

CCS Styles

• Open the site template for editing at the Template CCS tab.

  The Template styles file (template_styles.css) field is empty, i.e. no styles are specified. The styles, applied in the project are specified in the file Site\izo\code.css.

• Transfer the styles from the file to this field.
• Save the changes.

Result: