A SharpSpring pode ser personalizada para assumir a aparência da sua empresa. CSS, que significa Cascading Style Sheets, é um estilo de codificação que descreve como os elementos HTML são exibidos. O CSS pode modificar uma única página da web ou várias.

Na SharpSpring, os temas CSS são globais. Quando um administrador, com acesso instância da agência muda e salva o tema, todos os usuários dessa instância verão imediatamente as alterações. 

Este artigo analisa como alternar o tema da sua instância SharpSpring, dentre vários modelos predefinidos e, também, como criar seu próprio tema personalizado usando CSS.

Nota: atualmente, esse recurso está disponível somente em instâncias de agência.

Ativando Temas Customizados

Para começar a usar temas personalizados ou para começar a criar seus próprios, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Configurações do Usuário > Configurações.
  2. No painel esquerdo, sob Ferramentas da Agência, clique em White Label.
  3. Desça até a seção Editar CSS.
  4. Alterne o botão Ativar CSS no Login e no Aplicativo para Ligado.

Nota: para voltar ao tema padrão SharpSpring, alterne este botão para Off.

Usando e editando os modelos

Quando modelos CSS personalizados estão ativados, você pode selecionar um tema. Atualmente, existem cinco modelos predefinidos para escolher. 

Para selecionar um tema, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Configurações do Usuário > Configurações.
  2. No painel esquerdo, sob Ferramentas da Agência, clique em White Label.
  3. Desça até a seção White Labeling.
  4. Escolha o modelo desejado.
  5. Na janela de confirmação exibida, clique em OK.

Uma vez confirmado, o novo tema será imediatamente aplicado. O tema ativo terá uma borda verde e uma marca de seleção, identificando-o como o tema atual.

Os temas predefinidos disponíveis são os seguintes:

Laranja e Azul

Branco

Cinza médio

Azul aço

Verde afiado

Compreendendo Melhor os Modelos CSS

Modelos CSS contêm várias seções. Entendê-las seções permitirá uma personalização mais direcionada.

A seção Header contém o código CSS que modifica o conteúdo na parte superior da aplicação, incluindo a barra de ferramentas e os menus suspensos associados.

A seção Accent Elements contém um texto que afeta diretamente os elementos suplementares da aplicação, como botões e guias.

A seção Custom Login Widget Embeds contém texto que modifica a aparência do widget de login. Este é o widget com o qual os usuários interagem em uma determinada página da web, ao efetuar login na SharpSpring.

O texto CSS que precede ou segue o tema editável pode adicionar outras funcionalidades ou, até mesmo, alterar aspectos da aplicação não listados.

Adicionando um novo CSS

A folha de estilo CSS é totalmente customizável. Para sobrescrever o CSS atual na folha de estilos por um novo CSS, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Configurações do Usuário > Configurações.
  2. No painel esquerdo, sob Ferramentas da Agência, clique em White Label.
  3. Desça até a seção White Labeling.
  4. Clique em Personalizar estilos.
  5. Escreva o bloco de código acima do comentário /** White-label Theme - Do not Modify Comment**/ ou abaixo do comentário /** End of Theme - Do Not Modify Comment **/
  6. Copie o CSS.
  7. Cole o CSS em um editor de texto (ex: Atom, Sublime, VSCode, etc.).
  8. Salve a folha de estilo.

Nota: se escrito acima, inclua !important nas tags do seu CSS, permitindo assim que o sistema saiba que tem precedência para esse estilo.

É importante reforçar que o CSS modificado na folha de estilo persistirá mesmo ao mudar para outro tema.

Editando um CSS existente

A folha de estilo CSS é totalmente personalizável. Para editar o CSS pré-escrito para o tema desejado, faça o seguinte:

  1. Na barra de ferramentas superior da SharpSpring, clique em Configurações do Usuário > Configurações.
  2. No painel esquerdo, sob Ferramentas da Agência, clique em White Label.
  3. Role para baixo até a seção White Labeling.
  4. Clique em Personalizar estilos.
  5. Insira o CSS na área de conteúdo entre os comentários /** White-label Theme - Do not Modify Comment **/ e /** End of Theme - Do Not Modify Comment **/.
  6. Copie o CSS.
  7. Cole o CSS em um editor de texto (ex: Atom, Sublime, VSCode, etc.).
  8. Salve a folha de estilo.

Importante: as edições feitas nesta seção serão aplicadas apenas ao tema atual que foi editado, e serão sobrescritas se o tema for alterado.

É importante reforçar que o CSS modificado na folha de estilo persistirá mesmo ao mudar para outro tema.

Encontrou sua resposta?