L’unico piccolo problema con il codice scss è che non c’è un a capo automatico, quindi le parole vengono troncate 
Cosa intendi? Puoi mandare uno screenshot?
Questo è un comportamento intenzionale nel core, ma se preferisci che il nome della categoria venga interrotto su una nuova riga anziché troncato, puoi provare:
.category-heading {
&.--has-logo {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-4);
}
&__content {
min-width: 0;
.badge-category__wrapper {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
.badge-category {
&.--style-emoji,
&.--style-icon {
align-items: baseline;
}
}
}
}
}
3 Mi Piace
Ottimo, funziona! @Don sei un campione 
1 Mi Piace
Ho notato che nella versione per tablet non c’è la descrizione della categoria, mentre su mobile sì. Penso che sarebbe opportuno fare la stessa cosa anche nella versione mobile. 
Ho notato anche io che, se si usano le risposte annidate, c’è un piccolo difetto di visualizzazione dell’avatar, che risulta un po’ troppo grande.
Non so se sono l’unico a cui succede.
Grazie @gilles! Ho unito un aggiornamento per queste…
2 Mi Piace
Ho provato e funziona tutto, grazie @Don per la tua reattività 
1 Mi Piace
@Don ho trovato un piccolo bug di visualizzazione in modalità desktop su computer senza la barra laterale, solo per informazione
1 Mi Piace
Grazie, l’ho corretto qui: FIX: Enhance category heading styles in SCSS · VaperinaDEV/fkb-pro-theme@95a3c25 · GitHub
4 Mi Piace
Testato e approvato
1 Mi Piace
Ho appena installato questo. Sono abbastanza sicuro che subito dopo l’installazione ci fosse un pannello Fakebook sul lato destro, ma sembra che per me sia scomparso. Non sono sicuro di cosa abbia cambiato per farlo sparire e di come fare per recuperarlo.
Ciao 
C’è un pulsante in basso a destra per attivare o disattivare questa sezione.
Ho aggiornato il tema: DEV: Improve FKB panel and right sidebar layout handling - Pull Request #78 - VaperinaDEV/fkb-pro-theme - GitHub
2 Mi Piace
Ah, eccolo lì — grazie! Hmm, forse l’ho premuto per sbaglio? O è stato disattivato quando ho aperto la pagina su mobile? Farò qualche esperimento e vi farò sapere.
1 Mi Piace
Sì, non verrà visualizzato su mobile.
Giusto, certo.
Stavo pensando che fosse possibile che fosse stato disattivato per me su desktop quando leggevo il nostro forum su mobile. Ho appena fatto quel test, però, e il pannello non è stato disattivato. Quindi resta un mistero come il mio pannello sia stato disabilitato su desktop: devo aver cliccato accidentalmente sulla freccia di disattivazione.
1 Mi Piace
Ciao Don! Mi piace davvero tanto il tema FKB Pro.
Piccola richiesta: sarebbe possibile aggiungere un’impostazione per mostrare più avatar dei partecipanti sulle card degli argomenti, invece che solo quello dell’ultimo che ha postato?
L’avatar singolo ha un aspetto molto pulito, ma mostrare più partecipanti evidenzia davvero quanto una discussione sia attiva. Un’opzione per attivarlo o disattivarlo sarebbe fantastica!
Grazie per il tuo ottimo lavoro! Leo
Ciao @Don, ho fatto una piccola modifica personale al tema FKB pro per aggiungere un pulsante flottante di chat in basso a destra per tablet e desktop e in basso a sinistra su mobile, con lo stesso effetto del pulsante “Crea argomento”. Penso che ci sia un modo migliore nel codice, ma funziona:rofl:
Ecco il mio codice componente: css
// 1. PULSANTE FLOTTANTE PRINCIPALE
.header-dropdown-toggle.chat-header-icon {
position: fixed !important;
bottom: 60px !important;
right: 20px !important;
z-index: 9999 !important;
/* Dimensioni perfette (cerchio) */
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
min-height: 60px !important;
border-radius: 50% !important;
/* Colore blu brillante e ombra colorata */
background: #0084ff !important;
box-shadow: 0 4px 14px rgba(0, 132, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
/* Pulizia dei margini */
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
/* Transizione fluida */
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, box-shadow 0.2s ease !important;
}
/* Posizione specifica su Mobile (Schermi <= 640px) */
@media (max-width: 640px) {
.header-dropdown-toggle.chat-header-icon {
bottom: 80px !important;
left: 20px !important; /* Cambia in right: 20px se preferisci rimetterlo a destra */
}
}
/* Effetto al passaggio del mouse (leggero ingrandimento) */
.header-dropdown-toggle.chat-header-icon:hover {
transform: scale(1.08) !important;
box-shadow: 0 6px 20px rgba(0, 132, 255, 0.5), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
/* 2. PULIZIA DEL FONDO GRIGIO NATIVO DISCOURSE */
.header-dropdown-toggle.chat-header-icon .icon,
.header-dropdown-toggle.chat-header-icon span:not(.badge-notification):not(.chat-badge):not([class*="unread"]):not([class*="count"]) {
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* 3. CENTRAGGIO PERFETTO DELL'ICONA (La bolla) */
.header-dropdown-toggle.chat-header-icon .d-icon,
.header-dropdown-toggle.chat-header-icon svg {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 0 !important;
width: 32px !important;
height: 32px !important;
color: #ffffff !important;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1)) !important;
}
/* 4. BADGE DI NOTIFICA (Contatore verde + Numero visibile) */
.header-dropdown-toggle.chat-header-icon .badge-notification,
.header-dropdown-toggle.chat-header-icon .chat-badge,
.header-dropdown-toggle.chat-header-icon .unread-notifications,
.header-dropdown-toggle.chat-header-icon [class*="badge"],
.d-header-icons .header-dropdown-toggle.chat-header-icon .badge-notification {
position: absolute !important;
top: -4px !important;
right: -4px !important;
left: auto !important;
margin: 0 !important;
z-index: 10 !important;
/* Colore verde forzato */
background-color: #53A548 !important;
background: #53A548 !important;
color: #ffffff !important;
/* Tipografia forzata per rendere visibile il numero */
font-size: 13px !important;
font-weight: bold !important;
line-height: 18px !important;
letter-spacing: normal !important;
text-indent: 0 !important;
/* Dimensioni e forma */
padding: 0 6px !important;
min-width: 22px !important;
height: 22px !important;
border-radius: 50px !important;
border: 2px solid #ffffff !important;
box-sizing: border-box !important;
/* Centraggio del numero */
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: visible !important;
/* Animazione Pulse Verde (collegata alle tue keyframes) */
animation: badge-pulse 2s infinite !important;
}
/* Forza tutti gli elementi figli (se Discourse avvolge il numero in uno span) a essere visualizzati */
.header-dropdown-toggle.chat-header-icon .badge-notification *,
.header-dropdown-toggle.chat-header-icon .chat-badge *,
.header-dropdown-toggle.chat-header-icon [class*="badge"] * {
color: #ffffff !important;
background: transparent !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: inherit !important;
}
/* 5. ANIMAZIONI CORRETTE (Effetto Radar & Rimbalzo) */
/* 5.1 - L'onda radar (pulse) attorno al badge rosso */
.header-dropdown-toggle.chat-header-icon .badge-notification,
.header-dropdown-toggle.chat-header-icon .chat-badge,
.header-dropdown-toggle.chat-header-icon .chat-channel-unread-indicator {
animation: badge-pulse 2s infinite !important;
transform-origin: center !important;
}
/* 5.2 - L'effetto di rimbalzo sull'intero pulsante blu quando c'è un messaggio */
.header-dropdown-toggle.chat-header-icon:has(.badge-notification),
.header-dropdown-toggle.chat-header-icon:has(.chat-badge),
.header-dropdown-toggle.chat-header-icon:has(.chat-channel-unread-indicator) {
animation: chat-bounce 3s infinite !important;
}
/* --- DEFINIZIONE DELLE KEYFRAMES (Non modificare) --- */
/* Definizione dell'onda: si utilizza solo box-shadow per evitare bug di visualizzazione */
@keyframes badge-pulse {
0% {
box-shadow: 0 0 0 0 rgba(250, 62, 62, 0.8);
}
70% {
box-shadow: 0 0 0 10px rgba(250, 62, 62, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(250, 62, 62, 0);
}
}
/* Definizione del rimbalzo: il pulsante salta leggermente ogni 3 secondi */
@keyframes chat-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-6px);
}
60% {
transform: translateY(-3px);
}
}
/* 6. PULSAZIONE NELLA LISTA DEI CANALI E MESSAGGI PRIVATI */
/* 6.1 - Si consente il traboccamento sui contenitori di lista */
.chat-channel-row,
.chat-channel-list-item,
.chat-drawer-container .chat-channel-unread-indicator,
.chat-channel-row .chat-channel-unread-indicator {
overflow: visible !important;
}
/* 6.2 - Stile e margini del punto indicatore */
.chat-channel-row .chat-channel-unread-indicator,
.chat-channel-row .badge-notification,
.chat-channel-row .unread-indicator,
.chat-drawer-container .chat-channel-unread-indicator,
.chat-full-page .chat-channel-unread-indicator,
.chat-channel-list-item .chat-channel-unread-indicator {
animation: list-dot-pulse 1.8s infinite !important;
border-radius: 50% !important;
position: relative !important;
overflow: visible !important;
margin: 0 6px !important; /* Spazio per non attaccarsi al testo e alla data */
}
/* 6.3 - Animazione regolata (onda più compatta di max 6px) */
@keyframes list-dot-pulse {
0% {
box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.7); /* Si adatta al colore del punto */
}
70% {
box-shadow: 0 0 0 6px rgba(0, 132, 255, 0); /* Raggio ridotto per restare nella riga */
}
100% {
box-shadow: 0 0 0 0 rgba(0, 132, 255, 0);
}
}
e il JS:
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
let lastScrollTop = 0;
let isHiddenByScroll = false;
// 1. Gestore dello scroll (Attivo SOLO su mobile)
window.addEventListener("scroll", () => {
const isMobile = window.innerWidth <= 640;
const floatBtn = document.querySelector('.header-dropdown-toggle.chat-header-icon');
if (!floatBtn) return;
// Se si è su un computer, ci si assicura che il pulsante rimanga sempre visibile
if (!isMobile) {
if (isHiddenByScroll) {
floatBtn.style.setProperty('transform', 'translateY(0) scale(1)', 'important');
floatBtn.style.setProperty('opacity', '1', 'important');
isHiddenByScroll = false;
}
return;
}
const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Se si fa scroll verso il basso (e si è superato 100px)
if (currentScrollTop > lastScrollTop && currentScrollTop > 100) {
if (!isHiddenByScroll) {
floatBtn.style.setProperty('transform', 'translateY(100px) scale(0.8)', 'important');
floatBtn.style.setProperty('opacity', '0', 'important');
isHiddenByScroll = true;
}
}
// Se si fa scroll verso l'alto
else if (currentScrollTop < lastScrollTop) {
if (isHiddenByScroll) {
floatBtn.style.setProperty('transform', 'translateY(0) scale(1)', 'important');
floatBtn.style.setProperty('opacity', '1', 'important');
isHiddenByScroll = false;
}
}
lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
}, { passive: true });
// 2. MutationObserver per gestire la visualizzazione di base
const observer = new MutationObserver(() => {
const chatOpen = document.querySelector('.chat-drawer, .d-chat-floating-panel, .chat-widget, .chat-panel, .chat-out-of-container, .chat-full-page');
const isChatRoute = window.location.pathname.startsWith('/chat');
const hasFullPageClass = document.body.classList.contains('has-full-page-chat');
const isMobile = window.innerWidth <= 640;
const isTopicRoute = window.location.pathname.includes('/t/') || document.body.classList.contains('archetype-regular');
const hideOnMobileTopic = isMobile && isTopicRoute;
const floatBtn = document.querySelector('.header-dropdown-toggle.chat-header-icon');
if (floatBtn) {
if (chatOpen || isChatRoute || hasFullPageClass || hideOnMobileTopic) {
floatBtn.style.setProperty('display', 'none', 'important');
} else {
floatBtn.style.setProperty('display', 'flex', 'important');
// Gestione pulita della posizione mobile / desktop
if (isMobile) {
floatBtn.style.setProperty('left', '10px', 'important'); // Cambia il valore se vuoi spostarlo di più
floatBtn.style.removeProperty('right');
} else {
floatBtn.style.setProperty('right', '20px', 'important');
floatBtn.style.removeProperty('left');
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true, attributes: true });
});