Pagine demo

Dashboard Club
Pagina Forum
Pagina Forum con sottoforum
Pagina singolo topic
Pagina elenco corsi
Pagina webinar
Pagina corso singolo
Pagina lezione corso
Pagina argomento corso
Pagina radio

Header e menu gia' stampati

In questa pagina l'Header, il menu a sinistra e il menu a sinistra piccolo sono renderizzati ridefinendo in questo template i block slot_cb_header, slot_cb_menu_left, slot_cb_menu_left_small del base/base.html, con i componenti cb_header.html, cb_menu_left.html, cb_menu_left_small.html. I fogli CSS di quei componenti sono sempre collegati dal base; il corpo della pagina sta nel block site_main_inner. L’archetipo cbpagina_community (sei slot slot_cb_* + layout a colonne) è su /community/; testo aggiuntivo sulla stessa struttura: demo archetipo.

Layout base

• page_title: titolo pagina (il block title ha priorità).
• page_description: meta description opzionale.
• Chrome opzionale tramite i block slot_cb_header, slot_cb_menu_left, slot_cb_menu_left_small (vuoti lasciano solo il <main>).
• Corpo in <main>: block site_main_inner (non esiste content).
• Blocchi head/body: title, extra_css, extra_js.

Componente cb_header

• cb_header_logo_img, cb_header_logo_alt, cb_header_logo_secondary_img, cb_header_logo_secondary_alt.
• cb_left_menu_logo_url, cb_left_menu_logo_img, cb_left_menu_logo_alt.
• cb_header_search_url e cb_header_search_placeholder.
• cb_left_menu_items: abilita bottone apertura menu sinistro.
• cb_header_right_items: lista items renderizzata da cb_header_right_item.html.

Componente cb_header_right_item

• attributes_div: attributi wrapper del singolo item.
• link: href del link (default #).
• titolo: title/aria-label del link.
• icona: classi icona (tipi icona/badge/testo+icona).
• badge_count: se presente usa tipo "icona con badge".
• url_immagine: se presente usa tipo "immagine".
• testo + icona_prima: tipo "testo + icona".
• dropdown_type: notifiche o utente.
• dropdown_params: parametri passati al dropdown specifico.
• dropdown_wrapper_classes: classi wrapper quando c'e' dropdown (default dropdown).

Componente cb_header_dropdown_notifiche

• dropdown_params.dropdown_content_attrs: attributi extra contenitore dropdown.
• dropdown_params.notification_settings_link: link impostazioni notifiche.
• dropdown_params.notifications: lista notifiche con campi text, link, is_new, date_notified.
• dropdown_params.notifications_all_url: link "Visualizza tutte le notifiche".

Componente cb_header_dropdown_utente

• dropdown_params.dropdown_content_attrs: attributi extra contenitore dropdown.
• dropdown_params.menu_items: lista voci con link, titolo, classe_icona.
• dropdown_params.change_society_kind_form_action: se presente mostra il form "Tipo di associazione".
• dropdown_params.current_society_kind: valore selezionato nel form (ASD/ETS).
• dropdown_params.show_info_footer: mostra footer info.
• dropdown_params.iubenda_policy_link, dropdown_params.iubenda_cookie_policy_link: opzionali per blocco privacy/cookie.

Componente cb_menu_left

• cb_left_menu_logo_url, cb_left_menu_logo_img, cb_left_menu_logo_alt.
• cb_left_menu_items: lista item renderizzata via cb_menu_left_item.html.

Componente cb_menu_left_item

• type: "link_class": usa url, text, icon_class; opzionali submenu, li_classes, li_attrs, id, title.
• type: "link_style": usa url, text, icon_style; opzionali come sopra.
• type: "custom": usa li_classes, li_attrs e contenuto da content_html/content_text/content.
• type: "sep": stampa <li class="sep"></li>.
• type: "title": stampa <li class="title"></li>.

Componente cb_menu_left_small

• cb_menu_left_small_items: lista oggetti con url, text, icon_class.

Componente cb_topic_block

• add_classes: classi extra (es. search, full) che cambiano varianti/layout.
• topic_link, topic_id: permalink e id del topic (usati anche da azioni share/stats).
• votes: numero voti; in variante search appare come testo in basso.
• forum_icon_style, forum_link, forum_id, forum_title: metadati forum (icona opzionale).
• topic_date, author_link, author_name, level_info_txt, cb_products_icons: info autore e metadata (lista icone prodotto: kind/title/text).
• tag_label, tag_class: badge opzionale del topic.
• topic_title, topic_content: titolo e contenuto (in search il contenuto non viene mostrato).
• show_views, views, comments_count: contatori in bottom bar.
• subscripted: opzionale, in variante full abilita stato campanella subscribe.

Esempio completo con tutti i parametri principali passati al componente:

Esempio variante con add_classes="search":

Esempio variante search per risultati di ricerca di articoli del blog e corsi: basta non passare element.forum e element.author (in alto rimane solo la data, titolo; in basso solo il numero di commenti).

Esempio variante search per risultato forum: in alto data e autore (nessuna riga icona+titolo forum: omettere element.forum.icon_style), titolo, in basso voti (show_votes=True) e numero post (element.posts_count); show_views=False, niente comments_count.

Risultato ricerca commento (nessuna modifica al componente): add_classes="search reply"; in alto element.forum con icon_style, element.date e element.author del topic, titolo del topic in element.title, corpo del commento in element.inner_content (author con avatar_style e name, date, content, votes per la riga voti interna al box), in basso voti e commenti del topic (show_votes, element.votes, element.comments_count).

Esempio senza forum_icon_style:

Esempio con add_classes="azure": solo metadati essenziali (data, autore, titolo, testo), show_views=False, niente comments_count, voti disattivati con show_votes=False e contatore posts_count in basso:

Componente cb_comment_form

• hidden_fields: lista campi hidden (opz.).
• show_edit_user: mostra selettore utente (opz.).
• user: oggetto utente per la label (usato solo se show_edit_user).

Componente cb_comments

• cb_comments: lista commenti; ogni commento supporta id, status, author (name, level, avatar_url, products_icons), date, content, children (opz.).
• add_classes: classi CSS extra wrapper (opz.).

Mario Rossi 4 ore fa

Socio Gold SP S

Questo è un commento di esempio per il componente cb_comments.

• Elemento 1
• Elemento 2
• Elemento 3

Questo è un commento di esempio per il componente cb_comments.

1. Elemento 1
2. Elemento 2
3. Elemento 3

0

Rispondi

Giulia Bianchi 2 ore fa

Socio S

Risposta annidata di esempio.

0

Rispondi

Luca Verdi 1 ora fa

Socio S

Risposta annidata di esempio 2.

0

Rispondi

Componente cb_pagination

• page: oggetto pagina Django (obbligatorio, es. Page da Paginator).
• max_visible_before: quante pagine mostrare prima della corrente (default 3).
• max_visible_after: quante pagine mostrare dopo la corrente (default 3).
• Uso base: {% cb_pagination page %}.

Esempio paginazione con pagina corrente gestita da ?page=:

Componente cb_button

• link: href del bottone (obbligatorio).
• text: testo visibile del bottone.
• add_classes: classi extra per varianti colore/stile (es. white, red, yellow, blue).
• title: title accessibilita (se omesso usa text).
• attributes: attributi HTML extra sul tag <a> (es. target, data-*).

Esempi con vari colori:

Pulsante normale Pulsante normale con icona

Pulsante bianco Pulsante bianco con icona

Pulsante rosso Pulsante rosso con icona

Pulsante rosso scuro Pulsante rosso scuro con icona

Pulsante rosso extra scuro Pulsante rosso extra scuro con icona

Pulsante giallo Pulsante giallo con icona

Pulsante arancio Pulsante arancio con icona

Pulsante blu Pulsante blu con icona

Pulsante blu scuro Pulsante blu scuro con icona

Pulsante verde Pulsante verde con icona

Pulsante verde scuro Pulsante verde scuro con icona

Pulsante verde extra scuro Pulsante verde extra scuro con icona

Componente cb_right_col_block

• title: titolo opzionale del blocco (se presente aggiunge classe with-title).
• title_tag: tag HTML del titolo (default h2).
• add_classes: classi CSS extra del wrapper.
• elements: lista elementi renderizzati da cb_right_col_block_element.html.
• Tipi supportati via element.kind: button, text, link, link_with_icon, link_with_image, text_with_icon, text_2_columns, separator, rating, search_result.
• Campi usati (dipende dal tipo): text, link, icon, image, title, add_classes, columns, top_text, bottom_text (per search_result).

Componente cb_review_link / cb_review_dialog

• kind: link o button.
• button_txt: testo del link/bottone.
• action: action del form (default #).

Esempio link:

Esempio button:

Componente cb_top_message

• add_classes: variante visiva del messaggio (es. red, yellow, azure).
• label: etichetta opzionale in alto a sinistra (abilita classe with-label).
• left_elements: array di HTML (stringhe) per colonna sinistra.
• left_elements_classes: classi extra della colonna sinistra.
• right_elements_classes: classi extra della colonna destra (es. big-top).
• right_elements.top_elements: array di HTML (stringhe) mostrato nella parte alta destra.
• right_elements.bottom_elements: lista elementi in basso renderizzati da cb_top_message_right_bottom_element.html.
• bottom_elements_align: allineamento area bottom (space-between, center, right, left).

Esempio rosso con label, immagine a sinistra e CTA a destra:

Novita importante

Prevendita nuovo libro.

Fino al 31 gennaio le spese di spedizione sono gratuite.

Acquista ora

Esempio giallo con contenuto testuale in alto a destra:

Esempio azzurro con testo informativo in alto a destra:

Componente cb_calendar

• events_url: URL per GET ?start=&end= (date inclusive).
• initial_view: day, week, month, agenda (default week).
• initial_date: opzionale, YYYY-MM-DD.
• locale: opzionale (default it-IT) per Intl.
• Agenda: intervallo mese intero del giorno di ancoraggio (fetch e titolo); in elenco compaiono solo i giorni con almeno un evento. Prev/Next come la vista mese.

GET {events_url}?start=YYYY-MM-DD&end=YYYY-MM-DD

Risposta 200:
{
"events": [
  {
    "id": "string|number",
    "title": "string",
    "start": "YYYY-MM-DDTHH:mm:ss oppure YYYY-MM-DD",
    "end": "YYYY-MM-DDTHH:mm:ss oppure YYYY-MM-DD",
    "all_day": false,
    "color": "#hex o nome CSS"
  }
]
}

Componente cb_menu_courses

• Ogni voce supporta: url, title, icon_class, li_classes (opz.), kind (→ data-kind), page_title (→ data-page-title), submenu (opz., lista voci secondarie).
• Ogni voce in submenu supporta gli stessi campi della voce principale tranne icon_class

Componente cb_course_block

• course: oggetto corso (id, link, image, title, duration, info_class/info_text, categories opz.).
• show_moderator_info: se true mostra views e comments_count.

Componente cb_course_contents

• elements: lista di blocchi corso.
• Opzionali: bottom_link, bottom_link_text (link in basso).
• Ogni blocco supporta: title, title_tag (opz., default h2), children (lista contenuti).
• Ogni contenuto supporta: title, link, duration (opz.), tag (opz., default h4), children (opz., nidificazione).

Esempio con titolo corso, descrizione, lezioni e quiz.

Riparto

Esempio versione compatta con lezioni e quiz (da usare nella sidebar).

Componente cb_lesson_progress

• elements: lista elementi progresso; ogni elemento supporta title, link, icon (opz., default ion-checkmark-circled).

Esempio usando i capitoli di "Sezione 2 - Il nuovo mondo":

Componente cb_course_progress_bar

• completed: numero lezioni completate.
• total: numero lezioni totali.
• completed_percentage: percentuale completamento (0–100) usata per la width.

Esempio barra progresso:

Componente cb_course_actions

• actions_left: lista azioni a sinistra (bottoni).
• actions_right: lista azioni a destra (bottoni).
• Ogni azione supporta: text, link, add_classes (opz.), attributes (opz., stringa attributi HTML).

Componente cb_radio_block

• radio: oggetto radio (id, link, image, duration, date, avg_votes, votes, title, views).
• show_views: se true mostra le visualizzazioni.

Componente cb_events_table

• events: lista eventi; ogni evento usa date (date/datetime), start_time, title, place_name, place_address, url, opz. more_info_url, enrolled, status.
• event_format: 3_columns o 2_columns (gestito da cb_event_row.html).

Esempio con event_format="3_columns":

Esempio con event_format="2_columns":

Componente cb_tabs

• tabs: lista di tab con name, url, opz. link_attributes.
• Imposta un tab attivo passando link_classes='active' ad un solo elemento.

• Panoramica
• Dettagli
• FAQ

Componente cb_field

• field.type: text o select.
• field.name, field.value, field.placeholder (per text).
• field.id, field.choices (per select).

Esempio select:

Esempio text:

Esempio text con label:

Componente cb_on_off

• field_name, input_id (per collegare il toggle ai checkbox).
• checked: stato iniziale; value / no_value (default yes / no).
• unchecked_text, checked_text (default NO / SI).
• disabled, check_all / reverse_check_all (opz., mutuamente esclusivi in tabella).

Esempio attivo (on):

Esempio spento (off):

Esempio disabilitato:

Componente cb_table

• colgroups: lista oggetti colonna; ogni elemento può avere width (es. 120) oppure nessuna chiave per colonna fluida.
• headers: lista header (dict con text e opz. icon classe Ion).
• rows: lista righe; ogni riga è una lista di celle con content (testo o HTML sicuro), class, opz. attributes stringa di attributi HTML (es. colspan="3"; nel template viene usato |safe così le virgolette non vanno in escape — usare solo dati fidati).
• Nelle celle si possono includere toggle cb_on_off; check_all / reverse_check_all applicano la logica colonna definita in cb_on_off.js (nella demo notifiche l’ultima riga usa reverse_check_all).

Esempio tabella impostazioni notifiche (dati in views.py):

Esempio tabella notifiche (table-notifications): checkbox “seleziona tutte” in intestazione, testo notifica con area mobile (data + azioni), colonna data e colonna azioni con bottoni icona.

Esempio tabella iscrizioni (table-subscriptions, senza colgroup/headers; prima riga con check_all sulla terza colonna; dalla seconda riga data anche sotto al link e colonna data con classe date):

Componente cb_form

• action, method (POST), fields: lista oggetti per cb_field.
• hidden_fields, left_button (opz.), submit_text per il pulsante invio.

Esempio profilo con testi, select, campo testo disabilitato e select disabilitata; submit Salva:

Componente cb_separator

• text: testo opzionale del separatore.

Componente cb_webinar_top

• title, date, categories (lista stringhe), presenter (name, image).

Webinar demo: Strategie pratiche

Data: 09 Giu 2026

Categorie: Strategia, Marketing

Damiano Dalerba

Componente cb_webinar_info

• tags (lista stringhe), duration, bonus_url (opz.), slides_url.

Componente cb_webinar_content

• content: HTML trusted.

Componente cb_webinar_comments

• Include: cb_separator, cb_comment_form, cb_comments.
• webinar_comments_hidden_fields, webinar_comments_show_edit_user, webinar_comments_user, webinar_comments_text, webinar_comments.

---

Commenti

Commenta

Mario Rossi 3 ore fa

Socio Gold

Webinar molto utile, grazie!

0

Rispondi

Giulia Bianchi 1 ora fa

Socio

Interessante la parte sulle metriche.

0

Rispondi

Componente cb_webinar_related_webinars

• webinars: lista corsi (usa cb_course_block).
• show_moderator_info: opz.

Componente cb_top_bar

• cover_image_url: immagine di copertina (background del top) (opz.).
• top_icon_url: icona rotonda sovrapposta alla cover (opz.). Sulle pagine topic si può passare solo questo (senza info): banda superiore + icona, niente blocco titolo/sottotitolo.
• add_classes: classi extra sul wrapper cover (.top-img) (opz.).
• info: oggetto principale (opz.). Campi supportati:
  • info.icon_url: URL immagine tonda (obbligatorio se info esiste).
  • info.icon_zoomable: se true rende l’icona cliccabile (anchor sopra l’immagine) (opz.).
  • info.title: titolo (testo o link).
  • info.title_link: se presente il titolo diventa un link (opz.).
  • info.title_target: target del link titolo (default _blank) (opz.).
  • info.small_text: testo piccolo accanto al titolo (opz.).
  • info.subtitle: sottotitolo (es. nome community).
  • info.button: CTA a destra (opz.). Struttura compatibile con cb_button:
    • info.button.link: href.
    • info.button.text: testo bottone.
    • info.button.add_classes: classi variante colore (es. dark-green, gray) e icone Ion (es. ion-compose).
    • info.button.title: title accessibilità (opz.).
    • info.button.attributes: attributi extra (stringa o dict) (opz.).
  • info.menu: lista voci menu (opz.). Se presente aggiunge with-menu al wrapper e renderizza menu desktop/mobile. Ogni voce: url, title, class (opz.), icon (classe icona). Sottomenu opzionale: submenu con elementi url, title, class.

Esempio forum senza immagine di copertina:

Esempio pagina topic: solo top_icon_url (icona forum, senza info). Si usa only così non entrano variabili dal contesto padre.

Esempio pagina profilo utente: cover_image_url, info con avatar zoomabile, titolo con link, menu con sottomenu.

Componente cb_drag_and_drop

• drag_and_drop_attrs: stringa attributi per .cb-drag-and-drop (es. data-url e qualsiasi data-*).
• accept: accept dell’input file (opz.).
• cb_drag_and_drop_bottom_info: lista di link/testo sotto al box (opz.).

Esempio drag & drop (upload demo):