...
Índice |
---|
outline | true |
---|
exclude | .*ndice |
---|
style | none |
---|
|
...
Criação da página de login personalizada
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 |
---|
| - Acesse o diretório [Instalação fluig]/repository/wcmdir/. Dentro dele, crie uma nova pasta chamada "customlogin".
Nota |
---|
| 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 |
---|
|
| Atenção | O conteúdo do arquivo login.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>. |
Atenção | 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. Nota |
---|
| Esses recursos estáticos estarão acessíveis abaixo da URL /portal/resources/customlogin/.
Card |
---|
|
- 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.
|
|
...
Exemplo de personalização
Criado Primeiramente foram criados os seguintes arquivos , descritos acima em "/opt/fluig/repository/wcmdir/customlogin/".
1. Importe o arquivo JavaScript padrão do produto jquery.js e o JavaScript customizado login.js.
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/login.js"></script> |
2. Insira a imagem Sua-Empresa-Horizontal.png, juntamente com o texto "logotxt". Ex: ![](/download/thumbnails/258277647/Sua-Empresa-Horizontal.png?version=1&modificationDate=1474483328000&api=v2)
Bloco de código |
---|
language | xml |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
title | login.html |
---|
linenumbers | true |
---|
|
<img src="/portal/resources/customlogin/Sua-Empresa-Horizontal.png" height="200">
<h1 id="logotxt"></h1> |
Avisonote |
---|
icontitle | falseFique atento |
---|
|
Atenção Todo conteúdo HTML deve seguir as normas do Style Guide (definidas aqui: https://style.fluig.com/). |
3. Ao terminar de carregar a página, substitua o texto "logotxt" pela data atual.
Bloco de código |
---|
language | js |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
title | login.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").html("Hoje é: " + today);
}) |
...
4. Importe o arquivo JavaScript padrão do produto jquery.js e o JavaScript personalizado login.js.
...
Alteração de logomarca e exibição de data.
Image Modified
Nota |
---|
|
- Todos os arquivos utilizados no exemplo também estão disponíveis em http://git.fluig.com/
- A personalização da página de login pode ser feita apenas a partir da atualização Atualização 1.5.5.
|