Histórico da Página

...

Deck of Cards

startHidden	false
effectDuration	0.5
history	false
id	Personalizacao Login
effectType	fade

Card

default	true
id	1
label	Passo 1

Acesse o diretório [Instalação fluig]/repository/wcmdir/. Dentro dele, crie uma nova pasta chamada "customlogin".

Nota

title	Atenção

Caso as configurações do fluig tenham sido alteradas manualmente (por exemplo, para ambientes com alta disponibilidade), abra em um editor de texto o arquivo [Instalação fluig]/appserver/domain/configuration/domain.xml e localize nele a propriedade abaixo:

Bloco de código
<simple name="java:global/wcm/globalDataDir">

Neste parâmetro estará informado o caminho alternativo do diretório [Instalação fluig]/repository/wcmdir/.

Card

id	2
label	Passo 2

Dentro dessa pasta recém criada, crie um arquivo chamado loginsnowflake.html. Nesse arquivo crie o fragmento de conteúdo HTML que será inserido na página de login.

Informações
O conteúdo do arquivo loginsnowflake.html será literalmente inserido dentro do HTML final da página de login, dentro de uma tag <DIV>, substituindo a logomarca. Portanto, não poderá conter as tags <HTML>, <BODY> ou <HEAD>.

Opcionalmente, crie na mesma pasta um arquivo chamado loginhead.html. Nesse arquivo crie conteúdo HTML que importa os JS/CSS que serão utilizados pela personalização.

Informações
O conteúdo do arquivo loginhead.html será literalmente inserido dentro do HTML final da página de login, dentro da tag <HEAD>, portanto deverá conter apenas tags que importam recursos como JS ou CSS.

Caso utilize recursos estáticos, copie-os dentro desta mesma pasta, como arquivos JS, CSS e imagens. Esses recursos estáticos estarão acessíveis abaixo da URL /portal/resources/customlogin/.

Card

id	3
label	Mobile

Caso utilize o aplicativo Mobile, a personalização do login via Mobile pode ser feita da mesma forma. Basta criar os arquivo mlogin.html e mloginhead.html.

...

Bloco de código

language	xml
theme	Eclipse
firstline	1
title	loginhead.html
linenumbers	true

<script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/portal/resources/customlogin/loginsnowflake.js"></script>

2. Insira a imagem Sua-Empresa-Horizontal.png, juntamente com o texto "logotxt". Ex: Image Removed Insira aqui o código HTML de customização da sua página.

Bloco de código

language	xml
theme	Eclipse
firstline	1
title	loginloginsnowflake.html
linenumbers	true

<img src<link rel="stylesheet" href="/portal/resources/customlogin/Sua-Empresa-Horizontal.png" height="200"loginsnowflake.css">
<h1 id="logotxtlogin_datetime"></h1>

Nota

title	Fique atento

Todo conteúdo HTML deve seguir as normas do Style Guide (definidas aqui: https://style.fluig.com/).

...

Bloco de código

language	js
theme	Eclipse
firstline	1
title	loginloginsnowflake.js
linenumbers	true

$(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;
   $("#logotxt#login_datetime").html("Hoje éData: " + today);
})

4. Importe o arquivo JavaScript padrão do produto jquery.js e o JavaScript personalizado loginsnowflake.js.

...

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 3

Nova versão 4

Chave