DEV Community

Cover image for Style Books no Liferay: Personalização simplificada com flexibilidade
Carlos Fortes
Carlos Fortes

Posted on

Style Books no Liferay: Personalização simplificada com flexibilidade

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

  1. Vá para Configurações do Site (Painel de Controle > Sites > Site desejado > Design > Configurações de Estilo).
  2. Selecione o Style Book desejado.
  3. 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

  1. Personalização Completa e Flexível: O theme oferece uma base sólida, enquanto o Style Book permite ajustes rápidos.
  2. Menos Tempo de Deploy: Pequenas mudanças podem ser feitas com o Style Book sem necessidade de recompilar o theme.
  3. Consistência com Variabilidade: Aplique variações de design para diferentes seções ou campanhas sem alterar o theme base.
  4. 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

  1. Mantenha as Variáveis Consistentes: Use nomes descritivos para facilitar o entendimento.
  2. 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.
  3. Testes e Validação: Teste o site em diferentes dispositivos para confirmar a responsividade e a aplicação correta dos estilos.
  4. 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

  1. Documentação Oficial do Liferay DXP: Documentação de Desenvolvimento do Liferay DXP

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

Top comments (0)