Indica Estilos Personalizados

Os estilos personalizados são aplicados por meio de um objeto inserido no construtor Sidenotes .

As "chaves" são chaves de objeto que representam elementos DOM, enquanto as "propriedades" são propriedades CSS compatíveis com a chave específica. Por exemplo, para personalizar o estilo do blockBtn (que é o botão que inicia o portátil Sidenotes), é possível construir um objeto como:

var styles = {
   'blockBtn': {
      'fontColor': '#555',
      'fontSize': '18px'
   }
};
new Livefyre.Sidenotes({
   customStyles: styles,
      ...
})
Chave Propriedades Descrição
anonymousAvatar "altura", "largura" Imagem de avatar anônima, à esquerda do editor de área de texto.
blockBtn "fontColor", "fontSize", "left", "position", "right", "top" O "ícone do Iniciador" posicionado ao lado dos elementos especificados como compatíveis com observações.
blockBtnActive "fontColor", "fontSize", "left", "position", "right", "top" Ícone do Iniciador quando em um estado ativo.
commentAvatar "altura", "largura" Imagem de avatar à esquerda das notas de nível superior.
commentBody "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Corpo de texto das notas encadeadas.
commentDisplayName "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Exibir nome do usuário que deixou uma nota.
commentDownvote "fontColor", "fontSize" Botão Baixar a votação em uma nota.
commentReplyExpand "backgroundColor", "borderColor", "borderWidth", "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Botão para expandir threads com um grande número de respostas.
commentTags "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Tags sobre um usuário em uma nota.
commentUpvote "fontColor", "fontSize" Botão Votar em cima de uma nota.
editorTextarea "height", "width", "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Caixa de entrada de área de texto para deixar notas.
mediaBlockBtn "fontColor", "fontSize", "left", "position", "right", "top" Ícone do Media Launch quando exibido sobre um item de mídia (img, vídeo).
mediaBlockBtnActive "fontColor", "fontSize", "left", "position", "right", "top" Ícone Media launcher em um estado ativo.
numSidenotes "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight", "backgroundColor", "borderWidth", "height", "width" Botão Clicável que mostra o número de Observações na coleção.
numSidenotesPopover "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight", "backgroundColor", "borderWidth", "height", "width" Pover com uma breve explicação de observações para o usuário.
popover "backgroundColor" Pop-ver que é criado quando o ícone do iniciador é chamado.
popoverArrowLeft "backgroundImage", "height", "left", "right", "top", "width" Elemento de seta para a esquerda na janela que aponta para o elemento DOM que contém um ícone de iniciador.
popoverArrorRight "backgroundImage", "height", "left", "right", "top", "width" Elemento de seta para a direita no portão que aponta para o elemento DOM que contém um ícone do iniciador.
popoverArrowTop "backgroundImage", "height", "left", "right", "top", "width" Elemento de seta superior no portão que aponta para o elemento DOM que contém um ícone de iniciador.
replyAvatar "altura", "largura" Imagem de avatar à esquerda das notas de nível de resposta.
streamPoweredBy "backgroundColor", "borderColor", "lineHeight" Rodapé "Powered by" na tomada.
streamQueueButton "backgroundColor", "borderColor", "borderWidth", "fontColor", "fontFamily", "fontSize", "fontWeight", "lineHeight" Botão para indicar quando novas notas são transmitidas em uma janela aberta.
userAvatar "altura", "largura" Imagem de avatar do usuário autenticado, à esquerda do editor de área de texto.

Nesta página