Classes CSS

Use as classes CSS disponíveis para personalizar a exibição dos aplicativos.

Disponível para Bate-papo, Comentários, Blog ao vivo, Revisões e Sidenotes.

Use o CSS para personalizar seus aplicativos Livefyre para obter uma integração mais completa com sua página, simplesmente substituindo o CSS padrão do aplicativo por sua própria folha de estilos. Esta seção descreve as personalizações de CSS disponíveis.

Editor CSS

Use essas classes para alterar a interface do editor de postagens.

Classe Descrição
.fyre-comment-count O texto que exibe o número de comentários.
.fyre-login-bar A caixa delimitadora que contém a barra de logon e as opções.
.fyre-live-container A caixa delimitadora em torno do número de pessoas ouvindo e seus avatares.
.fyre-editor A caixa delimitadora em torno do container .fyre-login-bar, .fyre-live-bar e a área de texto onde os usuários escrevem seus comentários.
.fyre-stream-sort A caixa delimitadora em torno das opções de classificação.

Você também pode editar estilos na própria configuração do aplicativo, incluindo a cor de fundo do campo do editor e a cor, o tamanho e a família da fonte do texto que aparece dentro do editor.

Para personalizar o editor de comentários, adicione o objeto editorCss:{} a fyre.console.load() e inclua o estilo desejado. Por exemplo, para atualizar o editor com seu CSS personalizado:

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' 
   } 
}]);

Opções de classificação CSS

Classe Descrição
.fyre-stream-sort Todas as opções de classificação div.
.fyre-stream-sort-newest A opção "Mais recente".
.fyre-stream-sort-dest A opção "Mais antigo".
.fyre-stream-sort-bar A barra separadora entre as opções.
.fyre-stream-sort-seleted A opção de classificação atualmente selecionada.

Estrutura 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>

Ocultar as opções de classificação ‘|’ que separam as opções.

.fyre-stream-sort .fyre-stream-sort-bar { 
    display: none !important; 
}

Comentário CSS

Classe Descrição
.fyre-comment-author-tag- custom tag name O Livefyre criará uma classe CSS neste formato para cada tag de usuário adicionada pelo Livefyre’s Studio, Perfil Sync. Essa classe pode ser usada para criar o estilo do plano de fundo de qualquer conteúdo publicado por contas de usuário, incluindo essa tag.
.fyre-tag-content-icon- tag name O Livefyre criará uma classe CSS neste formato para cada tag de conteúdo adicionada por meio do Livefyre Studio. Essa classe pode ser usada para criar o estilo de qualquer conteúdo ao qual você tenha adicionado a tag.
.fyre-comment-user A caixa delimitadora que contém a imagem de perfil do usuário.
.fyre-comment-username O nome de usuário.
.fyre-moderador A caixa delimitadora do moderador.
.fyre-comment Caixa delimitadora em torno do texto/link do comentário.
.fyre-comment-article A caixa delimitadora para todo o conteúdo do comentário.
.fyre-comment-date A tag anexada ao elemento "tempo desde a publicação".
.fyre-comment-media A caixa delimitadora em torno do conteúdo de mídia.
.fyre-comment-actions A caixa delimitadora em torno das ações disponíveis para fazer um comentário.
.fyre-comment-like A caixa delimitadora em torno do link "Curtir".
.fyre-comment-reply A caixa delimitadora em torno do link "Responder".

Comentários em destaque CSS

OBSERVAÇÃO

Todas as classes CSS de Comentários também podem ser aplicadas ao Conteúdo em destaque.

Classe Descrição
.fyre-feature-content-wrapper O container div para o leitor.
.fyre-feature-header A barra de título à esquerda.
.fyre-feature-header-icon O ícone de preenchimento do cabeçalho.
.fyre-feature-title O texto do cabeçalho.
.fyre-feature-body O container div para conteúdo em destaque no leitor.
.fyre-feature-quote O ícone de citação que inicia cada item de conteúdo.

Comentários arquivados CSS

OBSERVAÇÃO

Todas as classes CSS de conteúdo também podem ser aplicadas ao conteúdo arquivado.

Classe Descrição
.fyre-archive-stream-title O texto "Do Arquivo".
.fyre-archive-stream-title-icon O logotipo do cabeçalho "Do arquivo".

Notificador de comentários CSS

Essas classes permitem que você personalize o Livefyre Comment Notifier.

Classe Descrição
.fyre-notification O div para o item de lista (tanto novo quanto conteúdo de arquivamento).
.fyre-notificador O invólucro do conteúdo do Notificador.
.fyre-notificador-archive O invólucro para todo o novo conteúdo que não seja a publicação mais recente.
.fyre-notificador-avatar A imagem do avatar.
.fyre-notificador-avatar-container O container div para o avatar do usuário. Permite definir o posicionamento.
.fyre-notificador-sombreamento de avatar O sombreamento para o avatar div.
.fyre-notificador-banner O container para o conteúdo de pré-visualização do Notificador, que exibe o avatar do usuário e um trecho de conteúdo para o item postado mais recentemente.
.fyre-notificador-base O container da parte informativa do Notificador, que lista o número de novos comentários, a legenda do Notificador e o botão Fechar.
.fyre-notificador-base-close O container div para o botão Fechar (x) do Notificador.
.fyre-notificador-sombra base O sombreamento para a base do Notificador.
.fyre-notificador-caption O texto apresentado ao notificador. "Novo(s) comentário(s)" por padrão.
.fyre-notificador-close Botão que fecha o notificador.
.fyre-notificador-container O container para o Notificador inclui o banner e a base.
.fyre-notificador-counter O container do número listado no Notificador.
.fyre-notificador-lista O container do conteúdo mais recente.
.fyre-notificador-message Os primeiros ~30 caracteres do conteúdo exibido.
.fyre-notificador-message-container O container div para a mensagem de cabeçalho.

Nesta página

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