Application de styles personnalisés

Pour personnaliser le contenu des groupes d’utilisateurs, vous devez d’abord ajouter une balise d’utilisateur au compte, puis mettre en forme le contenu à l’aide de CSS.

Pour chaque balise d’utilisateur ajoutée via Studio ou Ping for Pull, Livefyre crée deux classes CSS, qui peuvent toutes deux être utilisées pour mettre en forme le contenu du groupe.

Lors de la conversion de balises d’utilisateur en classes CSS :

  • Livefyre crée deux classes : fyre-author-tag-<votre_groupe> et fyre-tag-author-<votre_groupe>***. Les deux peuvent être utilisés pour mettre en forme le contenu.

  • Les espaces inclus dans la balise sont convertis en traits de soulignement. Par exemple : "Utilisateur favori" devient utilisateur favori.

  • Les caractères Unicode inclus dans les noms de groupe ne seront pas convertis et apparaîtront sous forme Unicode dans les noms de classe. Par exemple : Le groupe d'utilisateurs "modérateur" deviendra fyre-comment-author-tag-modéateur.

Une fois vos groupes d’utilisateurs créés, utilisez les classes CSS de Livefyre pour appliquer un style personnalisé au contenu.

Contenu du style pour les modérateurs (et les propriétaires)

  • Utilisez la classe CSS .fyre-modérator.

    REMARQUE

    Les propriétaires, puisqu’ils sont également modérateurs, verront cette classe appliquée à leur contenu dans le flux également.

  • Créez une règle CSS pour afficher ou mettre en forme un badge pour le groupe :

    .fyre-moderator { 
        font: 13px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; 
        text-decoration: none; 
        color: #404040; 
        padding-left: 28px; 
        padding-top: 4px; 
    }
    

Contenu du style pour les groupes d’utilisateurs

Créez une règle CSS pour afficher ou mettre en forme un badge pour le groupe :

<span class="fyre-comment-author-tag fyre-comment-author-tag-writer fyre-comment-plus" data-fyre-author-tag="staff">Staff Writer</span>
.livechat-comments-container .fyre .fyre-comment-wrapper .fyre-comment-author-tag, .comments-container .fyre .fyre-comment-wrapper .fyre-comment-author-tag { 
    display: inline-block !important; 
    background: #603url('/etc/designs/site/images/comments-icon-staff.8db5be91.png?1438807177') no-repeat left center !important; 
    padding-right: 3px !important; 
    padding-left: 20px !important; 
    text-transform: uppercase !important; 
    font-weight: bold !important; 
    font-size: 11px !important; 
    border-radius: 0 !important; 
    color: #ffffff !important; 
}

Utilisez la classe CSS fyre-author-tag-<votre_groupe> ou fyre-tag-author-<votre_groupe>*** pour mettre en forme la police et l’arrière-plan de chaque élément publié à partir d’un compte associé à la balise sélectionnée.

.fyre-comment-author-tag-<your_group> .fyre-comment-author-tag { 
    font: 10px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; 
    text-decoration: none; 
    color: #404040; 
    padding-left: 28px; 
    padding-top: 4px; 
}

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