<style type="text/css">
    .lms * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .lms-text-center {
      text-align: center;
    }

    .lms-full-height {
      height: 100%;
    }

    /* Component LMS Callout */

    .lms-callout {
      border: none;
      padding: 0px;

      display: -moz-box;
      -moz-flex-flow: row wrap;
      -moz-justify-content: center;
      -moz-align-items: center;

      display: -ms-flexbox;
      -ms-flex-flow: row wrap;
      -ms-justify-content: center;
      -ms-align-items: center;
      
      display: -webkit-flex;
      display: -webkit-box;
      -webkit-flex-flow: row wrap;
      -webkit-justify-content: center;
      -webkit-align-items: center;

      display: flex;
      flex-flow: row wrap;      
      justify-content: center;
      align-items: center;
    }
  
    .lms-callout .lms-callout-image {
      width: 24px;
    }

    .lms-callout .lms-callout-body {
      width: calc(100% - 24px);
      padding-left: 20px;
    }

	.lms-callout .lms-callout-citacao {
      border: 0px solid;
      border-left-width: 3px;
      border-left-color: #f36f21;
	  margin: 4px;
	  margin-left: 25px;
	  padding-left: 8px;
      font-size: 13px;
	}

    .lms-callout .lms-callout-thumb {
      width: 24px;
      height: 24px;
    }

    .lms-callout .lms-callout-text {
      color: #58595b;
      line-height: 1.75;
      margin: 0;
    }
</style>
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/pratica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>COLOQUE EM PRÁTICA!</b><br>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.</p>
		</div>
	</div>
</div>

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.

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.

    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.

    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: