diff --git a/Dicas-de-Plone-6-e-Volto.md b/Dicas-de-Plone-6-e-Volto.md index 11349a5..a14ea21 100644 --- a/Dicas-de-Plone-6-e-Volto.md +++ b/Dicas-de-Plone-6-e-Volto.md @@ -346,6 +346,76 @@ Exemplos: - [Redturtle Editable Footer](https://github.com/RedTurtle/volto-editablefooter) +#### CSS customizado + +O volto tem dois arquivos que são pontos para inclusão de CSS customizado, localizados dentro do seu pacote, em `src/theme`: + + +|Arquivo|Nota| +|---|---| +|`_main.scss`|CSS geral e importação de outros arquivos| +|`_variables.scss`|definição de variáveis CSS| + + +##### Importação de arquivos + +Use: +`@import '_arquivo'` + +Este comando procura por `_arquivo.scss` (SASS) ou `_arquivo.css`. O underscore na frente é uma convenção, para dizer que o arquivo é só para import. + +##### Variáveis de Volto Light Theme + +Além dos [`behaviors` de tema explicados mais abaixo](#), pode-se configurar as cores do `volto-light-theme` definindo algumas variáveis de CSS. Listo algumas abaixo: + +|Variável|Nota| +|---|---| +|`--header-background`, `--header-foreground`|Cores do cabeçalho| +|`--footer-background´, `--footer-foreground`|Cores do rodapé| +|`--accent-color`, `--accent-foreground-color`|Cor de destaque, usado para definir variáveis para o menu de hamburguer, breadcrumbs e search| + +E várias outras. Use o developer tools para descobrir mais. Não tem documentação. + + +#### Cores dos blocos (isto é do corpo da página) + +Por default, é definido hard-coded e para serem alteradas, deve-se usar a configuração em `index.ts`: + +``` + config.blocks.themes = [ + { + style: { + '--theme-color': 'var(--body-background-color)', // Block Wrapper + '--theme-high-contrast-color': '#ecebeb', // Cards in Grid block + '--theme-foreground-color': 'var(--body-foreground-color)', + '--theme-low-contrast-foreground-color': '#555555', + }, + name: 'default', + label: 'Default', + }, + { + style: { + '--theme-color': '#ecebeb', + '--theme-high-contrast-color': '#fff', + '--theme-foreground-color': '#000', + '--theme-low-contrast-foreground-color': '#555555', + }, + name: 'grey', + label: 'Grey', + }, + ]; +``` + +Se forem usadas variáveis de CSS nesta parte, as variáveis podem ser definidas nos [arquivos CSS descritos acima](#css-customizado), mantendo o código mais organizado. + +#### Retirando partes da tela no volto-light-theme + +O volto-light-theme facilita a customização do site, retirando partes da tela, como o "colophon" (onde tem a licença, etc). Para isto, use: + +`config.unRegisterSlotComponent('postFooter', 'Colophon', 0);` + +Para ver o que pode ser retirado, olhe o arquivo [slots.ts](https://github.com/kitconcept/volto-light-theme/blob/main/frontend/packages/volto-light-theme/src/config/slots.ts) no código-fonte. + ## Insights ### Itens de Painel de Controle