Давно слежу за развитием проекта, дождался выхода релиза и вот взялся его пощупать руками. Решил начать с пробы возможного перевода с WP на Alto небольшого сайта-визитки, принадлежащего знакомому, но не все пошло как хотелось бы — столкнулся с трудностями . Материалов на сайте не много, поэтому вручную создал несколько страниц и пару блогов — конвертация не потребовалась. И так структура материалов получилась более менее подходящая — время подошло до изменения шаблона и приведения его к нужному виду.
Я не специалист в разработке сайтов и верстке шаблонов, а обычный самоучка, которому как-то однажды понадобился свой сайт. Было интересно окунуться в сайто-строение и в общих чертах освоить HTML и CSS.. — как мне кажется как раз на таких как я отчасти и рассчитана эта CMS:)
В общем занялся приведением внешнего вида сайта, ковыряние с дефолтными шаблонами Alto показалось сложным, и я решил подобрать подходящий шаблон в каталоге LS. Нужный шаблон был быстро найден и за пару дней ковыряния между делом удалось приемлемо (для ознакомительных целей) натянуть дизайн на шаблон. Но дальнейшие эксперименты с движком привели к выводу, что выбор шаблона от LS был ошибкой, т.к. он в некоторых моментах ограничивает возможности самого движка..
В общем пришлось браться за кастомизацию дефолтных шаблонов, что бы со временем вкусить по полной все прелести Alto. Начать решил с шаблона Start Kit, т.к. он имеет несколько тем, а эмпирическим путем (метод тыка) было определено, что создать свою дополнительную тему не так и сложно.
Для этого:
— в папке шаблона html/common/templates/skin/start-kit/themes создал еще одну папку с нужным мне названием — пусть будет test.
— в эту папку скопировал содержимое другой подходящей темы из набора Start Kit — в моем случае это тема light
— далее в этой папке изменил название файла colors-light.less из скопированного набора на свое colors-test.less
— далее в этой папке в файле style.less поменял первую строку:
было
@import "colors-light.less";
стало
@import "colors-test.less";
— ну и в корне шаблона в файле skin.xml прописал новую тему, без этого она не появлялась в админке
<themes>
<theme code="light" name="Light"/>
<theme code="green" name="Green"/>
<theme code="red" name="Red"/>
<theme code="test" name="Test"/>
</themes>
— потом поигравшись значениями CSS в файле темы, изменил внешний вид в нужную сторону.
Пишу так подробно — может кому пригодится. Или наоборот укажите на мои ошибки и направите в нужном направлении.
В общем после этого я уперся в тупик, связанный с адаптивностью шаблона, и произошел вынос мозга..
Дело в том, что дизайн сайта имеет графическое изображение для шапки — 999*410px и соответственно на большом экране, когда сайт растягивается это изображение смотрится нелепо, т.к. не вписывается в него по размерам.
ВОПРОСЫ
1. В общем вопрос первый (основной на данный момент) — в каком файле и что нужно изменить, что бы шаблон Start Kit не растягивался шире, например, 1000px?
Решение:
Вставляем в файл style.css своей созданной темы в шаблоне start-kit следующий код:
@media (min-width: 1200px) {
.container {
width: 1030px; /* 1000px - container + 30px */
}
}
Не забываем сбросить кэш..
2. Вопрос второй (дополнительный) если предполагается изменить несколько tpl-файлов шаблона что бы из них вырезать лишнее, то как правильнее их менять?
— в файлах самого шаблона?
— или можно перенести в папку новой (своей) темы?
— другой вариант. Какой?
3. Вопрос третий (теоретический) — тут https://altocms.ru/586.html уже поднимался вопрос целесообразности или не целесообразности адаптивных шаблонов. Согласен, что и для меня ответ не однозначный в этом вопросе — видимо зависит от проекта, где адаптивность будет полезна. Но для этого сайта скорее всего она не нужна, отсюда и вопрос — возможно ли эту адаптивность отключать? например нажал кнопку в подвале и сайт отображается в полном размере... или Bootstrap не позволяет этого?
Возможное решение предложено тут
Вот например у меня в мозилле на FullHD (масштаб 125%)
Chrome (масштаб 100%)
-это по дефолту. А как должно стать?