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