Кастомизация шаблона Start Kit

Приветствую, уважаемое сообщество!

Давно слежу за развитием проекта, дождался выхода релиза и вот взялся его пощупать руками. Решил начать с пробы возможного перевода с 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. Вопрос третий (теоретический) — тут http://altocms.ru/586.html уже поднимался вопрос целесообразности или не целесообразности адаптивных шаблонов. Согласен, что и для меня ответ не однозначный в этом вопросе — видимо зависит от проекта, где адаптивность будет полезна. Но для этого сайта скорее всего она не нужна, отсюда и вопрос — возможно ли эту адаптивность отключать? например нажал кнопку в подвале и сайт отображается в полном размере... или Bootstrap не позволяет этого?

Возможное решение предложено тут

Похожие статьи

  • Как правильно модифицировать шаблон (скин) для себя
    По умолчанию в движке идет три скина: start-kit, expirience, exprience-simple. Все скины в той или иной степени можно модифицировать, не влезая особенно в код. Но иногда этого бывает мало. Если немного понимаешь в...
  • Концепция нового шаблона «TREND»: внеси свои предложения!
  • Шаблон Inspiration 1.0
    Здравствуйте! Наконец то я закончил и выложил свой шаблон для altocms. Шаблон адаптивный. Cкриншоты Вы можете скачать и просмотреть по ссылке СКРИНШОТЫ Шаблон в разделе Модули — Inspiration 1.0 Стоимость: 1000 руб....
  • Шаблон Inspiration
    Здравствуйте! Когда то давно мной был создан шаблон Inspiration на лайвстрит ( если кому интересно вот ссылка http://livestreet.ru/blog/16634.html ), пару месяцев назад я решил создать такой же шаблон и для altocms....

29 комментариев

+1
Дело в том, что дизайн сайта имеет графическое изображение для шапки — 999*410px и соответственно на большом экране, когда сайт растягивается это изображение смотрится нелепо, т.к. не вписывается в него по размерам.

В общем вопрос первый (основной на данный момент) — в каком файле и что нужно изменить, что бы шаблон Start Kit не растягивался шире, например, 1000px?
Я в примерно похожем положении и тоже видимо в ближайшее время займусь ковыряние м start-kit. Не очень понял вопрос по шапке — она же обрезана по краям? Я наоборот хочу ее растянуть на всю ширину, т.к. такое отображение мне совсем не нравится. А насчет отображения самого сайта — что значит на всю ширину? Очень бы помог скриншот.
Вот например у меня в мозилле на FullHD (масштаб 125%)


Chrome (масштаб 100%)


-это по дефолту. А как должно стать?
Отредактирован:
0
Добавил в топик скриншотов.
+1
Вроде нормально смотрится, так как должно стать в итоге?
Отредактирован:
0
Если это речь про самый последний скриншот — то вот я и не могу найти где это значение изменить в стилях. То что на скриншоте — сделано изменением в этой открытой снизу «панели разработчика»
+1
Я думаю это тянется из бутстрапа. Соответственно сам класс .container уже задает ширину согласно его правилам. Тут нужно просить помощи специалистов по бутстрапу, иначе костыльно будет.
0
Тут нужно просить помощи специалистов по бутстрапу, иначе костыльно будет.
Для этого и создан топик;)
0
Скриншоты как выглядит верстка в разлинчых системах есть. А где скринтшот как на самом деле должна выглядеть главная страница?
Отредактирован:
0
Скриншоты как выглядит верстка в разлинчых системах есть.
Систем показано всего две!
Первый скриншот — действующий сайт на WP.
Остальные скриншоты — это уже пробы Alto, только с различными шаблонами.

А где скринтшот как на самом деле должна выглядеть главная страница?
Считайте что это первый скриншот. Так выглядит сайт уже около 2х лет.

Повторюсь — основной элемент это графическое изображение для шапки — 999*410px, которое и стоит задача вписать в любой другой шаблон. Не адаптивный шаблон от LS удалось привести к нужному виду по ширене (скриншот №2), а вот адаптивный Start Kit не удается привести к нужной МАКСИМАЛЬНОЙ ширене :(
отсюда и поставлены конкретные вопросы в топике…
+1
Мои ответы — не догма, скорее, советы.

Идея наследования скинов существует давно, и обязательно будет реализована. Это когда можно указать, что скин myskin является наследником скина start-kit. И тогда в myskin мы добавляем только те файлы-шаблоны, которые требуется изменить, все остальные будут браться из start-kit.

Но сейчас такого нет. Поэтому, если нам требуется не просто css-классы менять, но и tpl-файлы, то лучше всего создать новый скин: в папке /common/templates/ создаем подпапку myskin, копируем туда содержимое /common/templates/start-kit/ и меняем файлы, какие нужно. И если меняется start-kit, то изменения самостоятельно вручную надо будет перенести и в myskin.

Если же речь об изменения только на уровне CSS, то можно все сделать проще:

1) Создается новая тема для скина, например, /common/templates/skin/start-kit/themes/test/, если новая тема будет называться test, и скопировать туда файлы из исходной темы.

2) В файле /common/templates/skin/start-kit/settings/config/config.php надо найти строку:
'___path.skin.dir___/themes/___view.theme___/style.css',
и добавить после нее такую строку:
'___path.skin.dir___/themes/___view.theme___/custom.css',

3) Создать файл /common/templates/skin/start-kit/themes/test/custom.css и в него уже внести все необходимые изменения, которые будут перекрывать старые заданные значения.

Например, можно задать:
.container {
    max-width: 1000px;
}
0
Спасибо, Вадим за ответ!
И если меняется start-kit, то изменения самостоятельно вручную надо будет перенести и в myskin.
очень надеялся что можно будет обойтись без создания новой темы с копированием в нее всех tpl… Что бы без проблем потом можно было обновлять шаблон…
+1
Есть вариант, когда не нужно копировать все подряд, но для этого хоть немного надо программировать.

А вариант такой: создаете для своего сайта плагин, основная (или вообще единственная) задача — это переопределение шаблонов. Т.е. у плагина может быть только корневой файл /common/plugins/test/PluginTest.class.php примерно такой:
<?php

class PluginTest extends Plugin {

    protected $aDelegates = array(
        'template' => array(
            // здесь список шаблонов
            'topics/topic.edit.tpl',
            'actions/blog/action.blog.add.tpl',
        ),
    );

    public function Activate() {
        return true;
    }

    public function Init() {
        return true;
    }
}

// EOF
Будет в одной из будущих версий возможность наследовать скин, как описал выше
0
А вариант такой: создаете для своего сайта плагин, основная (или вообще единственная) задача — это переопределение шаблонов.
Хм… наверно это более правильный вариант, нежели необходимость каждый раз после обновления шаблона вручную лопатить tpl-файлы…

Будет в одной из будущих версий возможность наследовать скин, как описал выше
Будем ждать) Спасибо за развитие!
+1
По третьему вопросу — если не устраивать холивар, нужен ли адаптивный дизайн, хорошо ли это или плохо, а отвечать на вопрос, то: переключение с одного дизайна (адаптивного или чисто мобильного) сделать можно, если есть в наличии эти два дизайна. Напр., создается две темы — одна адаптивная, а другая обычная, и какой-то кнопкой делается переключение между ними.
0
Все правильно, в холивар и мне не хотелось вступать — т.к. думаю тут нет ЕДИНСТВЕННОГО верного решения… Каждый проект индивидуален и соответственно каждый его владелец и определяет — быть адаптивности шаблона или нет и в каком виде, или может дать пользователю выбор выбирать как просматривать сайт — полноцеено или в адаптивном виде.

Напр., создается две темы — одна адаптивная, а другая обычная, и какой-то кнопкой делается переключение между ними.
Т.е. имеется ввиду, что создается еще одна кастомная тема используемого шаблона и уже между этими темами шаблона и происходит переключение. Т.е. не все так сложно)
+1
Есть такой плагин: altocms.ru/addons/item/16/

Там и скин можно менять, и тему (если у скина несколько тем). Можно по такому же принципу сделать переключение тем на сайте
0
А на последнюю версию 1.0.7 он не подойдет?
0
Должен пойти
0
Топик обновлен, добавлено решение для основного вопроса. Спасибо andreyv
Оказалось все достаточно просто))

aVadim

По второму вопросу — а если tpl-файлы которые необходимо менять перенести в папку app движка. То есть измененные файлы темы располагать нужно по соответствующему пути в этой папке.
К примеру:
исходные файлы экшенов в шаблоне: common/templates/skin/experience/tpls/actions
а измененые файлы здесь: app/templates/skin/experience/tpls/actions

Будет такое работать? Тогда же проблем при обновлении шаблона особых не будет? По крайней мере будет понятно с какими файлами велись работы, без необходимости лопатить все файлы шаблона…
0
Логика в этом есть, но в нынешней реализации так работать не будет. Но есть вариант, который позволяет решить эту проблему: можно создать плагин, в котором не будет никакого функционала, но будут переопределяться файлы шаблона. И тогда обновление без проблем будет проходить. И все измененные файлы в одном месте будут скучкованы
0
aVadim

И еще вопрос — я вот в процессе своих экспериментов пришел к выводу, что использование шаблона от LS ограничивает возможности движка:

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

— это ошибочный вывод или действительно шаблоны работающие в режиме совместимости будут иметь ограничения?

Из замеченного. Я например в Админке отключил Личные блоги. Но при создании топика, если использовался шаблон от LS — он все равно предлагал возможность публикации в Личный блог. Это ограничение или баг?
0
А вы именно от LS брали скины, или все-таки скины которые есть в каталоге здесь, но которые идут на ls+предыдущую версию альто. Может лучше конкретно тогда называть — скин такой-то -> такие-то проблемы?
Отредактирован:
0
Да, брался шаблон из каталога LS — ведь версия Alto 1.0.7 обещает работу с плагинами и шаблонами от LS в режиме совместимости с включенным соответствующим плагином, идущем с движком.

Конкретно использовался шаблон Bliss — очень удачно подошел под дизайн и легко был модифицирован под нужный вид.
Отредактирован:
0
Да, это так — скин, написанный для LS, не дает 100%-ной функциональности Alto. Например, в случае с персональными блогами — в LS-скинах персональный блог жестко прописан в самом шаблоне, и исправить это можно только правкой самого шаблона. Так что плагин совместимости обеспечивает полную работоспособность LS-скинов, но не дает им полной функциональности Alto
0
Хочу вернуться к данному топику, т.к. ряд вопросов так и остались без ответа…

aVadim
Не могли бы Вы ответить, на вопросы в этих комментариях:
altocms.ru/743.html#comment13577
altocms.ru/743.html#comment13580
0
В каком файле СSS настраивается background — картинка? Чет я застопорился :)
+1
style.css в папке выбранного стиля. Но можно и в любом другом, например default.css ;)
+1
Если в настройках админки выключите сжатие и объединение css(допустим, на время настройки стилей), то сможете через просмотр исходного кода в браузере посмотреть в каком файле хранятся данные стиле
0
Еще пара вопросов:
1. При создании топика окно добавки фотосета развернуто, как сделать его свернутым по-умолчанию (так же, как и опрос)?;
2. Хочу сделать добавление видео через инпут. Т.е. пользователь просто вставляет в поле ссылку, а в топике выводится ролик. Как это реализовать?
Отредактирован:
+2
1. Переопределить шаблон редактирования топика в отдельном плагине, например. И внести туда свои правки.
2. Навскидку, с помощью вот этого altocms.ru/1182.html
Отредактирован:
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.