Note Stili personalizzati

Gli stili personalizzati vengono applicati attraverso un oggetto inserito nel costruttore Sidenotes.

Le "chiavi" sono chiavi oggetto che rappresentano elementi DOM, mentre le "proprietà" sono proprietà CSS supportate per la chiave specifica. Ad esempio, per personalizzare lo stile del blockBtn (che è il pulsante che avvia il puntatore Note a margine), si crea un oggetto come:

var styles = { 
   'blockBtn': { 
      'fontColor': '#555', 
      'fontSize': '18px' 
   } 
}; 
new Livefyre.Sidenotes({ 
   customStyles: styles, 
      ...  
})
Chiave Proprietà Descrizione
anonymousAvatar "height", "width" Immagine avatar anonima, a sinistra dell'editor dell'area di testo.
blockBtn "fontColor", "fontSize", "left", "position", "right", "top" L’"icona del lanciatore" posta accanto agli elementi specificati come separabili.
blockBtnActive "fontColor", "fontSize", "left", "position", "right", "top" Icona di avvio quando è in uno stato attivo.
commentAvatar "height", "width" Immagine avatar a sinistra delle note di livello superiore.
commentBody "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Corpo del testo delle note filettate.
commentDisplayName "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Visualizza il nome dell'utente che ha lasciato una nota.
commentDownvote "fontColor", "fontSize" Pulsante di voto su una nota.
commentReplyExpand "backgroundColor", "borderColor", "borderWidth", "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Pulsante per espandere i thread con un numero elevato di risposte.
commentTags "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Tag relativi a un utente su una nota.
commentUpvote "fontColor", "fontSize" Pulsante di voto su una nota.
editorTextarea "height", "width", "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Casella di immissione area di testo per lasciare le note.
mediaBlockBtn "fontColor", "fontSize", "left", "position", "right", "top" Icona del modulo di avvio multimediale quando è sopra un elemento multimediale (img, video).
mediaBlockBtnActive "fontColor", "fontSize", "left", "position", "right", "top" Icona del modulo di avvio multimediale in uno stato attivo.
numSidenotes "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight", "backgroundColor", "borderColor", "borderWidth", "height", "width" Pulsante selezionabile che mostra il numero di note nella raccolta.
numSidenotesPopover "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight", "backgroundColor", "borderColor", "borderWidth", "height", "width" Popover con una breve spiegazione di Note a margine per l'utente.
popover "backgroundColor" Pover che viene visualizzato quando viene richiamata l’icona del lanciatore.
popoverArrowLeft "backgroundImage", "height", "left", "right", "top", "width" Elemento freccia a sinistra sul puntatore che punta all’elemento DOM contenente un’icona di avvio.
popoverArrorRight "backgroundImage", "height", "left", "right", "top", "width" Elemento freccia a destra sul puntatore che punta all’elemento DOM contenente un’icona di avvio.
popoverArrowTop "backgroundImage", "height", "left", "right", "top", "width" Elemento freccia in alto sul puntatore che punta all’elemento DOM contenente un’icona di avvio.
replyAvatar "height", "width" Immagine avatar a sinistra delle note del livello di risposta.
streamPoweredBy "backgroundColor", "borderColor", "lineHeight" Piè di pagina "Powered by" sul pover.
streamQueueButton "backgroundColor", "borderColor", "borderWidth", "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Pulsante per indicare quando le nuove note scorrono in un pover aperto.
userAvatar "height", "width" Immagine avatar dell’utente autenticata, a sinistra dell’editor dell’area di testo.

In questa pagina