CSS personalizzato

Aggiungi CSS personalizzato alle impostazioni predefinite del tema per adattarlo al tuo brand o modificare stili specifici.

Aggiungere CSS personalizzato

Crea un file style.css nella radice del progetto (la stessa cartella di docs.json). Jamdesk lo applica a ogni pagina. Non è necessaria alcuna voce in docs.json.

Funziona qualsiasi file .css nella radice del progetto, non solo style.css. Jamdesk combina più file in ordine alfabetico per nome.

Esegui jamdesk dev per visualizzare il risultato in anteprima sul tuo computer. Il rendering del CSS personalizzato corrisponde a quello del sito pubblicato.

/* Your custom styles */
article h1 {
  font-size: 2.5rem;
}

Esempi CSS e JS illustra come cambiare il colore dell'intestazione e aggiungere un pulsante mobile.

Variabili CSS

I colori e i raggi degli angoli sono definiti tramite variabili CSS. Puoi sovrascriverle in :root. Ogni componente che le usa segue queste regole:

:root {
  /* Page and text colors */
  --color-bg-primary: #ffffff;      /* page background */
  --color-bg-secondary: #f8fafc;    /* inputs, subtle panels */
  --color-text-primary: #0a0a0a;    /* headings */
  --color-text-secondary: #404144;  /* body text */
  --color-text-muted: #737373;      /* captions and hints */
  --color-border: #e2e8f0;

  /* Corner radius for cards, buttons and panels */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

I valori indicati sono quelli predefiniti del tema Jam. Gli altri temi partono dai propri valori. Puoi leggerli negli strumenti di sviluppo del browser sull'elemento <html>.

I colori del tuo brand vanno definiti in docs.json, non qui. Jamdesk trasforma colors.primary nel colore di accento usato per i link, i pulsanti e la voce attiva della barra laterale. Vedi Colori personalizzati.

Anche i font vanno definiti in docs.json. Il campo fonts carica un Google Font o un file di font personalizzato e lo applica ovunque. L'impostazione di font-family in CSS funziona solo con !important. I temi impostano i font usando selettori più specifici. Vedi Tipografia.

Personalizzazioni comuni

Cambiare il font del codice

I blocchi di codice usano il font monospaziato del tema, a meno che tu non lo sovrascriva con !important:

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

article pre,
article pre code,
article code {
  font-family: 'Fira Code', monospace !important;
  font-variant-ligatures: common-ligatures;
}

Personalizzare lo stile dei link

I link nel corpo della pagina hanno sempre classi. Selezionali in base alla loro posizione, non con a:not([class]):

article .prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

article .prose a:hover {
  text-decoration-thickness: 2px;
}

Modificare la spaziatura dei titoli

article .prose h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

article .prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

Definire lo stile dei riquadri

I callout ricavano i colori dalle variabili che terminano con -bg, -border e -text:

/* Warmer Note callouts */
:root {
  --color-note-bg: #fef3c7;
  --color-note-border: #f59e0b;
}

Definire lo stile della scheda attiva

article [role="tab"][aria-selected="true"] {
  border-bottom-width: 3px;
}

Modalità scura

In modalità scura, Jamdesk aggiunge la classe dark a <html>. Inserisci le regole per la modalità scura sotto html.dark:

/* Light mode */
:root {
  --color-bg-primary: #fffdf7;
}

.custom-banner {
  background: #f0f4ff;
  color: #1e3a5f;
}

/* Dark mode */
html.dark {
  --color-bg-primary: #14110f;
}

html.dark .custom-banner {
  background: #1e293b;
  color: #e2e8f0;
}

Selettori da usare

I nomi delle classi di Jamdesk provengono da Tailwind e possono cambiare a ogni release. Questi selettori sono stabili:

Banner

Il banner che imposti in docs.json ha i suoi selettori stabili:

Imposta le variabili di colore su .jd-banner, non su :root. I tipi warning e danger impostano i propri valori sulla barra, quindi un valore su :root non li raggiunge mai.

Una semplice regola .jd-banner cambia lo stile di tutti i tipi:

.jd-banner {
  --jd-banner-bg: #111827;
  --jd-banner-fg: #f9fafb;
}

Aggiungi l'attributo per cambiare un solo tipo:

.jd-banner[data-type="danger"] {
  --jd-banner-bg: #7f1d1d;
}

Se il tuo CSS contiene una regola più vecchia come [data-jd-banner] { background: ... }, questa ricolora tutti i tipi, compresi warning e danger. Sostituiscila con una delle regole qui sopra.

Usa --jd-banner-height per tenere i tuoi elementi sticky sotto la barra. La variabile non è impostata quando non viene mostrato alcun banner, quindi dalle un valore di riserva di 0px:

.my-sticky-toolbar {
  position: sticky;
  top: var(--jd-banner-height, 0px);
}

Font esterni

Quando possibile, carica i font tramite docs.json. Il campo fonts carica Google Fonts e file ospitati autonomamente, inclusi i file .woff2 nel tuo repository. Applica i font ai titoli e al testo del corpo.

Il CSS è la soluzione alternativa per ciò che fonts non copre, ad esempio il font del codice mostrato sopra o un font diverso per un singolo elemento. Carica il font con @import o @font-face, poi impostalo con !important:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

article .prose blockquote {
  font-family: 'CustomFont', serif !important;
}

Stili responsive

Usa le media query per adattare gli stili alle dimensioni dello schermo:

/* Phones */
@media (max-width: 768px) {
  article h1 {
    font-size: 1.75rem;
  }
}

Debug

Fai clic con il tasto destro su un elemento e scegli Inspect per individuare il selettore da usare. Preferisci i selettori indicati in Selettori da usare, i ruoli come role="tab" e le variabili CSS ai nomi lunghi delle classi Tailwind. Se una regola non viene applicata, controlla nel pannello Styles se una regola del tema prevale per specificità o usa !important.

Limitazioni

• Il CSS viene applicato globalmente. Usa selettori specifici per evitare conflitti
• Alcuni stili del tema, inclusi i font e lo sfondo dell'intestazione Jam, usano !important o selettori molto specifici. Potrebbe essere necessario usare !important per sovrascriverli
• L'anteprima locale (jamdesk dev) applica le modifiche ai file CSS quando aggiorni la pagina nel browser. Il sito pubblicato recepisce le modifiche alla build successiva

Prossimi passi