Já falamos sobre configurações de temas antes, e o Obsidian fica muito melhor depois de instalar um tema. Mas muitas pessoas ainda sentem que algo está errado após trocar de tema — fonte muito pequena, espaçamento entre linhas muito apertado, área de notas muito estreita… Esses detalhes estão além do escopo dos temas. Este capítulo abordará como ajustar finamente com CSS Snippets.
Este capítulo cobre quatro coisas:
- O que é CSS — compreensível mesmo sem conhecimento de programação
- Por que você ainda precisa de CSS mesmo com um tema
- Deixe a IA escrever CSS para você — basta copiar e colar
- Onde colocar o CSS e como fazê-lo funcionar
O que é CSS
CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). Parece técnico, mas a lógica central é simples: CSS é um conjunto de regras que controlam a aparência das coisas.
Por exemplo:
- Qual fonte, tamanho e cor este texto deve ter?
- Qual a largura desta área? Quais as margens?
- Qual deve ser a cor de fundo ao passar o mouse?
Quase todos os efeitos visuais que você vê em uma página da web são controlados por CSS. A interface do Obsidian também é construída sobre tecnologia web (Electron), então CSS pode ser usado para controlar sua aparência também.
O tema que você instala é essencialmente um grande pacote de CSS escrito por outra pessoa. Um CSS Snippet é um pequeno pedaço de CSS que você mesmo adiciona, especificamente para ajustar coisas que o tema não cobre.
O tema é o estilo geral; os snippets são ajustes locais. Eles não entram em conflito e podem ser usados juntos.
Por que ainda preciso de CSS mesmo com um tema?
Os temas resolvem o problema do “estilo geral”, mas muitos detalhes de preferência pessoal estão além do escopo dos temas — e nem deveriam estar, porque as preferências de cada um são diferentes.
Vários cenários comuns onde os temas falham:
Área de notas muito estreita: Muitos temas limitam a largura máxima das notas por padrão, deixando grandes espaços em branco em telas largas, com o conteúdo espremido no meio. Alguns gostam desse layout, outros acham um desperdício.
Espaçamento entre linhas muito apertado/solto: O espaçamento padrão entre linhas pode não ser confortável para você, mas o tema não tem uma opção para isso.
Cor do título não adequada: Você gosta do tema no geral, mas a cor do H1 está um pouco brilhante demais e você quer escurecê-la.
Elemento irritante da interface: Por exemplo, um botão que você nunca usa — você quer escondê-lo.
Essas necessidades são muito específicas e pessoais. Os CSS Snippets são a ferramenta projetada para resolver esses problemas de “última milha”.
Não precisa escrever você mesmo — deixe a IA escrever para você
Este é o ponto mais importante deste capítulo: Você não precisa aprender CSS — apenas deixe a IA escrever para você.
O processo é muito simples: basta dizer à IA o que você quer mudar:
“Escreva um CSS Snippet do Obsidian para definir a largura máxima da área de conteúdo da nota como 900px”
“Escreva um CSS Snippet do Obsidian para definir o espaçamento entre linhas do corpo como 1.8”
“Escreva um CSS Snippet do Obsidian para mudar a cor do H1 para azul escuro”
A IA lhe dará um trecho de código CSS completo que você pode copiar e usar diretamente.
Algumas dicas para obter melhores resultados da IA:
- Especifique que é um CSS Snippet do Obsidian, caso contrário a IA pode lhe dar CSS web comum com nomes de variáveis incorretos.
- Peça à IA para adicionar comentários, diga “Por favor, adicione comentários ao lado de cada propriedade explicando o que ela faz” para que você possa entender seu arquivo depois.
- Mude uma coisa de cada vez, um arquivo de snippet para cada coisa — mais fácil de depurar e desativar individualmente.
Exemplo de conversa:
Me: Write me an Obsidian CSS Snippet to set the maximum width of the note content area to 900px, please add comments.
AI:
.markdown-source-view, .markdown-reading-view {
/* Limit the maximum width of the note content area */
--file-line-width: 900px;
}
É isso. Não precisa entender sintaxe CSS, não precisa consultar documentação. Descreva o que você quer, obtenha o código, cole, pronto.
Onde colocar o CSS? Como fazê-lo funcionar?
Os CSS Snippets têm um local de armazenamento fixo. Basta seguir estes passos.
Passo 1: Encontre a pasta de snippets
Caminho: Raiz do seu Vault → pasta .obsidian → pasta snippets
.obsidian é uma pasta oculta. No Mac, pressione Command + Shift + . para mostrar arquivos ocultos. Se a pasta snippets não existir, crie uma manualmente.
Claro, você também pode acessá-la diretamente pelas Configurações.
Passo 2: Crie um arquivo .css
Na pasta snippets, crie um novo arquivo de texto, mude a extensão para .css. Nomeie como quiser, mas é recomendado usar um nome descritivo como note-width.css ou line-height.css. Cole o código da IA nele e salve.
Alternativamente, você pode abrir esta pasta e deixar a IA escrever o arquivo CSS diretamente lá.
Passo 3: Ative no Obsidian
Caminho: Configurações → Aparência → CSS snippets
Role até o final da página, você verá uma seção “CSS snippets”. Clique no ícone de atualização à direita, e o arquivo que você acabou de criar aparecerá na lista. Clique no botão de alternância ao lado do nome do arquivo, a alternância muda de cor e o snippet entra em vigor. A interface muda imediatamente, sem necessidade de reiniciar. Se o efeito não estiver certo, desligue a alternância e volte para verificar o código.
Como eu uso CSS pessoalmente
Aqui estão alguns snippets que eu realmente uso, para referência.
Alargar área de notas – Este é o que mais uso — define a largura máxima da área de conteúdo da nota mais larga, para que haja menos espaço em branco em telas grandes.
Ajustar espaçamento entre linhas – O espaçamento padrão entre linhas é um pouco apertado para mim, então uso CSS para aumentá-lo ligeiramente para uma leitura mais confortável.
Ocultar elementos não utilizados – Existem alguns botões e ícones na interface do Obsidian que nunca uso. Eu os defino como display: none com CSS para ocultá-los, deixando a interface mais limpa.
Ajustes de estilo de callouts – Não gostei das cores padrão dos blocos de callout em um certo tema, então usei CSS para mudá-las para cores mais suaves.
Esses quatro snippets são armazenados em quatro arquivos .css separados, cada um pode ser ativado individualmente. Se depois de um tempo você achar que um não se adequa, basta desligá-lo — eles não interferem entre si.
Resumo
O que você aprendeu hoje:
- CSS é a regra para controlar a aparência da interface; o Obsidian usa CSS Snippets para ajustes locais.
- Temas são estilos gerais; snippets são ajustes de detalhes — eles funcionam juntos.
- Não precisa escrever CSS você mesmo; diga à IA o que você quer mudar e copie o código que ela lhe der.
- Caminho de armazenamento dos snippets: Raiz do Vault →
.obsidian/snippets/→ arquivo.css. - Ative em Configurações → Aparência → CSS snippets, ative a alternância para ativar.
Principais conclusões:
- Descrever suas necessidades para a IA escrever CSS é muito mais eficiente do que aprender sintaxe CSS você mesmo.
- Um snippet faz uma coisa, facilitando o gerenciamento e a depuração.
- As alternâncias podem ser desligadas a qualquer momento — seguro e reversível, sem necessidade de se preocupar em quebrar a interface.