Personalizzare lo stile del sito con il CSS

Come aggiungere CSS personalizzato al sito pubblico, con l'elenco dei selettori e delle variabili disponibili e un template di partenza.

Il CSS personalizzato permette di ritoccare l'aspetto del sito pubblico oltre a quanto offrono l'editor delle pagine e la palette colori.

Dove inserirlo

Apri Siti, scegli il sito e vai nelle Impostazioni.
Espandi la sezione Avanzate.
Scrivi le regole nel campo CSS personalizzato e salva.

Il CSS viene applicato a tutte le pagine pubbliche del sito (pagine create nell'editor, eventi, notizie, progetti, iscrizione).

Il CSS non viene applicato nell'anteprima dell'editor: per vedere il risultato apri il sito pubblico.

Il tuo CSS ha la precedenza sugli stili predefiniti di Agora, quindi di norma non serve !important. Scrivi CSS puro, senza tag HTML.

Selettori disponibili

Usa solo i selettori di questa tabella. Le altre classi che vedi ispezionando la pagina (per esempio flex, p-8, bg-white) sono dettagli interni e possono cambiare con gli aggiornamenti.

Selettore	Elemento
`.site-root`	Contenitore dell'intera pagina (header, contenuto, footer)
`.site-header`	Intestazione del sito
`.site-main` (o `#main-content`)	Area del contenuto principale, tra header e footer
`.site-footer`	Piè di pagina
`.site-section`	Ogni sezione della pagina (vedi nota sotto)
`.site-section--<categoria>`	Le sezioni di una categoria
`[data-section-name="<nome>"]`	Una variante specifica di sezione
`.site-button`	Pulsanti delle sezioni
`.site-link`	Link delle sezioni (menu, footer)

Le categorie per .site-section--<categoria> sono: header, footer, hero, feature, stack, carousel, list, grid, map, stats, video, event, news, project, society-group, society-board, web-article.

I nomi per data-section-name sono: HeaderSection_1, HeaderSection_2, FooterSection_1, HeroSection_1, FeatureSection_1, FeatureSection_2, FeatureSection_3, StackSection_1, StackSection_2, StatsSection_1, GoogleMapsSection_1, VideoSection_1, VideoSection_2, CarouselSection_1, CarouselSection_2, CarouselSection_3, CarouselSection_4, GridSection, GridSection_2, EventGridSection, NewsGridSection, ProjectGridSection, SocietyGroupGridSection.

.site-section è un contenitore trasparente che non ha un proprio riquadro: per dare sfondo, margini o bordi a una sezione seleziona l'elemento al suo interno, per esempio .site-section--hero > section.

I testi scritti nell'editor sono blocchi generici e non hanno classi proprie: per cambiarli in modo uniforme applica font e colore a .site-main o usa le variabili.

Variabili di colore del sito

I colori scelti nella palette del sito (primario, secondario, accento, scala di grigi) sono esposti come variabili, con le sfumature da 50 a 950.

Variabile	Contenuto
`--primary`, `--secondary`, `--accent`, `--grayScale`	Colore principale di ciascuna palette
`--primary-50` … `--primary-950`	Sfumature (stesso schema per le altre palette)
`--primary-rgb`, `--primary-rgb-500`	Componenti RGB, per usare la trasparenza: `rgb(var(--primary-rgb) / 0.1)`
`--text-on-accent`	Colore del testo sopra l'accento, quando la palette lo richiede
`--primary-foreground`, `--secondary-foreground`, `--accent-foreground`	Colore del testo sopra primario, secondario e accento
`--background`, `--foreground`	Sfondo e testo di base
`--card`, `--card-foreground`, `--popover`, `--popover-foreground`	Riquadri e menu a comparsa
`--muted`, `--muted-foreground`	Elementi e testi attenuati
`--border`, `--input`, `--ring`	Bordi, campi di input, anello di focus
`--destructive`	Azioni distruttive ed errori
`--radius`	Raggio base degli angoli arrotondati

Cambiare una variabile su :root aggiorna tutti gli elementi che la usano.

Variabili di base di Tailwind

Il sito è costruito con Tailwind: tutte le sue variabili di base sono disponibili, anche se nella pagina non sono usate.

Famiglia	Variabili	Esempio
Colori	`--color-<colore>-<50…950>`, `--color-black`, `--color-white`	`--color-blue-600`
Spaziatura	`--spacing` (unità base, 0.25rem)	`--spacing: 0.3rem`
Font	`--font-sans`, `--font-serif`, `--font-mono`	`--font-sans: Georgia, serif`
Dimensione del testo	`--text-xs` … `--text-xl` (e `--text-*--line-height`), `--text-h1` … `--text-h6`	`--text-h1: 4rem`
Peso del testo	`--font-weight-thin` … `--font-weight-black`	`--font-weight-bold`
Spaziatura tra lettere e interlinea	`--tracking-`, `--leading-`	`--leading-relaxed`
Angoli	`--radius-xs`, `--radius-2xl` … `--radius-4xl` (i raggi `sm`, `md`, `lg` e `xl` derivano da `--radius`)	`--radius-2xl`
Ombre	`--shadow-`, `--inset-shadow-`, `--drop-shadow-`, `--blur-`	`--shadow-md`
Larghezze	`--container-3xs` … `--container-7xl`, `--breakpoint-*`	`--container-xl`
Animazioni	`--animate-spin`, `--animate-ping`, `--animate-pulse`, `--animate-bounce`, `--ease-*`	`--ease-in-out`

I colori Tailwind disponibili sono: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone e taupe, mauve, mist, olive.

Le variabili si possono anche leggere nelle tue regole: border-color: var(--color-blue-600);.

Template di partenza

Copia il blocco nel campo CSS personalizzato e tieni solo le parti che ti servono.

/* 1. Colori e forme del sito */
:root {
  --primary: #0b5cad;
  --primary-foreground: #ffffff;
  --accent: #f59e0b;
  --radius: 0.5rem;
  --font-sans: Georgia, 'Times New Roman', serif;
}

/* 2. Intestazione */
.site-header {
  border-bottom: 3px solid var(--primary);
}

/* 3. Testo del contenuto */
.site-main {
  line-height: 1.7;
  color: var(--color-slate-800);
}

/* 4. Una categoria di sezioni: sfondo della sezione hero */
.site-section--hero > section {
  background-color: rgb(var(--primary-rgb) / 0.08);
}

/* 5. Una variante specifica di sezione */
[data-section-name='StatsSection_1'] > section {
  background: var(--color-slate-50);
}

/* 6. Pulsanti e link */
.site-button {
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.site-link:hover {
  text-decoration: underline;
}

/* 7. Piè di pagina */
.site-footer {
  background-color: var(--color-slate-900);
  color: var(--color-slate-100);
}

/* 8. Solo su smartphone */
@media (max-width: 640px) {
  .site-header {
    padding-block: 0.25rem;
  }
}

Se una regola non ha effetto

Controlla di aver aperto il sito pubblico e ricaricato la pagina, non l'anteprima dell'editor.
Verifica il selettore: una sezione va selezionata al suo interno (.site-section--hero > section), non con .site-section--hero.
Se un colore scelto nell'editor della pagina (attributo della sezione) è impostato direttamente sull'elemento, ha la precedenza sul CSS: in quel caso usa !important oppure rimuovi il colore dall'editor.
Un errore di sintassi (una parentesi non chiusa) invalida le regole che seguono: controlla il CSS con un validatore.

Personalizzare lo stile del sito con il CSS

Dove inserirloCopia il link al titolo

Selettori disponibiliCopia il link al titolo

Variabili di colore del sitoCopia il link al titolo

Variabili di base di TailwindCopia il link al titolo

Template di partenzaCopia il link al titolo