Створення власної теми для трансформера дизайну

Створення власної теми для Трансформера дизайну ділиться на 2 етапи:

1. Створення зображень теми

2. Робота з CSS файлом і завантаження

Приклад файлу з темою: завантажити (665кб).

Етап 1. Створення зображення теми

1. Зображення теми складається з двох окремих елементів: шапка (background-top) і земельна ділянка (background-bottom).

2. Шапка - основна картинка теми, велика фонова картинка. Область від верхньої частини сайту і до нижнього краю слайдера.

Для створення картинки шапки потрібно:

- Вибрати зображення (висота не менше 700 px). Ви можете використовувати картинку будь-якої висоти, система автоматично "обріже" зайву довжину, параметри висоти задані у файлі. Якщо Ви хочете задати висоту самостійно, то приблизна висота шапки повинна бути від 550 до 700 px,

- Ширина зображення підбирається індивідуально для Вашого сайту, як правило 1920px.
Хочемо зауважити, що ширина сайту, починаючи з версії 5.0, змінилася (зараз ширина основного контенту 1180 px), тому, вибираючи зображення для теми, необхідно основні елементи в зображенні відображати так, щоб основний контент (1180px) не загороджувати елементи на зображенні.

- Збережіть зображення у форматі jpg. Назва картинки може бути будь-яким, наприклад, background-top.jpg.

3. Підвал - сама нижня частина сайту. Розташовується від нижнього краю сайту до перших картинок елементів сайту.

Для створення картинки підвалу потрібно:

- Взяти потрібне зображення і вирізати за розмірами від нижньої частини сайту до елементів кнопок-банерів платіжних карт.

- Висота блоку варіюється, зазвичай в межах 200px, ширина так само може бути різною, зазвичай це 1920px для широкоформатних моніторів.

- Збережіть зображення у форматі jpg. Назва картинки може бути будь-яким, наприклад, background-bottom.jpg.

4. Створіть папку з назвою Вашої теми, наприклад, "summer". У ній створіть ще 2 папки - styles і images. Збережіть в папці images створені Вами зображення: background-top.jpg, background-bottom.jpg.

Етап 2. Робота з CSS файлом і завантаження теми

Вставте вказаний код і замініть цифрові значення висоти зображення (px) (виділені червоним кольором) на свої.

Збережіть файл в папці "styles" з назвою styles.css.

Скопіюйте вказаний код і замініть на свої значення

background: transparent url ( '../ images / background-bottom.jpg') no-repeat scroll center bottom;