apitdn/fluig_rag_docs/Plataforma Documentação técnica/Personalização/Personalização de todas as páginas da plataforma.md

---
title: Personalização de todas as páginas da plataforma
source: https://tdn.totvs.com/pages/viewpage.action?pageId=232816834
path: \Plataforma  Documentação técnica\Personalização\Personalização de todas as páginas da plataforma.md
---

![](..\..\images\pratica.png)

**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.

# - 1 [Objetivo](#Personalizaçãodetodasaspáginasdaplataforma-trueÍndicenoneObjetivo) - 2 [Personalização de todas as páginas](#Personalizaçãodetodasaspáginasdaplataforma-Personalizaçãodetodasaspáginas) - 3 [Exemplo simples de personalização](#Personalizaçãodetodasaspáginasdaplataforma-Exemplosimplesdepersonalização) - 4 [Exemplo avançado de personalização](#Personalizaçãodetodasaspáginasdaplataforma-Exemploavançadodepersonalização) 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**.

Atenção

Caso as configurações da plataforma tenham sido alteradas manualmente (por exemplo, para ambientes com alta disponibilidade), abra em um editor de texto o arquivo **[diretório\_instalação]/appserver/domain/configuration/standalone.xml** e procure nele pela propriedade **<simple name="java:global/wcm/globalDataDir"**, neste parâmetro estará indicado o caminho alternativo ao caminho **[diretório\_instalação]/repository/wcmdir/.**

- 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:**

![](..\..\images\local-do-arquivo-ilustra%C3%A7%C3%A3o.png)

# 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**:

**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 **R****esponsivo** e **S****nowflake**, já no tema **C****lássico** irá mudar apenas o label do item, conforme apresentado nas imagens abaixo:

![](..\..\images\exemplo1-responsivetheme.png)

![](..\..\images\exemplo1-liquidtheme.png)

![](..\..\images\exemplo1-themedefault.png)

# 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**:

**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:

![](..\..\images\exemplo2-responsivetheme.png)

![](..\..\images\exemplo2-liquidtheme.png)

![](..\..\images\exemplo2-themedefault.png)