Utilizza le classi CSS disponibili per personalizzare la visualizzazione delle app.
Disponibile per Chat, Commenti, Live Blog, Recensioni e Note a margine.
Utilizza i CSS per personalizzare le app Livefyre per un’integrazione più completa con la pagina, semplicemente ignorando i CSS app predefiniti con il tuo foglio di stile. Questa sezione descrive le personalizzazioni CSS disponibili.
Utilizza queste classi per modificare l'interfaccia dell'editor post.
Classe | Descrizione |
---|---|
.fyre-comment-count | Testo che visualizza il numero di commenti. |
.fyre-login-bar | Il riquadro di delimitazione contenente la barra di accesso e le opzioni. |
.fyre-live-container | Il riquadro che delimita il numero di persone che ascoltano e i loro avatar. |
.fyre-editor | Il riquadro di delimitazione intorno a .fyre-login-bar, .fyre-live-container e l'area di testo in cui gli utenti scrivono i loro commenti. |
.fyre-stream-sort | Il riquadro di delimitazione intorno alle opzioni di ordinamento. |
Puoi anche modificare gli stili nella configurazione dell’app stessa, incluso il colore di sfondo del campo dell’editor, nonché il colore del font, le dimensioni e la famiglia del testo che appare all’interno dell’editor.
Per personalizzare l’editor dei commenti, aggiungi l’oggetto editorCss:{} a fyre.conv.load() e includi lo stile desiderato. Ad esempio, per aggiornare l’editor con il CSS personalizzato:
fyre.conv.load(networkConfig, [{
siteId: LF_siteId,
el: 'livefyre',
articleId: LF_articleId,
collectionMeta: #CollectionMeta
editorCss: {
background: '#ccc',
color: 'red',
font: '30px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif'
}
}]);
Classe | Descrizione |
---|---|
.fyre-stream-sort | Tutte le opzioni di ordinamento div. |
.fyre-stream-sort-newest | Opzione "Più recente". |
.fyre-stream-sort-dest | Opzione "Oldest". |
.fyre-stream-sort-bar | La barra di separazione tra le opzioni. |
.fyre-stream-sort-selected | L’opzione di ordinamento attualmente selezionata. |
Struttura HTML:
<div class="fyre-stream-sort">
<a href="#" class="fyre-stream-sort-newest fyre-stream-sort-selected">Newest</a>
<span class="fyre-stream-sort-bar"> | </span>
<a href="#" class="fyre-stream-sort-oldest">Oldest</a>
</div>
Nascondere il simbolo "|" separando le opzioni di ordinamento.
.fyre-stream-sort .fyre-stream-sort-bar {
display: none !important;
}
Classe | Descrizione |
---|---|
.fyre-comment-author-tag- custom tag name |
Livefyre creerà una classe CSS in questo formato per ogni tag utente aggiunto tramite Livefyre’s Studio, Sincronizzazione profilo. Questa classe può essere utilizzata per formattare lo sfondo per qualsiasi contenuto pubblicato dagli account utente, incluso quel tag. |
.fyre-tag-content-icon- tag name |
Livefyre creerà una classe CSS in questo formato per ogni tag di contenuto aggiunto tramite Livefyre Studio. Questa classe può essere utilizzata per assegnare uno stile a qualsiasi contenuto al quale è stato aggiunto il tag . |
.fyre-comment-user | Il riquadro di delimitazione contenente l'immagine del profilo utente. |
.fyre-comment-username | Nome utente. |
.fyre-moderator | Il riquadro di delimitazione del moderatore. |
.fyre-comment | Casella di collegamento intorno al testo o al collegamento del commento. |
.fyre-comment-article | Il riquadro di delimitazione per l’intero contenuto del commento. |
.fyre-comment-date | Il tag associato all’elemento "tempo dal momento della pubblicazione". |
.fyre-comment-media | Il riquadro di delimitazione intorno al contenuto multimediale. |
.fyre-comment-actions | Il riquadro di delimitazione delle azioni disponibili per un commento. |
.fyre-comment-like | Il riquadro di delimitazione intorno al collegamento "Mi piace". |
.fyre-comment-response | Il riquadro di delimitazione intorno al collegamento "Risposta". |
Tutte le classi CSS Commento possono essere applicate anche al contenuto in primo piano.
Classe | Descrizione |
---|---|
.fyre-featured-content-wrapper | Il div contenitore per il lettore. |
.fyre-featured-header | Barra del titolo iniziale. |
.fyre-featured-header-icon | Icona della fresa dell’intestazione. |
.fyre-featured-title | Testo dell’intestazione. |
.fyre-featured-body | Il div contenitore per il contenuto in primo piano nel lettore. |
.fyre-featured-quote | Icona che inizia ogni elemento di contenuto. |
Tutte le classi CSS di contenuto possono essere applicate anche al contenuto archiviato.
Classe | Descrizione |
---|---|
.fyre-archive-stream-title | Testo "Dall’archivio". |
.fyre-archive-stream-title-icon | Logo dell’intestazione "Dall’archivio". |
Queste classi ti consentono di personalizzare il modulo di notifica dei commenti Livefyre.
Classe | Descrizione |
---|---|
.fyre-notificazione | Il div per la voce di elenco (sia contenuto nuovo che contenuto di archivio). |
.fyre-notificfier | Il wrapper per il contenuto del notificatore. |
.fyre-notificfier-archive | Il wrapper per tutti i nuovi contenuti diversi dal post più recente. |
.fyre-notificfier-avatar | L'immagine per l'avatar. |
.fyre-notificfier-avatar-container | Il div contenitore per l'avatar utente. Consente di definire il posizionamento. |
.fyre-notificfier-avatar-shading | Ombreggiatura per l'avatar div. |
.fyre-notificfier-banner | Contenitore per il contenuto di anteprima del notificatore, che visualizza l’avatar utente e uno snippet di contenuto per l’elemento pubblicato più di recente. |
.fyre-notificfier-base | Contenitore per la parte informativa del componente di notifica, in cui sono elencati il numero di nuovi commenti, la didascalia del componente di avviso e il pulsante Chiudi. |
.fyre-notificfier-base-close | Il div del contenitore per il pulsante di chiusura (x) per il componente di notifica. |
.fyre-notificfier-base-shadow | Ombreggiatura della base del notificatore. |
.fyre-notificfier-caption | Testo visualizzato per il notificatore. "Nuovi commenti" per impostazione predefinita. |
.fyre-notificfier-close | Pulsante che chiude il notificatore. |
.fyre-notificfier-container | Il contenitore del componente di notifica include sia il banner che la base. |
.fyre-notificfier-counter | Contenitore del numero elencato nel modulo di notifica. |
.fyre-notificfier-list | Il contenitore per il contenuto più recente. |
.fyre-notificfier-message | I primi circa 30 caratteri del contenuto visualizzato. |
.fyre-notificfier-message-container | Il div contenitore per il messaggio di intestazione. |