FKB Pro - тема для соцсетей

:eyeglasses: Предпросмотр Theme Creator
:hammer_and_wrench: Репозиторий Тема FKB Pro
:heart: Пригодилось? > ./support --coffee
:question: Гид по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Гид для начинающих по использованию тем Discourse

FKB Pro — это сильно модифицированная, детализированная и профессиональная социальная тема, которая при этом остаётся удобной для пользователя. :rocket:

:warning: Эта тема довольно капризная и, возможно, плохо совместима с другими компонентами тем или плагинами, которые вы используете! Пожалуйста, протестируйте её перед использованием. Обычно для этого требуется некоторая модификация CSS. Если у вас возникнут проблемы, пожалуйста, сообщите о них, и я их исправлю.


Разметка

На десктопе: Трехколоночная разметка.

Готова к боковой панели


На мобильных устройствах:


Скругленные углы

По умолчанию FKB Pro имеет сильно скругленные углы повсюду, но я знаю, что не всем это нравится, поэтому я добавил некоторые настройки темы, чтобы упростить кастомизацию.

Если вам не нравятся скругленные углы… установите эти значения в 0.


Карточка темы

Основные секции

  1. Заголовок (клик ведет к последнему посту)
  2. Выдержка (клик ведет к первому посту)
  3. Изображение (клик ведет к последнему посту)

Другие секции

  1. Слева сверху: Данные автора (аватар, имя, имя пользователя) и дата создания темы.
    (клик открывает карточку пользователя)
  2. Справа сверху: Бейдж категории
  3. По центру снизу: Теги
  4. Слева снизу: Лайки и просмотры темы
    (клик ведет к первому посту и сворачивает тему, если доступно)
  5. Справа снизу: Аватар последнего автора, дата и количество ответов.
    (клик по аватару открывает карточку пользователя, клик по дате ведет к последнему посту, клик по количеству ответов открывает выбор ответа)

Стили бейджей

  1. маркер (bullet)
    Screenshot 2022-07-28 at 13.20.14

  2. полоса (bar)
    Screenshot 2022-07-28 at 13.17.04

  3. коробка (box)
    Screenshot 2022-07-28 at 13.18.34


Страница категории

Из-за ограниченного размера центральной части, пожалуйста, используйте стили страницы категорий в одну колонку. Я внес了一些 кастомизацию в них, чтобы они лучше подходили к этой теме.

Только категории, Категории и последние темы, Категории и топ темы

Коробки категорий

ИЛИ

Вы можете использовать компонент темы Modern Category + Group Boxes, созданный @jordan.vidrine


Панель FKB

На десктопе: Правая боковая панель.

Для анонимных посетителей отображается приветственное сообщение. Это сообщение такое же, как js.signup_cta.value_prop. Заголовок Welcome можно изменить в переводе темы.

ИЛИ

Для анонимных посетителей есть опция включить пользовательскую боковую панель. Вы можете добавить пользовательский контент в боковую панель, например изображение и описание.


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


Цветовые схемы

Тема содержит две цветовые схемы: FKB Pro - Light и FKB Pro - Dark.

Цветовые схемы

FKB Pro - Light

  • primary #242526
  • secondary #ffffff
  • tertiary #147efb
  • quaternary #147efb
  • header_background #ffffff
  • header_primary #242526
  • highlight #147efb
  • danger #f8745c
  • success #42b72a
  • love #fa6c8d

FKB Pro - Dark

  • primary #ffffff
  • secondary #242526
  • tertiary #147efb
  • quaternary #4267b2
  • header_background #242526
  • header_primary #ffffff
  • highlight #147efb
  • danger #f8745c
  • success #42b72a
  • love #fa6c8d

Также есть некоторые пользовательские цветовые схемы, которые можно изменить в настройках.

Пользовательские цветовые схемы

fkb-bg

  • light #f0f2f5
  • dark #18191a

fkb-header-btn

  • light #e1e5eb
  • dark #3a3b3e

fkb-header-btn-hover

  • light #d2d8e1
  • dark rgba(var(--primary-rgb),.1)

fkb-btn

  • light #e1e5eb
  • dark #383838

fkb-btn-hover

  • light #d2d8e1
  • dark rgba(var(--primary-rgb),.1)

Подробнее о последних обновлениях :arrow_down_small:

и здесь :arrow_down_small:

Есть еще много других кастомизаций, о которых я не упомянул. :slightly_smiling_face:


Кредит :heart: Огромное спасибо @awesomerobot за создание темы Fakebook и @jordan.vidrine за создание темы Fakebook Modern.

63 лайка

На iPad это довольно… широко. Я имею в виду, очень широко :wink:

Думаю, это из-за отсутствия боковой панели. Есть какие-нибудь идеи, почему так?

3 лайка

Мне это нравится!

Единственное предложение — сделать меню-гамбургер шире и добавить отступы

1 лайк

Ещё один небольшой момент:

  • мой форум не использует плагин solved-plugin
  • мы не используем бейджи

Вы лучше знаете, как я скрываю эти два элемента :wink:

В остальном… эта тема выглядит очень перспективно на настольных компьютерах и мобильных устройствах (с планшетами есть небольшие проблемы).

Кстати — есть небольшая проблема с макетом универсального баннера. Он сдвигает контент под ним немного слишком сильно влево.

3 лайка

Привет,

Я исправил отображение на планшетах. Пожалуйста, обновите тему. :slightly_smiling_face:

6 лайков

Это было быстро.

Гораздо лучше, спасибо. Я получил новую тему по умолчанию…

1 лайк

Спасибо :slightly_smiling_face: Да, я думаю, что это поведение по умолчанию. Первый элемент находится в фокусе при открытии меню.

3 лайка

Да, я просто заметил, что между ними есть немного пространства. В остальном тема выглядит отлично, особенно учитывая, как сильно я ненавижу Facebook и Meta, ха-ха.

Спасибо :slightly_smiling_face: Я исправил это.

Я добавил два параметра темы.

Я проверю это.

3 лайка

Должно быть, я задеваю самые чувствительные места :rofl:

Есть одна проблема. Не для меня, но для моих пяти основных контрибьюторов это вопрос жизни и смерти — ну, возможно, это слишком сильно сказано, но они действительно этого хотят.

Настройки категорий:

Обычно это выглядит примерно так (на iPad, но вы понимаете, о чём я):

Ваш макет ломается, если описание или название категории длиннее нескольких символов:

Отключение show subcategory list above…, конечно, решает эту проблему.

Но я всё равно перехожу на использование только категорий верхнего уровня и сильно полагаюсь на теги (так что ваша тема на самом деле во многом вполне подходит) — поэтому, если исправление этого займёт слишком много времени и/или у вас есть что-то более важное, я совершенно не против, если вы займётесь этим позже.

3 лайка

Привет, я добавил исправление для Discourse Reactions. :slightly_smiling_face:
Вы можете установить его как компонент темы.

1 лайк

Спасибо за отчет, @Jagster. Я внес исправление для этой проблемы. FIX: Topic list category layout by VaperinaDEV · Pull Request #3 · VaperinaDEV/fkb-pro-theme · GitHub

2 лайка

Здравствуйте, я исправил эту проблему. Спасибо :slightly_smiling_face: Пожалуйста, обновите тему.

До

После

1 лайк

Очень крутая тема. Пожалуйста, добавьте больше постов для теста.

1 лайк

Спасибо :slightly_smiling_face: Я обновил первый пост ссылкой на превью создателя тем, так что теперь вы можете попробовать его по адресу https://discourse.theme-creator.io/theme/dodesz/fkb-pro.

2 лайка

Крутая тема! Если я смогу разобраться с получением домена и почтового сервера, то обязательно буду использовать эту тему.

2 лайка

Привет,

Я добавил новую функцию :tada: Теперь вы можете добавлять пользовательский контент в боковую панель для посетителей.

3 лайка

Спасибо за обновление этой темы.

Было бы здорово, если бы вы разработали эту тему в стиле блога (забудьте о теме Facebook :sweat_smile:)

Предложение от https://www.newsbreak.com/

3 лайка

Я не согласен :wink:

Потребности блоггинга отличаются от попыток предложить больше стиля SoMe для тех, кто считает, что Faceboom/insta и т.д. — это наилучший возможный опыт UX/UI.

Так что — возможно, существует тема, которая выглядит немного больше как блог (что бы это сейчас ни значило…). Но и так всё отлично.

(WordPress как платформа для блогов гораздо лучше, чем Discourse; это два совершенно разных инструмента для разных целей…)

1 лайк

Привет, отличная тема!

В превью темы на нашем форуме отображается только одноколоночный макет, а не три колонки. Я подозреваю проблему с CSS, но всё ещё пытаюсь разобраться.

Два вопроса:

  • Можно ли установить фиксированную ширину колонок при минимальной ширине экрана (или нескольких значениях, используя, например, медиа-запросы CSS) в режиме для настольных компьютеров? Гибкая ширина немного усложняет работу на очень больших мониторах (24 или 27 дюймов), а «мёртвое пространство» между тремя колонками выглядит немного неуклюже.
  • Совместима ли эта тема с компонентом для блоков правой боковой панели Right Sidebar Blocks - theme-component - Discourse Meta? Если да, это сделает правую колонку более полезной и функциональной.
2 лайка