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

Это кросспост статьи автора шаблона http://voffka.the-hut.by/blog/developer-kit/11.html

Не знаю на сколько это справедливо для StartKit, в любом случае на alto есть и developer-kit. Далее текст автора

«Я все чаще убеждаюсь, что большая часть пользователей шаблона не до конца понимает все прелести его кастомизации…

Ребята, этот шаблон можно очень просто стилизировать не имея при этом обширных знаний css и html! Да, чтобы менять структуру шаблона, надо что-то знать, но изменить цвета шаблона, шрифты, формы и прочее проще некуда!

Я не просто так оставляю ссылку на кастомизированную страницу Бустрапа в теме шаблона (файл README.md). Перейдя по ней Вы попадете на страницу где сохранены текущие настройки для дефолтной темы шаблона, изменяя их Вы можете изменить Ваш шаблон как угодно и получить на выходе что-то свое, индивидуальное! Ниже опишу пошагово как это сделать.

Итак, копируем куда-нибудь папку с дефолтной темой шаблона и переименовываем ее по своему усотрению. Заливаем обратно в шаблон. Далее работаем только с ней. Открываем файл README.md и переходим по указанной ссылке. Листаем ее чуть вниз, до раздела Less variables (если разбираетесь в верхней части, можно повыключать ненужное).

Раздел Less variables. Здесь можно настроить ну ооочень многое… Я бы даже сказал, что практически все начиная от цветов и заканчивая дополнительными компонентами. Единственное, что надо сделать — уделить немного времени чтобы разобраться в этом всем разнообразии и поэкспериментировать.

Давайте остановимся на нескольких подразделах для примера. Дальше, думаю, сами поймете.

Возмем первый подраздел — Colors. Из названия понятно, что в нем настраиваются цвета. В них нас больше всего интересует пять полей: @brand-primary, @brand-success, @brand-info, @brand-warning и @brand-danger. Они задают основные цвета нашего шаблона. Понять их предназначение можно и из перевода. В шаблоне именно в таком ключе я старался их и применять. @brand-primary задает «главный» цвет, от его будут зависеть многие элементы, так, например, такого же цвета будут активные вкладки навигации. Если необходимо, его можно переопределять для отдельных элементов в их настройках.

Рассмотрим на примере, чтобы было понятно. Для последней версии шаблона «Developer-Kit» в качестве @brand-success был выбран цвет #16b76f — соответственно все кнопки, имеющие такой класс, стали зеленого цвета. Для @brand-primary был задан синий цвет и те же активные пункты навигации (интересные, новые, обсуждаемые...) должны были быть синего света, но для них я задал другой цвет — красный в настройках подраздела Pills.

Далее давайте рассмотрим раздел Typography. Он отвечает за наши шрифты — какие использовать, какого размера, настройки заголовков. Опять же все просто, необходимый минимум — поля @font-family-sans-serif, @font-size-base, @headings-font-family и @headings-font-weight. Здесь я изменил только @headings-font-family и @headings-font-weight для того, чтобы заголовки выводились шрифтом «Open Sans» жирным начертанием. Меняем по своему усмотрению.

Внимание! Если Вы используете не системные шрифты, а, например, Гугловские, то их необходимо отдельно подключать в шаблоне. Если необходимо описать как это делается, спрашивайте, опишу.

Ну и на последок возьмем еще подраздел настроек Navbar. Navbar — это та самая верхняя полоса в шаблоне с названием сайта и навигацией. У него может быть два класса — navbar-default и navbar-inverse (посмотрите примеры на странице компонентов Бутстрапа). В шаблоне используется navbar-inverse, поэтому можно настраивать только ту часть, которая касается только его. Почитайте название полей, по-моему все предельно понятно. Можно настраивать на свой вкус: высота, цвет, цвет ссылок, их состояний, цвет названия сайта… Поэкспериментируйте с настройками, думаю для себя что-то подберете! :)

Все остальные разделы настраиваются аналогично. Внимательно читаем название поля, если надо изменить на свое значение — меняем, переходим к следующему. Что может быть проще?

После того, как внесли все необходимые изменения, жмем кнопку «Compile and Download» в самом низу страницы и забираем готовые файлы с нужными изменениями. Осталось закинуть их в нашу тему взамен старых и шаблон приобретает новый вид!

Это, конечно, минимум того, что можно сделать, но уже что-то, уже можно сделать свой сайт не похожим на другие. А дальше… дальше можно вооружившись такими нехитрыми инструментами как Firefox, Firebug и Notepad++ взять и немного подправить файл стилей шаблона, подкорректировать html…

Если получилось сумбурно — извиняйте. Если непонятно — спрашивайте. :)»

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

  • Как правильно модифицировать шаблон (скин) для себя
    По умолчанию в движке идет три скина: start-kit, expirience, exprience-simple. Все скины в той или иной степени можно модифицировать, не влезая особенно в код. Но иногда этого бывает мало. Если немного понимаешь в...
  • Developer-kit - адаптация
    Developer-kit 1.0.1 — адаптация c AltoCMS 1.0 (пока RC). Я наверное плохо искал, но информации о том, что кто-то сделал эту работу, я в сообществе не нашел. Ждать выхода дефолтного шаблона «из коробки» (про developer ...
  • Установка Alto cms
    Добрый день Решил протестировать Alto cms, все вроде делал по инструкции https://altocms.ru/908.html и кмс вроде даже исправно ставится, но почему-то базовый шаблон отображается на сайте некорректно(прилагаю скриншот)...
  • Новый журнальный шаблон «TREND»
    Привет, уважаемое сообщество AltoCMS! Хочу Вас порадовать появлением на этой CMSки еще одного шаблона с названием TREND. Шаблон отлично (на мой взгляд) зарекомендовал себя на LiveStreet CMS, я очень хотел его...

1 комментарий

+1
Не знаю на сколько это справедливо для StartKit...
Справедливо полностью. Речь ведь тут идет, главным образом, о стилях оформления, это не касается верстки как таковой. Поэтому все это должно работать
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.