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.
Usuários com acesso:
- Administradores
Ativando Temas Customizados
Para começar a usar temas personalizados ou para começar a criar seus próprios, faça o seguinte:
-
Na barra de ferramentas superior da SharpSpring, clique em Configurações do Usuário > Configurações.
-
No painel esquerdo, sob Ferramentas da Agência, clique em White Label.
-
Desça até a seção Editar CSS.
-
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:
-
Na barra de ferramentas superior da SharpSpring, clique em Configurações do Usuário > Configurações.
-
No painel esquerdo, sob Ferramentas da Agência, clique em White Label.
-
Desça até a seção White Labeling.
-
Escolha o modelo desejado.
-
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:
-
Na barra de ferramentas superior da SharpSpring, clique em Configurações do Usuário > Configurações.
-
No painel esquerdo, sob Ferramentas da Agência, clique em White Label.
-
Desça até a seção White Labeling.
-
Clique em Personalizar estilos.
-
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 **/
-
Copie o CSS.
-
Cole o CSS em um editor de texto (ex: Atom, Sublime, VSCode, etc.).
-
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:
-
Na barra de ferramentas superior da SharpSpring, clique em Configurações do Usuário > Configurações.
-
No painel esquerdo, sob Ferramentas da Agência, clique em White Label.
-
Role para baixo até a seção White Labeling.
-
Clique em Personalizar estilos.
-
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 **/.
-
Copie o CSS.
-
Cole o CSS em um editor de texto (ex: Atom, Sublime, VSCode, etc.).
-
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.
Comentários
0 comentário
Artigo fechado para comentários.