Редактирование шаблонов TurboSite

Обладая базовыми навыками CSS и Photoshop, в TurboSite можно изменять шаблоны под свою тематику учебника.

Шаблоны электронного учебника находятся в папке с программой, в каталоге themes (C:\Program Files (x86)\TurboSite\themes). Каждый шаблон находится в отдельной папке, которая содержит файлы: theme.ini, screenshot.jpg, license.txt. И каталог tocopy, с которым мы и будем работать.

Изменение изображений#

Самое простое, что можно изменить, это изображения шаблона. Внутри tocopy есть папка images, в которой находятся все картинки темы.

Их можно заменить на свои. Но имейте ввиду, что ваши новые изображения не должны отличаться размерами и наименованием от оригинальных.

Изображения шаблона
Рис 1. Изображения шаблона Culinary
Информация

Если при копировании, не удаётся заменить файл в папке с шаблоном, попробуйте его удалить и скопировать заново

Изменение CSS стилей#

Редактировать стили шаблона немного сложнее. Тут следует ориентироваться на текущее оформление учебника в браузере.

Рассмотрим вариант на примере Google Chrome. На странице вашего учебника нужно нажать клавишу F12. Должна появиться панель разработчика DevTools. На ней нас интересуют вкладки Elements и Styles.

Допустим мы хотим изменить стили заголовка учебника, тогда нам нужно щёлкнуть правой кнопкой мыши по заголовку и выбрать Просмотреть код. После этого в панели DevTools, на вкладке Elements должен выделиться тег <h1>, а на вкладке Styles появиться его стиль.

Изменение стилей шаблона
Рис 2. Изменение стилей шаблона

Заменим у заголовка цвет шрифта color и установим верхний регистр text-transform:

Изменение стилей шаблона
Рис 3. Изменение стилей шаблона

В браузере мы сразу можем видеть изменения, но они у нас ещё не сохранены. Поэтому откройте файл default.css (в папке tocopy). В нём нужно найти 83 строку со стилем #logo h1 и внести изменения. 

Подсказка

Для быстрого поиска стиля, на панели разработчика (справа от селектора стиля) показано, на какой строке находится стиль в css-файле (в нашем примере это 83 строка)

После редактирования шаблона сгенерируем учебник Генерировать сайт.

Изменение HTML структуры#

От изменения структуры HTML-шаблона в blank.html лучше отказаться и создать новый, отдельный шаблон.

Но если нужны незначительные изменения, то делайте это осторожно, не изменяя встроенные переменные шаблона.

Например, можно добавить вспомогательный класс в существующий блок, подключить вспомогательный скрипт или шрифт какой-либо библиотеки.

После всех изменений не забывайте Генерировать сайт.