COLOQUE EM PRÁTICA!
Essa página contém as instruções principais e exemplos de implementação, servindo como ponto de partida para seu desenvolvimento. Os exemplos devem ser analisados e adaptados para cada cenário e necessidade específica, lembrando que as implementações realizadas são de responsabilidade do cliente e não possuem suporte do time TOTVS Fluig.
Plataforma em Cloud
Clientes cloud precisam entrar em contato com o time de Cloud com os arquivos já configurados para que seja incluído no diretório do servidor.
Objetivo
Este guia tem por objetivo indicar como é feita a personalização de páginas do TOTVS Fluig Plataforma.
Personalização de todas as páginas
Para personalizar todas as páginas da plataforma siga os passos a seguir:
- Procure pela pasta [diretório_instalação]/repository/wcmdir. Dentro dela, crie uma nova pasta chamada custompage.
Os arquivos criados devem utilizar a codificação (charset) UTF-8.
Dentro da pasta custompage, crie um arquivo chamado custompagehead.ftl. Nesse arquivo crie o fragmento de conteúdo HTML que será inserido nas páginas.
Atenção
O conteúdo do arquivo custompagehead.ftl será literalmente inserido imediatamente antes de fechar a tag </head>. O mesmo se aplica ao custompagehead<codigo-do-tenante>.ftl, porém nesse caso, o mesmo apenas será inserido para o tenant em questão
Opcionalmente, crie na mesma pasta um arquivo chamado custompage.ftl. Nesse arquivo crie o fragmento de conteúdo HTML que será inserido nas páginas.
Atenção
O conteúdo do arquivo custompage.ftl será literalmente inserido imediatamente antes de fechar a tag </body>. O mesmo se aplica ao custompage<codigo-do-tenante>.ftl, porém nesse caso, o mesmo apenas será inserido para o tenant em questão.
Ilustração:
Exemplo simples de personalização
1. Após a etapa de criação dos arquivos, importe o código abaixo para dentro do arquivo custompagehead.ftl:
<style> .menu-item a, .wcm-menu-item a { color: cyan !important; } </style>
Resultado:
A cor dos itens no menu lateral irão mudar para ciano nos temas Responsivo e Snowflake, já no tema Clássico irá mudar apenas o label do item, conforme apresentado nas imagens abaixo:
Exemplo avançado de personalização
1. Após a etapa de criação dos arquivos, importe o código abaixo para dentro do arquivo custompage.ftl:
<#if themeCode?has_content> <#assign fluigThemeCode = themeCode> <#else> <#assign fluigThemeCode = "themedefault"> </#if> <style> .alert-custom-example { position: fixed; top: 0; left: 0; width: 100vw; z-index: 10000; } .alert-custom-example .alert { margin: 0; } <#if fluigThemeCode == "liquid_theme"> div[appcode="liquid_header"] { margin-top: 64px; } .liquid-menu-widget div.menu-main { height: calc(100vh - 64px); } </#if> <#if fluigThemeCode == "themedefault"> .wcm-header, .wcm-all-content { top: 64px; } .wcm-navigation { height: calc(100% - 124px); top: 124px; } </#if> <#if fluigThemeCode == "responsive_theme"> .responsive-header-widget, .wcm-all-content { top: 64px; } .responsive-menu-widget div.menu-main { top: 144px; height: calc(100% - 144px); } </#if> </style> <div class="fluig-style-guide alert-custom-example"> <div class="alert alert-info" role="alert"> <strong>Atenção!</strong> amanhã o Fluig estará fora do ar para atualização </div> </div>
Resultado:
Será apresentado um componente de alerta fixado acima do header principal em todas as páginas dos temas Responsivo, Snowflake e Clássico, conforme nas imagens abaixo: