Estilos por produto

Com o objectivo de cada produto ter uma identidade própria, é possível configurar algumas variáveis para tornar cada produto único.

Accent Color

A alteração das cores do tema é feita nos ficheiros product.less e product.scss alterando as variáveis:

  • pri-theme-color-darker
  • pri-theme-color-dark
  • pri-theme-color
  • pri-theme-color-light
  • pri-theme-color-lighter

A variável pri-theme-color corresponde à cor base do produto. As restante variáveis são variações mais claras e mais escuras da mesma cor. Os valores devem ser hexadecimal e sem transparência. Estes ficheiros estão presentes na pasta: ~/Host/ClientApp/src/themes. Os valores das variáveis no product.less e product.scss devem ser os mesmos. Para as alterações das variáveis terem efeito, é necessário compilar o ClientApp usando o comando: npm run build

Exemplo

product.less

@pri-theme-color-darker: #145781;
@pri-theme-color-dark: #1271AC;
@pri-theme-color:#00A4D3;
@pri-theme-color-light: #B6DCF3;
@pri-theme-color-lighter:#E2F1FA;

product.scss

$pri-theme-color-darker: #145781;
$pri-theme-color-dark: #1271AC;
$pri-theme-color:#00A4D3;
$pri-theme-color-light: #B6DCF3;
$pri-theme-color-lighter:#E2F1FA;

Imagens

Podem ser alteradas três imagens:

Todas as imagens devem ser colocadas na pasta ~/Host/ClientApp/src/themes/Images.

Logótipo da shell A imagem deve ser um SVG, ter formato quadrado, com o nome product_menu_logo.svg.

Logótipo do login/selector de organizações A imagem deve ser um SVG, ter mais largura que altura, e o nome deve ser product_login_logo.svg.

Fundo do login/selector de organizações A imagem deve ser um JPG ou PNG, ter a resolução 1920x1216, e o nome deve ser product_login_background.jpg|jpeg|png.

Caso a extensão da imagem de fundo mude de .jpg para .jpeg ou .png, a variável @login-background-image: url('./product\_login\_background.jpg') no ficheiro product.less, deve ser alterada para conter a extensão correcta.

Para as alterações das variáveis terem efeito, é necessário compilar o ClientApp usando o comando:
npm run build