Шаблон "North"

Решил обновить вид своего бложика. В итоге получился простенький шаблон, которым готов поделиться.

Шаблон, в отличие от предыдущих, максимально простой, в нем нет разнообразия лент топиков, кучи настроек и не требуются какие-либо дополнительные плагины. Одна простая лента топиков списком, простая цветовая схема, пара дополнительных мини-тем задающих фон сайту, адаптивность и, пожалуй, все.

Ах, да, есть небольшие изменения в структуре — убрано меню второго уровня, описание блога вынесено в блок правого сайдбара и немного изменилось расположение файлов шаблона. Первые два пункта стоит учитывать при адаптации плагинов к шаблону.

Посмотреть вживую можно у меня в блоге. В каталоге будет доступен после модерациии.

Ну и пара моментов на обсуждение для тех, кому интересен шаблон:
— Из-за того, что убрано меню, убрал и поле поиска.
— Для небольших экранов сайдбар скрывается полностью.
Необходимы ли Вам эти вещи? Куда лучше разместить поиск? И как поступить с сайдбаром?
Меня вполне устраивает то, что есть сейчас, но если нужно, доработаю.

33 комментария

avatar
Из-за того, что убрано меню, убрал и поле поиска
Думаю, поле поиска можно переместить в топ-меню. А на маленьких экранах разместить иконку поиска (рядом с navbar-toggle) и по клику коллапсить отдельный блок с поиском.
Для небольших экранов сайдбар скрывается полностью.
У вас ведь в каком-то из шаблоном реализовано offcanvas-решение…

Единственное что напрягает в стандартном колоночном размещении — это то что сайдбар «уезжает» вниз, а там от него пользы никакой (ну или почти никакой).
Для решения этого была у меня задумка добавить еще одну зону для вывода блоков сайдбара — перед контентом.
Т.е. html-но такая последовательность: сайдбар верх — контент — сайдбар низ.
CSS-ом сайдбар выглядит как единое целое, а на маленьких экранах можно уже регулировать что будет выше контента, а что ниже.
avatar
Думаю, поле поиска можно переместить в топ-меню. А на маленьких экранах разместить иконку поиска (рядом с navbar-toggle) и по клику коллапсить отдельный блок с поиском.

У вас ведь в каком-то из шаблоном реализовано offcanvas-решение…

Конечно, можно и так. Но, видимо, Вы меня недопоняли, поднакидывать вариантов не нужно, меня вполне устраивает и такой вариант: поиск мне лично не нужен, необходимость в сайдбаре на мобильном тоже под сомнением. А вот если кому-то понадобиться шаблон, но будет смущать отсутствие данных вещей — готов выслушать предложения и прикрутить.

Единственное что напрягает в стандартном колоночном размещении — это то что сайдбар «уезжает» вниз, а там от него пользы никакой (ну или почти никакой).

Согласен, поэтому в последнее время и начал уходить от такого варианта. Сейчас активно тестирую «безсайдбарный» вариант и как-то ниразу не напрягло его отсутствие. Для чтения и ответов всего хватает, ну а задействовать функционал на все 100, имхо, все же лучше с десктопа.
avatar
без меню лучше, эта строчка мне всегда казалась лишней, но без поиска никак. Можно его в сайдбар поставить
avatar
Ок, подумаю над размещением.
avatar
Хороший шаблон получился.

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

На счет него кстати, если надо чтобы был сверху (не меняя верстку), как-то на одном из проектов применял перенос сайдбара JS-ом, т.е. снимаем размер окна, и если оно меньше 480 переносим в нужное место. Как-то так (без ресайза):

var width = $(window).width();
if (width < 480) {
   $('#sidebar').appendTo( $('#sidebar-mob') );
}
avatar
Спасибо.

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

+ еще на коммент ответить если вдруг срочно нужно.
avatar
Хороший, простой шаблон! Нравится!
avatar
Спасибо!
avatar
Поиск логично было бы вставить между блоками «Прямой эфир» и «Тэги», а блок «Блоги» вообще не нужен. Зачем? Есть же меню «Блоги».
avatar
Работаю над обновлением. Поиск добавил последним блоком в сайдбар, регулировать положение можно путем изменения приоритета. Ну и настраивать можно как любой другой блок.
avatar
Это замечательно!
avatar
Поиск по умолчанию не работает ведь на LiveStreet :) А 70% пользователей LiveStreet CMS не умеют ставить Sphinx. А если он смог поставить Sphinx, то прикрутить пару строк кода формы поиска он не сможет?

Согласитесь?
avatar
Есть плагин для поиска без Sphinx
avatar
Этим, в то числе, и руководствовался.
avatar
На странице блога хотелось бы увидеть разделение на Интересные/Новые/Обсуждаемые/TO
avatar
Увидел :)
avatar
Эта менюшка пропадала на мобильном отображении, в обновлении будет поправлено.
avatar
Хах, точно. А я как раз ее и проверял :)
avatar
Отправил в каталог обновленную версию шаблона.

Изменения:
— Доработка страницы блога.
— Добавление поиска.
— Добавление меню в профиль для небольших дисплеев.
— Доработка главного меню для небольших дисплеев.
— Проработка адаптивности.
— Правка прочих мелочей.

Скриншоты изменений.
Посмотреть вживую можно там же.
avatar
вопрос — внесете ли вы эти же изменения в developer-kit?
К примеру, я сделал чтобы на мобильных сайдбар отсутствовал вообще, и ваше решение с меню в профиле мне очень нравится.

+ вроде бы в developer-kit на мобильных не отображается если пришло сообщение.
+ новая карточка блога (которая показывается сбоку) просто шикарна.

Если добавлять в developer-kit этого не планируете, то вопрос — если я куплю этот шаблон, поможете ли вы мне разобраться какие части кода скопировать чтобы добавить красоты на мой сайт?
avatar
Для «developer-kit» таких изменений не планирую, во всяком случае, пока.

+ вроде бы в developer-kit на мобильных не отображается если пришло сообщение.

При развороте меню отображается иконка с количеством сообщений. Здесь сделал текст + цифра для мобильников, чтоб удобнее было пальцем попадать. С пунктом «Создать» аналогично.

Если добавлять в developer-kit этого не планируете, то вопрос — если я куплю этот шаблон, поможете ли вы мне разобраться какие части кода скопировать чтобы добавить красоты на мой сайт?

Да, конечно.

… и ваше решение с меню в профиле мне очень нравится.

По менюшкам еще хотелось бы сделать, чтоб они все же оставались на мобильнике в одну строку и их пальцем перетягивать можно было бы, но решения пока не нашел + сам профиль хочется переработать получше под мобильники.
avatar
В стиле
.block.block-type-search .form-control
уменьшить height на 1px. А то криво стоит.
avatar
Уменьшить? Видимо, дело в разных мониторах: у меня на двух все норм, я увеличивал на 0,5пикс, при стандартной высоте в 32 пикс. у меня перекос идет. При использовании шрифта в 13 пикс. вылезает такая бага в Бутстрапе.
avatar
avatar
Ну конечно качество Livestreet съел. Там «Поиск» выходит на 1 пкс от «Найти», экран 1366x768
avatar
Можно убрать 0.5 пкс и тогда тоже норм всё
avatar
Вооот, а у меня наоборот при добавлении высоты все в норму приходит, а при высоте в 32 едет. Попробую, для данной формы прописать 14-й шрифт да размеры как для него указать. Выше писал:

При использовании шрифта в 13 пикс. вылезает такая бага в Бутстрапе.
avatar
У меня все ОК и без опционального height.
Наверное, все от браузера зависит…
Можно еще попробовать form-control input-sm и btn btn-sm
avatar
Google Chrome
avatar
Наверное, все от браузера зависит…

Посмотрел разными, в Хроме отличие.
В общем, ок, допилю форму.
avatar
на macos, когда 31px высота (хром) самое оно! )
avatar
на гитхабе пишут, что это баг хрома, связанный с zoom-ом
avatar
Шаблон нормальный. Оценила.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.