Painel

borderColor	#e8f6f0
bgColor	#e8f6f0

HTML

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

Informações

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

Índice
outline true
exclude Índice
style none

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 Para personalizar a página de login siga os passos a seguir:

Deck of Cards

startHidden	false
effectDuration	0.5
history	false
id	Personalizacao Login
effectType	fade

Card

default	true
id	1
label	Passo 1

Procure pela pasta {INSTALAÇÃO_FLUIG}[diretório_instalação]/repository/wcmdir/. Dentro dela, crie uma nova pasta chamada custompage.

Aviso

icon	false
title	Atenção

Caso as configurações do fluig tenham da plataforma tenham sido alteradas manualmente (por exemplo, para ambientes com alta disponibilidade), abra em um editor de texto o arquivo {INSTALAÇÃO_FLUIG}/jboss/standalone[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 {INSTALAÇÃO_FLUIG}[diretório_instalação]/repository/wcmdir/.

Card

id	2
label	Passo 2

Os arquivos criados devem utilizar a codificação (charset) UTF-8.

Dentro dessa da pasta recém criada custompage, crie um arquivo chamado custompagehead.ftl. Nesse arquivo crie o fragmento de conteúdo HTML que será inserido nas páginas.

Nota

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

Nota

title	Atenção

O conteúdo do arquivo custompage.html será ftl será literalmente inserido 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:

...

Image Added

Exemplo simples de personalização

Criado os seguintes arquivos, em "/opt/fluig/repository/wcmdir/custompage/".

...

1. Importe os arquivos custompagehead.ftl e custompagehead-<codigo-do-tenante>.ftl, com respectivamente os seguintes 1. Após a etapa de criação dos arquivos, importe o código abaixo para dentro do arquivo custompagehead.ftl:

Bloco de código

language	xml
theme	Eclipse
firstline	1
title	custompagehead.ftl
linenumbers	true

<!-- inserido custompagehead.ftl -->

Bloco de código

language	xml
theme	Eclipse
firstline	1
title	custompagehead-<codigo-do-tenant>.ftl
linenumbers	true

<!-- inserido custompagehead-<codigo-do-tenant>.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:

Image Added

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:

Bloco de código

language	xml
theme	Eclipse
firstline	1
title	custompage.ftl
linenumbers	true

<h1 id="logopage" style="text-align:center"></h1>
<script type="text/javascript">
$(document).ready(function(){
var d = new Date();
var weekday = new Array(7);
weekday[0]=  "Domingo";
weekday[1] = "Segunda-feira";
weekday[2] = "Terça-feira";
weekday[3] = "Quarta-feira";
weekday[4] = "Quinta-feira";
weekday[5] = "Sexta-feira";
weekday[6] = "Sabado";
var n = weekday[d.getDay()];
   $("#logopage").html(n);
})
</script>

Bloco de código

language	xml
theme	Eclipse
firstline	1
title	custompage-<codigo-do-tenant>.ftl
linenumbers	true

<h1 id="logopagetenant" style="text-align:center"></h1>
<script type="text/javascript">
$(document).ready(function(){
   var today = new Date();
   var dd = today.getDate();
   var mm = today.getMonth()+1;
   var yyyy = today.getFullYear();
   if(dd<10) {
       dd='0'+dd
   }
   if(mm<10) {
       mm='0'+mm
   }
   today = dd + '/' + mm + '/' + yyyy;
   $("#logopagetenant").html("Hoje é: " + today);
})
</script>

Resultado:

Tal alteração fará com que tais comentários sejam inseridos em todas as páginas do fluig, e no final da página principal do Fluig, a descrição do dia de hoje, juntamente com o dia da semana

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

Image Added

Image AddedImage Removed

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 10

Nova versão Atual

Chave

Índice
outline true
exclude Índice
style none

Objetivo

Personalização de todas as páginas

Exemplo simples de personalização

Exemplo avançado de personalização

Atalhos

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 10

Nova versão Atual

Chave

ÍndiceoutlinetrueexcludeÍndicestylenoneObjetivo

Personalização de todas as páginas

Exemplo simples de personalização

Exemplo avançado de personalização

Índice
outline true
exclude Índice
style none

Objetivo