Utilisez les classes CSS disponibles pour personnaliser l’affichage de vos applications.
Disponible pour la discussion, les commentaires, le blog en direct, les commentaires et les identifiants.
Utilisez le format CSS pour personnaliser vos applications Livefyre afin de bénéficier d’une intégration plus complète à votre page, en remplaçant simplement l’application CSS par défaut par votre propre feuille de style. Cette section décrit les personnalisations CSS disponibles.
Utilisez ces classes pour modifier l’interface de l’éditeur de publication.
Classe | Description |
---|---|
.fyre-comment-count | Texte présentant le nombre de commentaires. |
.fyre-login-bar | Cadre de sélection contenant la barre de connexion et les options. |
.fyre-live-conteneur | Le cadre de sélection autour du nombre de personnes qui écoutent et leurs avatars. |
.fyre-editor | Cadre de sélection autour de la barre de connexion .fyre, .fyre-live-conteneur et de la zone de texte dans laquelle les utilisateurs écrivent leurs commentaires. |
.fyre-stream-sort | Cadre de sélection autour des options de tri. |
Vous pouvez également modifier les styles dans la configuration de l’application elle-même, y compris la couleur d’arrière-plan du champ de l’éditeur, ainsi que la couleur, la taille et la famille de la police du texte qui s’affiche dans l’éditeur.
Pour personnaliser l’éditeur de commentaires, ajoutez l’objet editorCss:{} à fyre.conv.load() et incluez le style de votre choix. Par exemple, pour mettre à jour l’éditeur avec votre page CSS personnalisée :
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 | Description |
---|---|
.fyre-stream-sort | Toutes les options de tri div. |
.fyre-stream-sort-newest | L’option "Plus récent". |
.fyre-stream-sort-plus ancien | L’option "Plus ancien". |
.fyre-stream-sort-bar | Barre de séparation entre les options. |
.fyre-stream-sort-selected | Option de tri actuellement sélectionnée. |
Structure 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>
Masquez l’icône "|" qui sépare les options de tri.
.fyre-stream-sort .fyre-stream-sort-bar {
display: none !important;
}
Classe | Description |
---|---|
.fyre-comment-author-tag- custom tag name |
Livefyre va créer une classe CSS dans ce format pour chaque balise d'utilisateur ajoutée via Livefyre's Studio, Profil Sync. Cette classe peut être utilisée pour mettre en forme l’arrière-plan de tout contenu publié par les comptes d’utilisateurs, y compris cette balise. |
.fyre-tag-content-icon- tag name |
Livefyre va créer une classe CSS dans ce format pour chaque balise de contenu ajoutée via Livefyre Studio. Cette classe peut être utilisée pour mettre en forme tout contenu auquel vous avez ajouté la balise . |
.fyre-comment-user | Cadre de sélection contenant l’image du profil utilisateur. |
.fyre-comment-nom-utilisateur | Nom d’utilisateur. |
.fyre-modérator | Cadre de sélection du modérateur. |
.fyre-commentaire | Cadre de sélection autour du texte/lien du commentaire. |
.fyre-commentaire-article | Cadre de sélection pour l’ensemble du contenu du commentaire. |
.fyre-comment-date | Balise associée à l’élément "Heure depuis la publication". |
.fyre-comment-media | Cadre de sélection autour du contenu multimédia. |
.fyre-comment-actions | Cadre de sélection entourant les actions disponibles à effectuer sur un commentaire. |
.fyre-comment-like | Cadre de sélection autour du lien "J’aime". |
.fyre-commentaire-réponse | Cadre de sélection autour du lien "Répondre". |
Toutes les classes CSS Comment peuvent également être appliquées au contenu proposé.
Classe | Description |
---|---|
.fyre-featured-content-wrapper | Le conteneur div pour le lecteur. |
.fyre-featured-header | Barre de titre en haut. |
.fyre-featured-header-icon | Icône Quill de l’en-tête. |
.fyre-featured-title | Texte de l’en-tête. |
.fyre-featured-body | Div conteneur du contenu incitatif dans le lecteur. |
.fyre-featured-quote | Icône de devis qui commence chaque élément de contenu. |
Toutes les classes CSS de contenu peuvent également être appliquées au contenu archivé.
Classe | Description |
---|---|
.fyre-archive-stream-title | Texte "De l'archive". |
.fyre-archive-stream-title-icon | Logo de l'en-tête "De l'archive". |
Ces classes vous permettent de personnaliser l'utilitaire de notification des commentaires Livefyre.
Classe | Description |
---|---|
.fyre-notification | Div pour l’élément de liste (contenu nouveau et d’archive). |
.fyre-notifiant | Enveloppe du contenu du notificateur. |
.fyre-notifiant-archive | wrapper pour tout nouveau contenu autre que la publication la plus récente. |
.fyre-notifiant-avatar | Image de l’avatar. |
.fyre-notifiant-avatar-conteneur | Div conteneur de l’avatar de l’utilisateur. Permet de définir le positionnement. |
.fyre-notifiant-avatar-shading | L'ombrage de l'avatar div. |
.fyre-notifiant-bannière | Conteneur du contenu de la prévisualisation du notificateur, qui affiche l’avatar de l’utilisateur et un extrait de contenu pour le dernier élément publié. |
.fyre-notifiant-base | Conteneur de la partie d’informations du notificateur, qui liste le nombre de nouveaux commentaires, la légende du notificateur et le bouton de fermeture. |
.fyre-notifiant-base-close | Div conteneur du bouton de fermeture (x) de l'utilitaire de notification. |
.fyre-notifiant-base-shadow | Ombrage de la base du notificateur. |
.fyre-notifiant-caption | Texte affiché pour le notifiant. "Nouveaux commentaires" par défaut. |
.fyre-notifiant-close | Bouton qui ferme le notifiant. |
.fyre-notifiant-conteneur | Le conteneur de l’utilitaire de notification comprend la bannière et la base. |
.fyre-notifiant-compteur | Conteneur du numéro indiqué dans le notificateur. |
.fyre-notifiant-liste | Conteneur de l’élément de contenu le plus récent. |
.fyre-notifiant-message | Les premiers ~30 caractères du contenu s’affichaient. |
.fyre-notifiant-message-conteneur | Div conteneur du message d’en-tête. |