Identifie les styles personnalisés

Les styles personnalisés sont appliqués par le biais d’un objet injecté dans le constructeur Sidenotes.

Les "clés" sont des clés d’objet qui représentent des éléments DOM, tandis que les "propriétés" sont des propriétés CSS prises en charge pour la clé particulière. Par exemple, pour personnaliser le style de blockBtn (qui est le bouton qui lance la fenêtre contextuelle Sidenotes), vous devez créer un objet tel que :

var styles = { 
   'blockBtn': { 
      'fontColor': '#555', 
      'fontSize': '18px' 
   } 
}; 
new Livefyre.Sidenotes({ 
   customStyles: styles, 
      ...  
})
Clé Propriétés Description
anonymousAvatar "hauteur", "largeur" Image d’avatar anonyme, à gauche de l’éditeur de zone de texte.
blockBtn "fontColor", "fontSize", "left", "position", "right", "top" "Icône de lancement" placée en regard des éléments spécifiés comme pouvant être mis à part.
blockBtnActive "fontColor", "fontSize", "left", "position", "right", "top" Icône du lanceur lorsque l’état est principal.
commentAvatar "hauteur", "largeur" Image d’avatar à gauche des notes de niveau supérieur.
commentBody "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Corps de texte des notes liées.
commentDisplayName "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Nom d’affichage de l’utilisateur qui a laissé une note.
commentDownvote "fontColor", "fontSize" Bouton Télévoter sur une note.
commentReplyExpand "BackgroundColor", "borderColor", "borderWidth", "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Bouton permettant d’étendre les threads avec un grand nombre de réponses.
commentTags "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Balises relatives à un utilisateur sur une note.
commentUpvote "fontColor", "fontSize" Bouton Mettre à jour sur une note.
editorTextarea "height", "width", "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Zone de saisie de zone de texte pour les notes de fin.
mediaBlockBtn "fontColor", "fontSize", "left", "position", "right", "top" Icône du lanceur de médias lorsqu’il se trouve au-dessus d’un élément multimédia (image, vidéo).
mediaBlockBtnActive "fontColor", "fontSize", "left", "position", "right", "top" Icône du lanceur de médias dans un état principal.
numSidenotes "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight", "BackgroundColor", "borderColor", "borderWidth", "height", "width" Bouton cliquable qui affiche le nombre de Sidenotes dans la collection.
numSidenotesPopover "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight", "BackgroundColor", "borderColor", "borderWidth", "height", "width" Popover avec une brève explication des Sidenotes pour l’utilisateur.
popover "BackgroundColor" Popup qui est affiché lorsque l’icône de lancement est appelée.
popoverArrowLeft "BackgroundImage", "height", "left", "right", "top", "width" Elément flèche gauche sur la fenêtre contextuelle qui pointe vers l’élément DOM contenant une icône de lancement.
popoverArrorRight "BackgroundImage", "height", "left", "right", "top", "width" Elément de flèche vers la droite sur la fenêtre contextuelle qui pointe vers l’élément DOM contenant une icône de lancement.
popoverArrowTop "BackgroundImage", "height", "left", "right", "top", "width" Elément flèche supérieure sur la fenêtre contextuelle qui pointe vers l’élément DOM contenant une icône de lancement.
replyAvatar "hauteur", "largeur" Image d’avatar à gauche des notes de niveau réponse.
streamPoweredBy "BackgroundColor", "borderColor", "lineHeight" Pied de page "Powered by" sur la fenêtre contextuelle.
streamQueueButton "BackgroundColor", "borderColor", "borderWidth", "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Bouton pour indiquer quand les nouvelles notes se propagent dans une fenêtre contextuelle ouverte.
userAvatar "hauteur", "largeur" L’avatar de l’utilisateur authentifié, à gauche de l’éditeur de zone de texte.

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now