Se você já trabalhou com o Liferay e pensou em personalizar a aparência das suas páginas sem a complexidade de desenvolver um theme do zero, os Style Books são a solução perfeita. Mas a grande vantagem é que você não precisa escolher entre Style Books e Themes — você pode usar os dois para ter o máximo de flexibilidade e controle. Neste post, vou explicar como usar ambos para customizações robustas, mostrar como criar um Style Book, compará-los com os _themes _tradicionais e compartilhar as melhores práticas.
O que são Style Books?
Os Style Books são uma forma de definir e aplicar estilos personalizados às páginas do Liferay. Basicamente, eles funcionam como uma coleção de variáveis de estilo — pense em cores, tipografias, espaçamentos e outros elementos visuais — que podem ser aplicadas globalmente a um site. O ponto positivo é que, ao contrário dos themes, eles não requerem deploy de código no servidor e podem ser gerenciados diretamente pela interface do Liferay.
Por que usar Style Books?
- Customização visual rápida e fácil.
- Atualizações em tempo real.
- Desenvolvimento sem Java, direto pelo UI do Liferay.
- Controle granular sobre elementos de design.
Como usar Themes e Style Books em conjunto
Um dos aspectos mais interessantes do Liferay é que você pode combinar o poder dos Themes e Style Books. Os _Themes _oferecem uma personalização completa e controlada do portal, permitindo modificações profundas que envolvem JavaScript, Java e outras tecnologias de back-end. Por outro lado, os Style Books são ideais para ajustes visuais rápidos e sem deploy.
Cenário combinado:
- Theme: Use-o para criar a estrutura geral do site, incluir elementos específicos de layout e recursos que exigem código de backend.
- Style Book: Use-o para aplicar estilos e variar a aparência de forma rápida, sem precisar modificar o código do theme. Ideal para realizar mudanças de última hora ou adaptar o visual para campanhas temporárias.
Essa combinação permite que você mantenha a consistência do design e faça ajustes rápidos sem o processo de recompilação e redeploy do theme.
Criando um Style Book do zero
1. Acesse a Área de design do Liferay
Vá até o Painel de Controle > Design > Style Books. Lá, você verá uma lista de Style Books existentes e a opção para criar um novo.
2. Crie um novo Style Book
Clique em Adicionar Style Book e dê um nome a ele. Você verá a interface onde pode definir variáveis de estilo, como:
- Cores primárias e secundárias.
- Tipografia padrão (tipos de fonte e tamanhos).
- Espaçamentos e margens.
3. Defina estilos customizados
Aqui está o truque: você pode definir estilos de forma visual. Se quiser ir além, pode também inserir customizações CSS para ter ainda mais controle.
Exemplo de CSS customizado:
body { font-family: 'Roboto', sans-serif; } h1, h2, h3 { color: var(--primary-color); } Essas variáveis podem ser aplicadas de forma consistente ao longo do site, e qualquer atualização no Style Book reflete automaticamente em todas as páginas que o utilizam.
Aplicando Style Books com _Themes _ativos
Depois de criar e configurar o seu Style Book, ele pode ser aplicado mesmo se um _theme _personalizado estiver ativo. Isso permite que você mantenha o layout e a funcionalidade do theme, mas faça ajustes visuais rápidos com o Style Book.
- Vá para Configurações do Site (Painel de Controle > Sites > Site desejado > Design > Configurações de Estilo).
- Selecione o Style Book desejado.
- Salve as alterações para ver a nova aparência do site com o theme base e as mudanças do Style Book.
Comparação: Style Books vs. Themes
| Critério | Style Books | Themes |
|---|---|---|
| Complexidade | Baixa — ideal para customizações rápidas | Alta — envolve desenvolvimento com Java e Gulp |
| Deploy | Não requer deploy de código | Requer deploy e build no servidor |
| Flexibilidade | Configuração via UI, fácil de ajustar | Total, mas com complexidade de código |
| Uso de Código | Possibilidade de CSS customizado | Full control (JavaScript, CSS, Java, etc.) |
| Atualização | Rápida e em tempo real | Exige recompilação e redeploy |
Vantagens de usar Themes e Style Books em Conjunto
- Personalização Completa e Flexível: O theme oferece uma base sólida, enquanto o Style Book permite ajustes rápidos.
- Menos Tempo de Deploy: Pequenas mudanças podem ser feitas com o Style Book sem necessidade de recompilar o theme.
- Consistência com Variabilidade: Aplique variações de design para diferentes seções ou campanhas sem alterar o theme base.
- Redução de Custos de Desenvolvimento: Menos tempo gasto para ajustes visuais, permitindo que a equipe de desenvolvimento se concentre em outras funcionalidades complexas.
Melhores práticas para uso de Style Books
- Mantenha as Variáveis Consistentes: Use nomes descritivos para facilitar o entendimento.
- Evite Estilos em Conflito: Se estiver usando um theme, garanta que os estilos do Style Book complementem os do theme, em vez de sobrescrevê-los de maneira imprevisível.
- Testes e Validação: Teste o site em diferentes dispositivos para confirmar a responsividade e a aplicação correta dos estilos.
- Aproveite para Testar Novas Ideias: Style Books são uma ótima maneira de experimentar novas paletas de cores e fontes sem mexer na base de código do theme.
Conclusão
Os Style Books oferecem uma solução prática e rápida para customizações visuais no Liferay. Usados em conjunto com themes, eles permitem personalização total com facilidade de manutenção e aplicação. Com essa abordagem, você pode aproveitar o melhor dos dois mundos — a robustez de um theme personalizado e a flexibilidade de atualizações rápidas de estilo com os Style Books.
Fontes para Consulta
-
Documentação Oficial do Liferay DXP: Documentação de Desenvolvimento do Liferay DXP
-
Exemplos de Código e Recursos Open Source: Liferay GitHub
Explore as possibilidades dos Style Books e veja como eles podem transformar a maneira como você gerencia a aparência do seu site no Liferay!
Gostou? Deixe um ❤️ e compartilhe com sua rede para que mais desenvolvedores possam explorar Style Books em Liferay!