FKB Pro - Tema social

:eyeglasses: Vista previa Theme Creator
:hammer_and_wrench: Repositorio Tema FKB Pro
:heart: ¿Te resultó útil? > ./support --coffee
:question: Guía de instalación Cómo instalar un tema o un componente de tema
:open_book: ¿Nuevo en temas de Discourse? Guía para principiantes sobre el uso de temas de Discourse

FKB Pro es un tema social altamente modificado, detallado y profesional, pero que sigue siendo fácil de usar. :rocket:

:warning: ¡Este tema es bastante sensible y quizás no sea compatible con otros componentes de tema o plugins que uses! Por favor, pruébalo antes de usarlo. Estos suelen necesitar alguna modificación de CSS. Si tienes algún problema, por favor, repórtalo y lo corregiré.


Diseño

En escritorio: Diseño de tres columnas.

Preparado para barra lateral


En móvil:


Esquinas redondeadas

FKB Pro tiene esquinas muy redondeadas en todas partes por defecto, pero sé que no a todo el mundo le gusta, así que he añadido algunas Configuraciones de Tema para facilitar su personalización.

Si no te gustan las esquinas redondeadas… establece estos valores en 0.


Tarjeta de tema

Secciones principales

  1. Título (al hacer clic se va al último mensaje)
  2. Extracto (al hacer clic se va al OP)
  3. Imagen (al hacer clic se va al último mensaje)

Otras secciones

  1. Arriba a la izquierda: Datos del autor (avatar, nombre, nombre de usuario) y la fecha en que se creó el tema.
    (al hacer clic se abre la tarjeta de usuario)
  2. Arriba a la derecha: Insignia de categoría
  3. Centro abajo: Etiquetas
  4. Abajo a la izquierda: Me gusta y vistas del tema
    (al hacer clic se va al OP y resume el tema si está disponible)
  5. Abajo a la derecha: Avatar del último autor, fecha y número de respuestas.
    (al hacer clic en el avatar se abre la tarjeta de usuario, la fecha lleva al último mensaje y el número de respuestas abre la selección de respuestas)

Estilo de insignias

  1. viñeta
    Screenshot 2022-07-28 at 13.20.14

  2. barra
    Screenshot 2022-07-28 at 13.17.04

  3. caja
    Screenshot 2022-07-28 at 13.18.34


Página de categoría

Debido al tamaño limitado en el centro, por favor usa estilos de página de categoría de una columna. Hice algunas personalizaciones en estos para que encajen mejor con este tema.

Solo categorías, Categorías y temas más recientes, Categorías y temas top

Cajas de categorías

O

Puedes usar el componente de tema Modern Category + Group Boxes creado por @jordan.vidrine


Panel FKB

En escritorio: La barra lateral derecha.

Para visitantes anónimos muestra un mensaje de bienvenida. Este mensaje es el mismo que js.signup_cta.value_prop. El texto de la cabecera Welcome puedes cambiarlo en Traducción del Tema.

O

Para visitantes anónimos hay una opción para habilitar una barra lateral personalizada. Puedes agregar contenido personalizado a la barra lateral, como imagen y descripción.


Para usuarios iniciados sesión contiene la información del usuario, como la foto de perfil, estadísticas, insignias y también usa la imagen de la tarjeta de usuario como fondo. También contiene algunos botones rápidos en la parte inferior.


Esquemas de color

El tema contiene dos esquemas de color: FKB Pro - Light y FKB Pro - Dark.

Color Schemes

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

También hay algunos esquemas de color personalizados que puedes cambiar en la configuración.

Custom Color Schemes

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)

Más sobre las últimas actualizaciones :arrow_down_small:

y aquí :arrow_down_small:

Hay muchas otras personalizaciones que no mencioné. :slightly_smiling_face:


Crédito :heart: Grandes gracias a @awesomerobot por crear el tema Fakebook y a @jordan.vidrine por crear el tema Fakebook Modern.

63 Me gusta

Con el iPad es bastante… ancho. Quiero decir, muy ancho :wink:

Supongo que es porque no hay una barra lateral. ¿Alguna idea de por qué?

3 Me gusta

¡Me encanta!

Mi única sugerencia es hacer el menú hamburguesa más ancho y luego agregarle relleno.

1 me gusta

Otro pequeño:\n\n* mi foro no usa el plugin solved\n* no usamos insignias\n\nSabes mejor cómo ocultar esos dos ;)\n\n

\n\nPor lo demás… este tema parece muy prometedor en ordenadores de escritorio y móviles (las tabletas son un poco problemáticas)\n\nA propósito, hay un pequeño problema de diseño con el banner versátil. Empuja el contenido debajo de él un poco demasiado hacia la izquierda.

3 Me gusta

Hola,

He aplicado una corrección para la vista de tableta. Por favor, actualiza el tema. :slightly_smiling_face:

6 Me gusta

Eso fue rápido.

Mucho mejor, gracias. Tengo un nuevo tema predeterminado…

1 me gusta

Gracias :slightly_smiling_face: Sí, creo que es el predeterminado. El primer elemento está enfocado cuando abres el menú.

3 Me gusta

Sí, solo estaba sugiriendo que hay un poco de espacio entre ellos, aparte de eso, el tema se ve bien para lo mucho que odio Facebook y Meta, ¡jaja!

Gracias :slightly_smiling_face: Implementé una solución para esto.

Añadí dos configuraciones de tema.

Revisaré esto.

4 Me gusta

Debo ser una molestia en los puntos sensibles :rofl:

Hay un problema. No para mí, sino para mis 5 principales contribuyentes es cuestión de vida o muerte — bueno, quizás eso fue demasiado, pero realmente lo quieren.

Configuración de categorías:

Normalmente muestra algo como esto (en iPad, pero entiendes a qué me refiero)

Tu diseño se rompe si la descripción o el nombre de la categoría es más largo que unos pocos caracteres:

Desactivar mostrar lista de subcategorías arriba… soluciona esto, por supuesto.

Pero de todos modos me estoy moviendo hacia el uso exclusivo de categorías de nivel superior y confío mucho en las etiquetas (y entonces tu tema es en realidad bastante adecuado en muchos aspectos) — así que si arreglar eso llevaría demasiado trabajo y/o tienes algo más importante que hacer, estoy totalmente de acuerdo si trabajas en esto más tarde.

3 Me gusta

Hola, he añadido una corrección para Discourse Reactions. :slightly_smiling_face:
Puedes instalarla como un componente de tema.

1 me gusta

Gracias por el informe @Jagster. He implementado una solución para este problema. FIX: Topic list category layout by VaperinaDEV · Pull Request #3 · VaperinaDEV/fkb-pro-theme · GitHub

2 Me gusta

Hola, he aplicado una solución para esto. Gracias :slightly_smiling_face: Por favor, actualiza el tema.

Antes

Después

1 me gusta

Tema muy bueno. Por favor, añade más publicaciones para probar.

1 me gusta

Gracias :slightly_smiling_face: Actualicé el OP con el enlace de vista previa del creador de temas, así que ahora puedes probarlo también en https://discourse.theme-creator.io/theme/dodesz/fkb-pro.

2 Me gusta

¡Tema increíble! Si logro encontrar una manera de conseguir un maldito dominio y un servidor de correo electrónico, definitivamente usaré este tema.

2 Me gusta

Hola,

He añadido una nueva función :tada: Ahora puedes añadir contenido personalizado en la barra lateral para los visitantes.

3 Me gusta

Gracias por actualizar este tema.

Sería genial si desarrollaras este tema como un blog (olvida el tema de Facebook :sweat_smile:)

Sugerencia de https://www.newsbreak.com/

3 Me gusta

No estoy de acuerdo :wink:

Las necesidades de Blogish son diferentes a las de intentar ofrecer más estilo SoMe para aquellos que piensan que Facebook/Instagram/etc. son la mejor experiencia de usuario/interfaz de usuario posible.

Por lo tanto, podría haber un tema que se parezca un poco más a un blog (lo que sea que eso signifique ahora…). Pero esto está bien tal como está ahora.

(WordPress es una plataforma de blog mucho más superior que Discourse; son dos herramientas totalmente diferentes para propósitos diferentes…)

1 me gusta

¡Hola, gran tema!

La vista previa del tema en nuestro foro no se muestra con 3 columnas, solo con un diseño de una columna. Sospecho que es un problema de CSS, pero todavía estoy intentando resolverlo.

2 preguntas:

  • ¿Es posible tener columnas de ancho fijo con un ancho de pantalla mínimo (o varios, usando por ejemplo reglas css de medios) en modo escritorio? El ancho flexible me da un poco de dolor de cabeza en monitores muy grandes (24 o 27’') y el “espacio muerto” entre las tres columnas es un poco incómodo.
  • ¿Es el tema compatible con el componente para bloques del lado derecho Bloques de barra lateral derecha - componente-tema - Discourse Meta? Si es así, hace que la columna derecha sea más útil/rica en funciones.
2 Me gusta