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> |
|
Í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.
Para personalizar todas as páginas da plataforma 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 [diretório_instalação]/repository/wcmdir. Dentro dela, crie uma nova pasta chamada custompage.
Aviso |
---|
| 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/. |
|
Card |
---|
|
Ilustração:
|
|
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 |
---|
|
<style>
.menu-item a, .wcm-menu-item a {
color: cyan !important;
}
</style> |
Resultado:
A cor dos items 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:
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 |
---|
|
<#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: