Я уже писал о новом шаблоне стартового сайта, который во времена бета-версий 4.0 назывался "Twitter Bootstrap Razor-based".
С выходом версии 4.0 этот шаблон эволюционировал в шаблон под названием "Open Cph", который кроме варианта, основанного на Razor, также имеет вариант на основе "главных страниц" (Master Pages).
Кроме того есть упрощенная версия этих двух шаблонов сайта "Tiny Cph" - тоже на основе Razor и Master Pages. Она содержит те же пакеты, функции, шаблоны страниц, типы страниц, но не включает в себя контент (страницы и медиа) из "Open Cph".
В любом из случаев, все они основаны на "Twitter Bootstrap", причем совсем недавно обновили версию используемого Twitter Bootstrap'а до версии 2.3.2. И, вполне вероятно, что скоро будут обновление до версии 3.0.0.
Так как "Twitter Bootstrap" использует LESS для стилей и позволяет создавать темы простым редактированием файла variables.less, то то же самое относиться и к стартовому сайту "Open Cph", который на этом бутстрапе основан.
И самый простой способ смены темы стартового сайта - это воспользоваться уже готовыми темами под Twitter Bootstrap 2.3.2.
Для этого можно использовать темы, например, Bootswatch версии 2.
Когда вы обновите страницу своего сайта в браузере, вы увидите, что тема сменилась.
С выходом версии 4.0 этот шаблон эволюционировал в шаблон под названием "Open Cph", который кроме варианта, основанного на Razor, также имеет вариант на основе "главных страниц" (Master Pages).
Кроме того есть упрощенная версия этих двух шаблонов сайта "Tiny Cph" - тоже на основе Razor и Master Pages. Она содержит те же пакеты, функции, шаблоны страниц, типы страниц, но не включает в себя контент (страницы и медиа) из "Open Cph".
В любом из случаев, все они основаны на "Twitter Bootstrap", причем совсем недавно обновили версию используемого Twitter Bootstrap'а до версии 2.3.2. И, вполне вероятно, что скоро будут обновление до версии 3.0.0.
Так как "Twitter Bootstrap" использует LESS для стилей и позволяет создавать темы простым редактированием файла variables.less, то то же самое относиться и к стартовому сайту "Open Cph", который на этом бутстрапе основан.
И самый простой способ смены темы стартового сайта - это воспользоваться уже готовыми темами под Twitter Bootstrap 2.3.2.
Для этого можно использовать темы, например, Bootswatch версии 2.
Смена темы стартового сайта Open Cph с помощью Bootswatch
- Откройте веб-адрес темы (можно открыть из меню Preview), например, United. (Используйте версию 2 Бутсвотча.)
- В верхнем меню кликните Download и скачайте файлы variables.less и bootswatch.less.
- Скопируйте эти два файла в папку ~/Frontend/Styles/bootstrap/2.3.2/ перезаписав существующие файлы. Перед копированием сделайте резервную копию файла variables.less в этой папке, если нужно.
- Откройте ~/Frontend/Styles/style.less и добавьте строку @import "bootstrap/2.3.2/bootswatch.less"; сразу после @import "bootstrap/2.3.2/bootstrap.less"; вот так:
@import "bootstrap/2.3.2/bootstrap.less";
@import "bootstrap/2.3.2/bootswatch.less";
@import "bootstrap/2.3.2/bootswatch.less";
Когда вы обновите страницу своего сайта в браузере, вы увидите, что тема сменилась.
Кстати, если после изменения темы вы столкнулись с тем, что на сайте вообще пропали стили, это скорее всего означает, что где-то в скачанном файле variables.less есть ошибка. Обычно ошибка заключается в том, что переменная используется до того, как объявлена. Просто найдите и исправьте ошибку и тема заработает.
Другие варианты изменения темы стартового сайта
Я уже писал про генератор тем BootTheme. Им все так же можно пользоваться, так, как описано в том сообщении. В этом случае вам нужен только файл variables.less и шаг 4, как описано выше для Bootswatch, делать не нужно. А если вы его сделали, то строчку @import "bootstrap/2.3.2/bootswatch.less" нужно будет убрать.
Ну, и самый интересный способ изменения темы - это конечно самостоятельное экспериментирование со значениями переменных в файле variables.less. Но об этом я писать не буду.
Комментариев нет:
Отправить комментарий