Mudanças entre as edições de "Customizar CSS Strato 10"

De Esquemátika
Ir para navegação Ir para pesquisar
 
(5 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 20: Linha 22:
 
       }</nowiki>
 
       }</nowiki>
 
     Neste caso a cor de fundo foi alterada.
 
     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)