Mudanças entre as edições de "Customizar CSS Strato 10"
Ir para navegação
Ir para pesquisar
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. | ||
+ | |||
+ | == 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> |
Edição das 20h36min de 2 de outubro de 2012
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.
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; }