Шаблон как Вконтакте html

Содержание

Адаптивный шаблон для LiveStreet CMS, с уклоном на Vk.com или Facebook.com. Теперь ваш сайт можно сделать более социальным. В целом применен подход так называемых dashboard, или админок, но под особым соусом.

Описать все не получится, сделано много, очень много. Ни один из проектов так долго и кропотливо не делал, самому нравится. Переработано почти все, наверняка многим придется по душе.

Видео смотреть в HD.

Уникальные фишки (Технические подробности)

CSS фреймворк

Построен на CSS фреймворке, который был специально сделан для шаблона.

Верстка

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

Плагин

Сделан плагин, который расширяет следующий функционал:

— Переносит список сообщений на любую страницу, внутри экшена /talk.

Новая обложка профиля Вконтакте + шаблон

— Дает возможность добавлять в друзья с любой страницы шаблона (вывод в шаблон будет в обновлении)
— Выводит блок с топ пользователями. На данный момент подключен в списке топиков, однако можно подключить куда угодно.
— Добавлена стена на главной в профиль
— Добавлен вывод топиков из личного блога в профиль
— Вывод комментариев прям в списке топиков
— Рекламный блок слайдер, который поддерживает видео рекламу. Можно туда засунуть вывод чего угодно.

Уникальные фишки (Дизайнерские подробности)

Сетка

Сделана полная резина с переходом в адаптив.

Варианты сетки

— Резина + адаптив
— Фиксированная + адаптив

Колонки

Используется три колонки:

— Сайдбар слева (меню)
— Контент
— Сайдбар справа (блоки), который между прочем можно открыть и закрыть. Имеется встроенный кастомный скроллбар.
— Есть режим переключения положения сайдбаров. Например можно прижать правый сайдбар к левому.

Еще по теме: Как сделать анонимные вопросы в ВК в истории

Топики

— Главная лента построена с использованием плагина mansory.
— Автоподгон mansory под динамическое изменение на странице. Например разворот комментариев и закрытие сайдбара.
— Настройка сетки для вывода топиков
— Фотосет слайдером
— Первый топик: 1) Если это фотосет, он растягивается в большой слайдер. 2) Если это обычный топик, то он больше чем все остальные
— В ленту топиков так же выводится блок с топом блогов и пользователей, что должно увеличить количество подключенных пользователей и добавление в друзья.

Сообщения

Сообщения сильно переработаны, предлагаю взглянуть воочию, это интересно.

Профиль

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

Блоги

— «Блоги» переименованы в «Группы», мне показалось так понятней.
— Шапка блога, как в профиле пользователя. В роли картинки, выступает аватар.
— Возможность писать в группу, прямо со страницы группы.

Страницы авторизации и прочии

— Собственно надобность в модальном окне отпала. На странице авторизации можно и зарегистрироваться, и зайти на сайт.
— Сделано описание сайта «Приветствие»
— Добавлен слайдер, куда можно запихать презентацию проекта.
— 404 и прочии, тоже переделаны под стиль авторизации.

Дизайн

Дизайн был взят VK Flat, и на его основе уже делалось все UI. От некоторых фишек с макета пришлось отказаться, например фотоальбомы, видео. Но это можно расширить плагинами.

Формы

Хочу отметить формы в шаблоне. На них было убито много времени. Теперь у всех форм, есть иконка, хочешь справа, хочешь слева, хочешь кнопкой, аль ссылкой, без иконок совсем. Меняются иконки прямо в html, сменой класса.

Еще по теме: Как в ВК сделать контакты из телефонной книги

Иконки

Используется иконочный шрифт. За исключением некоторых иконок, которых просто в этом шрифте не было.

Добавление топика

В сайдбаре теперь три вкладки, которые сами листаются. Это:
— Группа
— Совет
— Помощь, там теги которые можно вставить в топик

Плагины

— Все плагины, что используют страницы шаблонов, придется адаптировать.

Демо

Часть конфига

/* * Загрузка */ $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’] = »; // Любой текст после года, если не нужен, оставить поле пустым

Еще по теме: Как сделать топ ВК

Источник: livestreet.ru