Шаблон «VK Flat Style»
17 фото
Адаптивный шаблон для LiveStreet CMS, с уклоном на Vk.com или Facebook.com. Теперь ваш сайт можно сделать более социальным. В целом применен подход так называемых dashboard, или админок, но под особым соусом.
Описать все не получится, сделано много, очень много. Ни один из проектов так долго и кропотливо не делал, самому нравится. Переработано почти все, наверняка многим придется по душе.
Видео смотреть в HD.
CSS фреймворк
Построен на CSS фреймворке, который был специально сделан для шаблона.
Верстка
Сделан по принципу «модульности», т.е почти все блоки независимы друг от друга, бери код и втыкай в любое место.
Плагин
Сделан плагин, который расширяет следующий функционал:
— Переносит список сообщений на любую страницу, внутри экшена /talk.
— Дает возможность добавлять в друзья с любой страницы шаблона (вывод в шаблон будет в обновлении)
— Выводит блок с топ пользователями. На данный момент подключен в списке топиков, однако можно подключить куда угодно.
— Добавлена стена на главной в профиль
— Добавлен вывод топиков из личного блога в профиль
— Вывод комментариев прям в списке топиков
— Рекламный блок слайдер, который поддерживает видео рекламу. Можно туда засунуть вывод чего угодно.
Сетка
Сделана полная резина с переходом в адаптив.
Варианты сетки
— Резина + адаптив
— Фиксированная + адаптив
Колонки
Используется три колонки:
— Сайдбар слева (меню)
— Контент
— Сайдбар справа (блоки), который между прочем можно открыть и закрыть. Имеется встроенный кастомный скроллбар.
— Есть режим переключения положения сайдбаров. Например можно прижать правый сайдбар к левому.
Топики
— Главная лента построена с использованием плагина mansory.
— Автоподгон mansory под динамическое изменение на странице. Например разворот комментариев и закрытие сайдбара.
— Настройка сетки для вывода топиков
— Фотосет слайдером
— Первый топик: 1) Если это фотосет, он растягивается в большой слайдер. 2) Если это обычный топик, то он больше чем все остальные
— В ленту топиков так же выводится блок с топом блогов и пользователей, что должно увеличить количество подключенных пользователей и добавление в друзья.
Сообщения
Сообщения сильно переработаны, предлагаю взглянуть воочию, это интересно.
Профиль
— Фото пользователя, теперь есть шапка, да-да, как в этих самых соц сетях.
— Вся информация о пользователе в сайдбаре
— В настройках профиля, можно выбрать цвет-оформление шаблона, сейчас сделано три темы на выбор. Однако эта функция может работать для любого посетителя вашего сайта, нужно лишь вынести блок из профиля для всех. Но делать этого не рекомендую, есть всякие понятия фирменного стиля, и т.д.
— «Блоги» переименованы в «Группы», мне показалось так понятней.
— Шапка блога, как в профиле пользователя. В роли картинки, выступает аватар.
— Возможность писать в группу, прямо со страницы группы.
— Собственно надобность в модальном окне отпала. На странице авторизации можно и зарегистрироваться, и зайти на сайт.
— Сделано описание сайта «Приветствие»
— Добавлен слайдер, куда можно запихать презентацию проекта.
— 404 и прочии, тоже переделаны под стиль авторизации.
Дизайн был взят VK Flat, и на его основе уже делалось все UI. От некоторых фишек с макета пришлось отказаться, например фотоальбомы, видео. Но это можно расширить плагинами.
Формы
Хочу отметить формы в шаблоне. На них было убито много времени. Теперь у всех форм, есть иконка, хочешь справа, хочешь слева, хочешь кнопкой, аль ссылкой, без иконок совсем. Меняются иконки прямо в html, сменой класса.
Иконки
Используется иконочный шрифт. За исключением некоторых иконок, которых просто в этом шрифте не было.
Добавление топика
В сайдбаре теперь три вкладки, которые сами листаются. Это:
— Группа
— Совет
— Помощь, там теги которые можно вставить в топик
— Все плагины, что используют страницы шаблонов, придется адаптировать.
Разработчик | makenskiy.com
Демо сайт | VK Flat Style
123123 | 123123123123
test | testtest
123 | 123123
Часть конфига
Описать все не получится, сделано много, очень много. Ни один из проектов так долго и кропотливо не делал, самому нравится. Переработано почти все, наверняка многим придется по душе.
Видео смотреть в HD.
Уникальные фишки (Технические подробности)
CSS фреймворк
Построен на CSS фреймворке, который был специально сделан для шаблона.
Верстка
Сделан по принципу «модульности», т.е почти все блоки независимы друг от друга, бери код и втыкай в любое место.
Плагин
Сделан плагин, который расширяет следующий функционал:
— Переносит список сообщений на любую страницу, внутри экшена /talk.
— Дает возможность добавлять в друзья с любой страницы шаблона (вывод в шаблон будет в обновлении)
— Выводит блок с топ пользователями. На данный момент подключен в списке топиков, однако можно подключить куда угодно.
— Добавлена стена на главной в профиль
— Добавлен вывод топиков из личного блога в профиль
— Вывод комментариев прям в списке топиков
— Рекламный блок слайдер, который поддерживает видео рекламу. Можно туда засунуть вывод чего угодно.
Уникальные фишки (Дизайнерские подробности)
Сетка
Сделана полная резина с переходом в адаптив.
Варианты сетки
— Резина + адаптив
— Фиксированная + адаптив
Колонки
Используется три колонки:
— Сайдбар слева (меню)
— Контент
— Сайдбар справа (блоки), который между прочем можно открыть и закрыть. Имеется встроенный кастомный скроллбар.
— Есть режим переключения положения сайдбаров. Например можно прижать правый сайдбар к левому.
Топики
— Главная лента построена с использованием плагина mansory.
— Автоподгон mansory под динамическое изменение на странице. Например разворот комментариев и закрытие сайдбара.
— Настройка сетки для вывода топиков
— Фотосет слайдером
— Первый топик: 1) Если это фотосет, он растягивается в большой слайдер. 2) Если это обычный топик, то он больше чем все остальные
— В ленту топиков так же выводится блок с топом блогов и пользователей, что должно увеличить количество подключенных пользователей и добавление в друзья.
Сообщения
Сообщения сильно переработаны, предлагаю взглянуть воочию, это интересно.
Профиль
— Фото пользователя, теперь есть шапка, да-да, как в этих самых соц сетях.
— Вся информация о пользователе в сайдбаре
— В настройках профиля, можно выбрать цвет-оформление шаблона, сейчас сделано три темы на выбор. Однако эта функция может работать для любого посетителя вашего сайта, нужно лишь вынести блок из профиля для всех. Но делать этого не рекомендую, есть всякие понятия фирменного стиля, и т.д.
Блоги
— «Блоги» переименованы в «Группы», мне показалось так понятней.
— Шапка блога, как в профиле пользователя. В роли картинки, выступает аватар.
— Возможность писать в группу, прямо со страницы группы.
Страницы авторизации и прочии
— Собственно надобность в модальном окне отпала. На странице авторизации можно и зарегистрироваться, и зайти на сайт.
— Сделано описание сайта «Приветствие»
— Добавлен слайдер, куда можно запихать презентацию проекта.
— 404 и прочии, тоже переделаны под стиль авторизации.
Дизайн
Дизайн был взят VK Flat, и на его основе уже делалось все UI. От некоторых фишек с макета пришлось отказаться, например фотоальбомы, видео. Но это можно расширить плагинами.
Формы
Хочу отметить формы в шаблоне. На них было убито много времени. Теперь у всех форм, есть иконка, хочешь справа, хочешь слева, хочешь кнопкой, аль ссылкой, без иконок совсем. Меняются иконки прямо в html, сменой класса.
Иконки
Используется иконочный шрифт. За исключением некоторых иконок, которых просто в этом шрифте не было.
Добавление топика
В сайдбаре теперь три вкладки, которые сами листаются. Это:
— Группа
— Совет
— Помощь, там теги которые можно вставить в топик
Плагины
— Все плагины, что используют страницы шаблонов, придется адаптировать.
Демо
Разработчик | makenskiy.com
Демо сайт | VK Flat Style
123123 | 123123123123
test | testtest
123 | 123123
Часть конфига
/* * Загрузка */ $config['view']['body']['preloader'] = false; // Показать прогресс загрузки страницы true - да, false - нет. $config['view']['body']['preloader_index'] = false; // Показать только на главной true - да, false - нет. /* * Тип сетки */ $config['view']['grid']['type'] = 'layout-fluid'; // Резина - layout-fluid, фиксированная - layout-fixed /* * Шапка */ $config['view']['grid']['header'] = true; // Шапка фиксированная или статичная /* * Верхнее меню */ $config['view']['top_menu']['modal_add'] = true; // Показывать модалку при нажатии на "Добавить топик" $config['view']['top_menu']['topic_add_icon'] = false; // Показывать карандаш добавления топика возле аватара, если false, то "Написать" выводится в меню /** * Лента топиков */ $config['view']['topics']['user_top'] = true; // Показать топ пользователей в ленте топиков, true - да, false - нет. $config['view']['topics']['blog_top'] = true; // Показать топ блогов в ленте топиков, true - да, false - нет. /** * Темы топиков */ $config['view']['topics']['themes'] = 'tm-2'; // Тема топиков на главной, tm-1, tm-2 $config['view']['topics']['themes_hover_avatar'] = 'tm-1'; // Тема топиков на главной, tm-1, tm-2, tm-3, tm-4, tm-5 /** * Настройка тем топиков */ /* Тема топиков tm-1 =============================================*/ $config['view']['topics']['tm-1']['comments'] = true; // Выводить комментарии в списке топиков, true - да, false - нет. Надо понимать, что true, даст значительное увелечение нагрузки на БД, а как следствие увеличение загрузки сайта. $config['view']['topics']['tm-1']['avatar'] = true; // Показать аватары топиков, true - да, false - нет. Актуально при использовании layout-fluid вместе с sidebars-fluid $config['view']['topics']['tm-1']['full'] = false; // Разтянуть топики на всю ширину, актуально при использовании layout-fixed. true - да, false - нет $config['view']['topics']['tm-1']['text'] = true; // Убрать текст описания топика на главной, true - да, false - нет. /** * Модалки/Всплывающии окна */ $config['view']['modal']['auth'] = false; // Показать модальное окно авторизации, true - да, false - нет. /** * Профиль */ $config['view']['profile']['wall'] = true; // Показать стену на главной профиля. true - да, false - нет. $config['view']['profile']['topic'] = true; // Показать последнии топики из личного блога пользователя на главной профиля $config['view']['profile']['topic_count'] = 10; // Сколько топиков показать на главной профиля поьзователя /** * Подвал */ $config['view']['footer']['copyright'] = true; // Показать копирайт разработчика. true - да, false - нет. $config['view']['footer']['copyright_name'] = 'site.com'; // Имя копирайта вашего сайта $config['view']['footer']['copyright_year'] = '2015-2015'; // Год, если не нужен, оставить поле пустым $config['view']['footer']['copyright_text'] = ''; // Любой текст после года, если не нужен, оставить поле пустым
62 комментария
Картинки выходят за пределы основного div'a топика — не красивая свистелка на мой взгляд. Лучше было или по ширине текста или дива, но не выходить за него.
Кнопочки прокрутки топиков не работают.
В комментариях для всех ссылок нет эффектов при наведении, а так же сведений о том, что кнопочка уже нажималась. Например добавление в избранное или голосование за комментарий.
Ой, все. Пойду компресс из ромашки сделаю
2) Ход дизайнерской мысли, сколько людей столько и мнений. Правится на раз в css. Мне лично нравится идея :)
3) Работаю. Просто топки в ряд идут, так на всех шаблонах с плиткой. Подумаю, может сделать галочки при прокрутке.
4) Принято, сделаю.
Спасибо за мнение, пойду выпью водки :))
Никрасива!!1
Группы или Блоги? Из чего выбирать или где вступать?
Масло масляное
Отступов бы добавить да по ширине выровнять
2) Принято.
3) ??? Выше же форма добавления записи.
4) Принято.
Что с ним не так?
Не планирую навешивать дополнительный функционал, этому есть причины, главная «Шаблон не Плагин», если функционал будет из коробки, будет и в шаблоне.
Могут, просто лениво. Шаблоны под LS долго, дорого и нудно делать, потому многие берут стандарт дефакто.
Автор, все ссылки сливаются, все до ужаса непонятно, что к чему. Но это сугубо мое мнение. Цена шаблона максимум 200 руб.
Имхо, подобная реакция возникает потому, что сайт с таким шабом, действительно, как-то непонятно выглядит. Или, даже, не знаю как сказать, чтобы художника не обидеть… Работа проделана, безусловно, колоссальная. Факт… Но заходишь на сайт… и как-то ничего не понятно. Очень сумбурно. Возможно, это так на демке… а на сайте с нормальным контентом будет иначе. Не знаю. Лично я, как ни захожу на демку — сразу теряюсь: чего, куда, как..? Плюс левая панель еще эта… она должна как-то выдвигаться по подобию шаблона «avaya»? Просто у меня не выдвигается, вижу только пиктограммы. Что они значат..? Мне не понятно…
Но, повторюсь, работа проделана большая. Так что свое мнение я написал не о качестве адаптации с html на шаблон livestreet, скорее, а общее такое мнение…
В любом случае, товарищ makensky, растете :)! Успехов :)!
По левому меню. Оно не сворачивается, сворачивается только правый сайдбар. Оно адаптируется под разрешение, если сильно маленькое, то получаем только пиктограммы без ссылок. Тултипы туда засунуть не вариант, т.к. на большом разрешении тултипы к ссылкам не в тему. Сделать его тоже сворачиваемым как правый сайдбар можно впринцепе, но это влечет море вариантов подгона основного контента, от сюда возникли сложности в техническом плане, поэтому отказался и принял решение выводить пиктограммы. Можно уходить в мобильный вид меню, но разрешение итоговое какое то не мобильное не разу, поэтому тоже отказался. Думается сейчас не так много людей с маленькими мониторами, поэтому не должно стоять проблемой.
И еще маленький нюанс по интерфейсу, нельзя назвать интуитивным:
1. В верхнем баре иконки «Сообщения» и «Создать», на мой взгляд лучше поменять местами.
2. Сообщения на каждой странице дублируется два раза. Зачем? Непродуманно.
3. Когда заходишь в профиль к другим, ищешь кнопку отправки сообщения, когда находишь, она оказывается в самом углу, опять же удобнее было сначала отправить сообщение, потом добавить в друзья. Или! Просто выделить иконку отправки сообщений.
Блок с «Фотосетом» очень сильно режет глаз на главной (когда первый раз зашел на главную, первая мысль — куда тут жать?).
Может стоить проработать варианты расположения топиков как в шаблоне атлас: Timeline, timeline dual, metro?
Как бы мелочи которые легко поправимы, это понятно, но в целом из таких мелочей (и тех что описали в комментариях выше) складывается общее впечатление недоделанности/впопыхах/на скорую руку о шаблоне, а следовательно и плохой спрос.
Все выше написанное сугубо личное мнение.
Тут не вижу проблемы.
Сообщения на верху как информер, чтобы взгляд падал сразу при новом сообщении.
Поменял местами. Лучше стало.
В топике об этом написано. Если первый топик фотосет, то он слайдером, если не фотосет, то просто больше остальных. Пример Такая логика меняться не будет. У меня на любом незнакомом сайте первая мысль «Куда тут жать», это нормально вроде.
Буду рад если еще недочетов накидаете.
Пожалуйста исправь все косяки, и я обязательно куплю для своего нового социального проекта.
P.S. Не работает меню на последнем айфоне, что уже как бы отталкивает. И вообще поработайте внимательней с адаптивностью, облегчите шаблон, уберите апы для мобильной версии, сейчас любой браузер смартфона умеет подымать контент вверх, не нужно это. И еще раз — User Experience. Я понимаю, что это проблема нарисованного дизайна, но все же.
Спасибо. Яблофона нет, но найду проверить, посмотрю. Шаблон облегчен, очень даже, т.к. адаптивность заложена на этапе проектирования структуры верстки. Вообще беда адаптива в количестве подгружаемого кода, который надо и не надо загружать, увы бич за понты, поэтому я сам вообще против адаптивной верстки. Помочь может только отдельная моб.версия, и от этого никуда не деться.
Попробуйте в будущих шаблонах максимально упростить все, с Вашим подходом к делу это будет отличный шаблон.
Кстати администратор/сайтостроитель это не обычный пользователь, именно он привык к старому, а не пользователи которые будут на сайте. Даже не знаю :)
Неважно какие будут комментарии. Главное что покупать будут. Много лишнего и правда стоит убрать. Оставить например только один вид топика — собственно топик. Для картинок есть плагин Галерея, для голосований Голосование просто их адаптировать и всё.
Опять же древовидные комментарии, деревья всё равно неполноценные, крадут пространство на экране, дерево ненужно, линейный вид всегда предпочтительнее.
На главной не надо делать это адское месиво из представлений. Простая лента лучше всего и компактность в приорите опять же, а то пара постов всего видна. А главное это конечно же ошибочность политики разведённых чернил. Не надо всё разводить водой до степени смешения с белым фоном. Разговор о том, что можно поменять это — не разговор. Поменяйте и там поверьте, никто обратно на эту воду не переключит. Всё должно быть чётко и контрастно по умолчанию. И этот чудовищный белый фон, напоминающий психиатрическую клинику. Стремление его сохранять удивляет. Это стандарт, конечно, но стандарт тут и так есть, вы же предлагает, по идее, продвинутое решение, которое должно идти дальше стандарта.
1.0.5
— Улучшено топ меню
— Улучшено левое меню
— Улучшен поиск
— Добавлен прогресс загрузки страницы (прелоадер), отключается в конфиге, можно выводить на всех страницах, или только на главной.
— Улучшена адаптивность
— Правка мелочевок
— Эффекты при наведении на картинки
— Заложена тематизация топиков
— Темы топиков: таймлайн, только привьшка, стандартный стиль ls
— Улучшение мобильной версии
— Мелочи
P.S прошу не гадить матом на демо и не менять пароли. Как маленькие ей богу.
— Улучшен адаптив
— Добавлен иконочный шрифт font-awesome
— Кастомный markIt, иконки можно менять через main.js (иконочным шрифтом)
— Добавлена тема топиков «таймлайн»
— На слайдер фотосета, добавлены эффекты при наведении
— Добавлено 5 эффектов при наведении на аватар топика
— Расширены параметры конфига
— Изменено верхнее меню (настраивоемо)
— Мелочи
1. 5 тем топиков (на демо позже)
2. Адаптация плагина «Рейтинг: все включено»
3. Адаптация плагина «LSGallery (Галерея)» (можно потыкать на демке).
3.1. Из нового в оформлении галереи:
3.1.1 Блоки с фотками в сайдбарах сделаны слайдерами
3.1.2 Блок с информацией «о альбоме» сделан как профиль пользователя или блога в шаблоне.
3.1.4 Теги под фоткой убраны в спойлер
3.1.5 Переделаны кнопки управления
3.1.6 Переделаны формы
3.1.6 Убран тултип (не выпилен, можно вернуть)
3.1.7 В остальном интерфейс такой же
— Добавлены ховеры строки в таблицах
— В админку плагинов добавлен стиль кнопкам «Активировать, настройки, деактивировать»
— Оформлена админка пользовательских полей
— В мобильное меню добавлен хук для вывода ссылок из плагинов
— В мобильной версии кнопки «Туда, сюда» в фотосете теперь скрываются за ненадобностью.
— Начата документация
— Уменьшен аватар превьюшки в редактировании топика
— Адаптирован плагин «Вывод топиков из определенного блога в блок (Blogtopics)»
— Адаптирован плагин «Mailing (большие рассылки)»
— Адаптирован плагин «Feedbacks»
— Починил кнопку вверх
— Цвет иконок в левом меню сделан ярче
— Исправлен баг переключения на тему 2 при наведении на аватар
— При наведении на аватар теперь весь блок активный ссылкой, можно щелкнуть в любом месте чтобы перейти в топик, а не только по иконке.
— Отступы в блоках сайдбара
— Много где проставлены тултипы, изменен их внешний вид
— Убрано обтекание текста аватара в блоке с перепиской в сайдбаре, поправлены отступы.
— Добавлена поддержка адаптивного видео для iframe, object, embed. Отключить можно в main.js закомментировав videoResponsive в секции init
— Исправлен размер картинок фотосета на ретине
— Добавлена лицензия с скидкой 50%, при покупке на второй/третий и т.д. домен.
Хочу сказать спасибо за тестирование пользователю zeonish
P.S. Какой то идиот опять пароль поменял, запретил смену пароля в движке, надоели.