Mudanças entre as edições de "Customizar CSS Strato 10"
Ir para navegação
Ir para pesquisar
(Criou página com 'Para customização de CSS no Strato 10, devem ser seguidos os passos abaixo: No diretório de instalação do Strato 10, deve ser criado um diretório com o nome LAYOUT. E...') |
|||
| (7 revisões intermediárias por 3 usuários não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
| − | Para customização de CSS no Strato 10, devem ser seguidos os passos abaixo: | + | Para customização de CSS e imagens no Strato 10, devem ser seguidos os passos abaixo: |
| + | |||
| + | == CSS == | ||
No diretório de instalação do Strato 10, deve ser criado um diretório com o nome LAYOUT. | No diretório de instalação do Strato 10, deve ser criado um diretório com o nome LAYOUT. | ||
| Linha 6: | Linha 8: | ||
Neste diretório criar um arquivo com o nome StratoWebAlt.css. | Neste diretório criar um arquivo com o nome StratoWebAlt.css. | ||
Neste arquivo deverá ser inseridos todos os CSS's que o cliente deseja alterar. | Neste arquivo deverá ser inseridos todos os CSS's que o cliente deseja alterar. | ||
| − | Para saber qual CSS alterar, pode ser utilizado o recurso de '''Debug''' | + | Para saber qual CSS alterar, pode ser utilizado o recurso de '''Debug''' dos navegadores, como o '''firebug''' do Firefox. |
| − | + | ||
| + | Ex: O CSS padrão para um campo edit selecionado é EDIT_SELECTED | ||
| + | Então deve ser criado o CSS EDIT_SELECTED no arquivo StratoWebAlt.css, com as alterações que o cliente deseja. | ||
| + | <nowiki>.EDIT_SELECTED { | ||
| + | BORDER: #886702 1px solid; | ||
| + | PADDING: 1px; | ||
| + | FONT-SIZE: 10px; | ||
| + | BACKGROUND-IMAGE: none; | ||
| + | FONT-FAMILY: Arial; | ||
| + | BACKGROUND-COLOR: #000000; | ||
| + | height: 19px; | ||
| + | }</nowiki> | ||
| + | Neste caso a cor de fundo foi alterada. | ||
| + | |||
| + | Obs. Todas as tags contidas no arquivo StratoWeb.css e salvos no StratoWebAlt.css deverão ser alteradas para que a | ||
| + | interface seja personalizada conforme as características desejadas. | ||
| + | |||
| + | == Imagens == | ||
| + | |||
| + | Seguindo a mesma lógica acima, deve ser criado um diretório '''imagens''' dentro de LAYOUT. | ||
| + | Ex: C:\Strato10\LAYOUT\imagens | ||
| + | |||
| + | Dentro deste diretório pode ser inserido imagens de acordo com o CSS alterado. | ||
| + | Ou também alterar imagens padrões do sistema. | ||
| + | Ex: Se o cliente deseja alterar a imagem de '''processando''', deve ser incluído a nova imagem em C:\Strato10\LAYOUT\imagens\processando.gif | ||
| + | Respeitando o nome padrão da imagem já utilizada no sistema. | ||
| + | |||
| + | == Outros exemplos == | ||
| + | |||
| + | Exemplo de CSS e imagem de botão: | ||
| + | Padrão do sistema: | ||
| + | <nowiki>.BTNCMD { | ||
| + | background-image: url(imagens/btn.png); | ||
| + | BACKGROUND-COLOR: #D4CFC7; | ||
| + | border-color: #C4C0B9; | ||
| + | font-family: Arial; | ||
| + | font-size: 11px; | ||
| + | background-repeat: repeat-x; | ||
| + | background-position: left top; | ||
| + | border-width: 1px; | ||
| + | }</nowiki> | ||
| + | |||
| + | Alteração do cliente: | ||
| + | Deve ser incluído o CSS abaixo no arquivo StratoWebAlt.css. | ||
| + | Também deve ser incluída a imagem '''btn_cliente.png''' em C:\Strato10\LAYOUT\imagens\ | ||
| + | <nowiki>.BTNCMD { | ||
| + | background-image: url(imagens/btn_cliente.png); | ||
| + | BACKGROUND-COLOR: #D4CFC7; | ||
| + | border-color: #C4C0B9; | ||
| + | font-family: Arial; | ||
| + | font-size: 11px; | ||
| + | background-repeat: repeat-x; | ||
| + | background-position: left top; | ||
| + | border-width: 1px; | ||
| + | }</nowiki> | ||
| + | |||
| + | OBS: Quando no Strato10.ini existir a TAG SERVIDOR=SIM e houver a necessidade de um layout diferente para cada empresa, | ||
| + | nos caminhos apresentados acima deve ocorrer a inclusão de um diretório com o nome da empresa definido no JDBC_<nomeDaEmpresa> | ||
| + | Exemplo: | ||
| + | C:\Strato10\LAYOUT\empresa_teste\imagens\ (ESTE DIRETÓRIO DEVE SER CRIADO COM A DESCRIÇÃO EM MINÚSCULO) | ||
Edição atual tal como às 13h20min de 19 de março de 2018
Para customização de CSS e imagens no Strato 10, devem ser seguidos os passos abaixo:
CSS
No diretório de instalação do Strato 10, deve ser criado um diretório com o nome LAYOUT. Ex: C:\Strato10\LAYOUT
Neste diretório criar um arquivo com o nome StratoWebAlt.css. Neste arquivo deverá ser inseridos todos os CSS's que o cliente deseja alterar. Para saber qual CSS alterar, pode ser utilizado o recurso de Debug dos navegadores, como o firebug do Firefox.
Ex: O CSS padrão para um campo edit selecionado é EDIT_SELECTED
Então deve ser criado o CSS EDIT_SELECTED no arquivo StratoWebAlt.css, com as alterações que o cliente deseja.
.EDIT_SELECTED {
BORDER: #886702 1px solid;
PADDING: 1px;
FONT-SIZE: 10px;
BACKGROUND-IMAGE: none;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: #000000;
height: 19px;
}
Neste caso a cor de fundo foi alterada.
Obs. Todas as tags contidas no arquivo StratoWeb.css e salvos no StratoWebAlt.css deverão ser alteradas para que a
interface seja personalizada conforme as características desejadas.
Imagens
Seguindo a mesma lógica acima, deve ser criado um diretório imagens dentro de LAYOUT. Ex: C:\Strato10\LAYOUT\imagens
Dentro deste diretório pode ser inserido imagens de acordo com o CSS alterado.
Ou também alterar imagens padrões do sistema.
Ex: Se o cliente deseja alterar a imagem de processando, deve ser incluído a nova imagem em C:\Strato10\LAYOUT\imagens\processando.gif
Respeitando o nome padrão da imagem já utilizada no sistema.
Outros exemplos
Exemplo de CSS e imagem de botão:
Padrão do sistema:
.BTNCMD {
background-image: url(imagens/btn.png);
BACKGROUND-COLOR: #D4CFC7;
border-color: #C4C0B9;
font-family: Arial;
font-size: 11px;
background-repeat: repeat-x;
background-position: left top;
border-width: 1px;
}
Alteração do cliente:
Deve ser incluído o CSS abaixo no arquivo StratoWebAlt.css.
Também deve ser incluída a imagem btn_cliente.png em C:\Strato10\LAYOUT\imagens\
.BTNCMD {
background-image: url(imagens/btn_cliente.png);
BACKGROUND-COLOR: #D4CFC7;
border-color: #C4C0B9;
font-family: Arial;
font-size: 11px;
background-repeat: repeat-x;
background-position: left top;
border-width: 1px;
}
OBS: Quando no Strato10.ini existir a TAG SERVIDOR=SIM e houver a necessidade de um layout diferente para cada empresa, nos caminhos apresentados acima deve ocorrer a inclusão de um diretório com o nome da empresa definido no JDBC_<nomeDaEmpresa> Exemplo: C:\Strato10\LAYOUT\empresa_teste\imagens\ (ESTE DIRETÓRIO DEVE SER CRIADO COM A DESCRIÇÃO EM MINÚSCULO)
