Personalizza lo stile grafico del template

RevasOS Website Builder ti consente di creare siti web completamente personalizzabili, grazie a un sistema che assegna classi CSS a ogni elemento del sito. Questa funzionalità ti permette di scrivere il tuo CSS personalizzato per adattare lo stile del sito alle tue esigenze specifiche. Puoi aggiungere i tuoi stili direttamente all'interno di un tag <style> o importare un file CSS esterno.

• Come funziona
• Inserire CSS Personalizzato
• Inserisci stile esterno
• Classi disponibili
  • Layout
  • Link e bottoni
  • Blocco default
  • Blocco principale
  • Sottoblocco di una griglia
  • Sottoblocco di colonne
  • Sottoblocco di una lista
  • Intestazione
  • Notifica
  • Sezione in evidenza
  • Footer
  • Autori
  • Link dei social
  • Allegati video/immagini
  • Feed
  • Contenuti
  • Configuratore della lingua
  • Configuratore accessibilità
  • Errori

Come funziona

Ogni elemento all'interno di un template RevasOS ha una classe CSS predefinita, che puoi utilizzare per applicare i tuoi stili. La struttura è progettata per essere modulare e intuitiva, facilitando le modifiche senza compromettere la stabilità del design globale.

Inserire CSS Personalizzato

Puoi aggiungere il tuo codice CSS direttamente nel codice della pagina utilizzando un tag <style>. Esempio:

<style>
  .custom-header {
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
    font-size: 1.5rem;
  }
</style>

Approfondisci

Leggi la guida su come aggiungere stile personalizzato

Inserisci stile esterno

Se preferisci utilizzare un file CSS esterno per gestire gli stili, puoi farlo collegando il foglio di stile tramite il tag :

<link rel="stylesheet" href="https://example.com/tuo-stile.css"/>

Approfondisci

Leggi la guida su come inserire fogli di stile esterni

Classi disponibili

Di seguito trovi la lista di tutte le classi disponibili che puoi modificare:

Layout

.App {
  /* Layout dell'applicazione principale */
}

.Page {
  /* Layout di una singola pagina */
}

Link e bottoni

.SolidLink__base-size {
  /* Stile base per un link con sfondo pieno */
}

.SoftLink__base-size {
  /* Stile base per un link con sfondo morbido e bordo */
}

.OutlineLink__base-size {
  /* Stile base per un link con bordo e sfondo trasparente */
}

.GhostLink__base-size {
  /* Stile base per un link trasparente con hover leggero */
}

.TextLink__base-size {
  /* Stile base per un link di solo testo */
}

Blocco default

.DefaultBlock {
  /* Contenitore principale di un blocco standard */
}

.DefaultBlock--container {
  /* Layout contenitore interno del blocco standard */
}

.DefaultBlockContainer--first-slot {
  /* Primo slot del contenitore nel blocco standard */
}

.DefaultBlockContainer--second-slot {
  /* Secondo slot del contenitore nel blocco standard */
}

.DefaultBlock--items-wrapper {
  /* Wrapper per gli elementi del blocco standard */
}

.DefaultBlock--items-container {
  /* Contenitore per gli elementi interni del blocco standard */
}

.DefaultBlock--columns-container {
  /* Contenitore per le colonne del blocco standard */
}

.DefaultBlock--title {
  /* Titolo del blocco standard */
}

.DefaultBlock--icon {
  /* Icona all'interno del blocco standard */
}

.DefaultBlock--description {
  /* Descrizione del blocco standard */
}

.DefaultBlock--attachment {
  /* Allegato o elemento multimediale del blocco standard */
}

Blocco principale

.MainBlock {
  /* Contenitore principale di un blocco principale */
}

.MainBlock--container {
  /* Contenitore interno del blocco principale */
}

.MainBlockContainer--first-slot {
  /* Primo slot del contenitore del blocco principale */
}

.MainBlockContainer--second-slot {
  /* Secondo slot del contenitore del blocco principale */
}

.MainBlock--items-wrapper {
  /* Wrapper per gli elementi del blocco principale */
}

.MainBlock--items-container {
  /* Contenitore per gli elementi interni del blocco principale */
}

.MainBlock--columns-container {
  /* Contenitore per le colonne del blocco principale */
}

.MainBlock--title {
  /* Titolo del blocco principale */
}

.MainBlock--icon {
  /* Icona all'interno del blocco principale */
}

.MainBlock--description {
  /* Descrizione del blocco principale */
}

.MainBlock--attachment {
  /* Allegato o elemento multimediale del blocco principale */
}

.MainBlock--link {
  /* Link principale nel blocco principale */
}

Sottoblocco di una griglia

.BlockItemsGrid {
  /* Layout per una griglia di blocchi */
}

.GridBlockItem {
  /* Elemento singolo di una griglia di blocchi */
}

.GridBlockItem--container {
  /* Contenitore per un elemento della griglia */
}

.GridBlockItemContainer--second-slot {
  /* Secondo slot di un elemento della griglia */
}

.GridBlockItemContainer--first-slot {
  /* Primo slot di un elemento della griglia */
}

.GridBlockItem--title {
  /* Titolo di un elemento della griglia */
}

.GridBlockItem--description {
  /* Descrizione di un elemento della griglia */
}

.GridBlockItem--attachment {
  /* Allegato o elemento multimediale di un elemento della griglia */
}

Sottoblocco di colonne

.BlockItemsColumns {
  /* Layout per colonne di blocchi */
}

.BlockItemsColumns--column {
  /* Colonna singola all'interno di un layout a colonne */
}

.ColumnsBlockItem {
  /* Elemento singolo all'interno di una colonna */
}

.ColumnsBlockItem--container {
  /* Contenitore per un elemento di una colonna */
}

.ColumnsBlockItemContainer--second-slot {
  /* Secondo slot di un elemento di una colonna */
}

.ColumnsBlockItemContainer--first-slot {
  /* Primo slot di un elemento di una colonna */
}

.ColumnsBlockItem--title {
  /* Titolo di un elemento di una colonna */
}

.ColumnsBlockItem--description {
  /* Descrizione di un elemento di una colonna */
}

.ColumnsBlockItem--attachment {
  /* Allegato o elemento multimediale di una colonna */
}

Sottoblocco di una lista

.BlockItemsLinear {
  /* Layout per blocchi lineari */
}

.LinearBlockItem {
  /* Elemento singolo all'interno di un layout lineare */
}

.LinearBlockItem--container {
  /* Contenitore per un elemento lineare */
}

.LinearBlockItemContainer--second-slot {
  /* Secondo slot di un elemento lineare */
}

.LinearBlockItemContainer--first-slot {
  /* Primo slot di un elemento lineare */
}

.LinearBlockItem--title {
  /* Titolo di un elemento lineare */
}

.LinearBlockItem--description {
  /* Descrizione di un elemento lineare */
}

.LinearBlockItem--attachment {
  /* Allegato o elemento multimediale di un blocco lineare */
}

Intestazione

.Header {
  /* Intestazione generale, posizione fissa in alto */
}

.Header--desktop-wrapper {
  /* Wrapper per la versione desktop, include padding, sfondo e bordi */
}

.Header--container {
  /* Contenitore principale dell'intestazione, gestisce l'allineamento e il layout */
}

.Header--logo {
  /* Logo dell'intestazione, dimensioni e posizione dell'immagine */
}

.Header--desktop-links {
  /* Link visibili nella versione desktop */
}

.Header--desktop-links-wrapper {
  /* Wrapper dei link nella versione desktop, gestisce il gap tra gli elementi */
}

.Header--menu-button {
  /* Bottone per il menu mobile, include bordi e stile interattivo */
}

.Header--mobile-wrapper {
  /* Wrapper per la versione mobile dell'intestazione */
}

.Header--mobile-links {
  /* Link visibili nella versione mobile, layout verticale */
}

.Header--mobile-main-action {
  /* Azione principale nel menu mobile */
}

Notifica

.Notification {
  /* Barra delle notifiche, con sfondo e layout orizzontale */
}

.Notification--container {
  /* Contenitore della barra delle notifiche */
}

.Notification--title {
  /* Titolo della notifica */
}

.Notification--description {
  /* Descrizione aggiuntiva visibile nella versione desktop */
}

.Notification--link {
  /* Link o pulsante della notifica, con stile interattivo */
}

Sezione in evidenza

.MainItem {
  /* Componente principale, sfondo e bordo */
}

.MainItem--container {
  /* Contenitore principale del componente, layout adattivo */
}

.MainItemContainer--first-slot {
  /* Primo slot del componente principale, per contenuti descrittivi */
}

.MainItemContainer--second-slot {
  /* Secondo slot del componente principale, per immagini o video */
}

.MainItem--title {
  /* Titolo del componente principale */
}

.MainItem--description {
  /* Descrizione del componente principale */
}

.MainItem--attachment {
  /* Allegato o elemento multimediale del componente */
}

.MainItem--link {
  /* Link interattivo del componente principale */
}

Footer

.Footer {
  /* Piè di pagina, sfondo e bordo */
}

.Footer--logo {
  /* Logo del piè di pagina */
}

.Footer--container {
  /* Contenitore principale del piè di pagina, layout adattivo */
}

.Footer--links-title {
  /* Titolo delle sezioni di link nel piè di pagina */
}

.Footer--links {
  /* Sezione di link nel piè di pagina */
}

.Footer--socials {
  /* Sezione per i link ai social nel piè di pagina */
}

.Footer--authors {
  /* Sezione degli autori nel piè di pagina */
}

.Footer--foot {
  /* Parte inferiore del piè di pagina, contiene copyright e note */
}

.FooterFoot--container {
  /* Contenitore per la parte inferiore del piè di pagina */
}

Autori

.Author {
  /* Contenitore principale per l'autore, con layout verticale e gap tra gli elementi */
}

.Author--container {
  /* Contenitore secondario per l'autore, con dimensioni e spaziatura specifiche */
}

.Author--title {
  /* Titolo dell'autore, testo in evidenza */
}

.Author--description {
  /* Descrizione dell'autore, con testo meno prominente */
}

.Author--image {
  /* Immagine dell'autore, con gestione del contenuto e stile */
}

.Author--links {
  /* Contenitore per i link associati all'autore */
}

.Author--link {
  /* Stile per i link dell'autore, interattivi e accessibili */
}

Link dei social

.SocialLink--icon {
  /* Icona per i link ai social, adattabile a diversi stili */
}

Allegati video/immagini

.Attachment--video {
  /* Elemento per allegati video, occupa l'intera larghezza e altezza */
}

.Attachment--figure {
  /* Figura allegata, con gestione dello stato di caricamento */
}

.AttachmentFigure--picture {
  /* Immagine all'interno della figura allegata */
}

.AttachmentFigure--caption {
  /* Didascalia della figura allegata */
}

.AttachmentPicture--source {
  /* Sorgente dell'immagine allegata */
}

.AttachmentPicture--image {
  /* Immagine allegata con adattamento alle impostazioni del contenitore */
}

Feed

.FeedBlockItem {
  /* Blocco di un elemento del feed, con bordi, sfondo e interattività */
}

.FeedBlockItem--container {
  /* Contenitore principale di un elemento del feed */
}

.FeedBlockItemContainer--second-slot {
  /* Secondo slot di un elemento del feed, per contenuti secondari */
}

.FeedBlockItemContainer--first-slot {
  /* Primo slot di un elemento del feed, per contenuti principali */
}

.FeedBlockItem--title {
  /* Titolo di un elemento del feed */
}

.FeedBlockItem--description {
  /* Descrizione di un elemento del feed */
}

.FeedBlockItem--date {
  /* Data di pubblicazione dell'elemento del feed */
}

.FeedBlockItem--attachment {
  /* Allegato di un elemento del feed */
}

.FeedBlockItem--attachment-image {
  /* Immagine allegata a un elemento del feed */
}

.FeedPage {
  /* Pagina del feed, con layout e sfondo specifici */
}

.FeedPage--header-container {
  /* Contenitore dell'intestazione della pagina del feed */
}

.FeedPage--header {
  /* Intestazione della pagina del feed */
}

.FeedPage--title {
  /* Titolo della pagina del feed */
}

.FeedPage--description {
  /* Descrizione della pagina del feed */
}

.FeedPage--items-container {
  /* Contenitore per gli elementi della pagina del feed */
}

.FeedPage--items {
  /* Griglia degli elementi del feed */
}

Contenuti

.ContentPage {
  /* Pagina di contenuti, con sfondo e layout principale */
}

.ContentPage--header {
  /* Intestazione della pagina di contenuti */
}

.ContentHeader--container {
  /* Contenitore principale dell'intestazione dei contenuti */
}

.ContentHeaderContainer--first-slot {
  /* Primo slot dell'intestazione dei contenuti */
}

.ContentHeaderContainer--second-slot {
  /* Secondo slot dell'intestazione dei contenuti */
}

.ContentHeader--feed-title {
  /* Titolo del feed associato ai contenuti */
}

.ContentHeader--title {
  /* Titolo principale della sezione dei contenuti */
}

.ContentHeader--description {
  /* Descrizione della sezione dei contenuti */
}

.ContentHeader--published-date {
  /* Data di pubblicazione della sezione dei contenuti */
}

.ContentHeader--attachment {
  /* Allegato visivo o video della sezione dei contenuti */
}

.ContentPage--content {
  /* Contenuto principale della pagina, con stile tipografico */
}

Configuratore della lingua

.Toolbar--locale-configurator {
  /* Contenitore principale del configuratore della lingua, con layout e z-index */
}

.LocaleConfigurator--trigger-button {
  /* Pulsante per attivare il menu del configuratore della lingua */
}

.LocaleConfigurator--trigger-icon {
  /* Icona associata al pulsante del configuratore della lingua */
}

.LocaleConfigurator--navigation-menu {
  /* Menu di navigazione per la selezione della lingua, con stile e animazioni */
}

.LocaleNavigationMenu--link {
  /* Link all'interno del menu di navigazione, con stato e comportamento definiti */
}

.LocaleConfigurator--viewport {
  /* Contenitore per il viewport del configuratore della lingua */
}

.LocaleConfigurator--viewport-container {
  /* Contenitore animato per il viewport del configuratore della lingua */
}

.LocaleConfigurator--label {
  /* Etichetta descrittiva per il configuratore della lingua */
}

.LocaleConfigurator--radio-group {
  /* Gruppo di opzioni radio per selezionare la lingua */
}

Configuratore accessibilità

.ToolBar--accessibility-configurator {
  /* Contenitore principale del configuratore di accessibilità, con z-index */
}

.AccessibilityConfigurator--trigger-button {
  /* Pulsante per attivare il menu del configuratore di accessibilità */
}

.AccessibilityConfigurator--trigger-icon {
  /* Icona associata al pulsante del configuratore di accessibilità */
}

.AccessibilityConfigurator--menu-content {
  /* Contenuto del menu del configuratore di accessibilità, con stile e animazioni */
}

.AccessibilityMenu--label {
  /* Etichetta per il menu di accessibilità */
}

.AccessibilityMenu--radio-group {
  /* Gruppo di opzioni radio per le impostazioni di accessibilità */
}

.AccessibilityMenu--radio-item {
  /* Elemento del gruppo radio per selezionare una configurazione di accessibilità */
}

.AccessibilityMenu--label__small-size {
  /* Etichetta di dimensioni ridotte per informazioni aggiuntive nel menu di accessibilità */
}

Errori

.AppError {
   /* per personalizzare la pagina del messaggio di errore di tipo panic*/
}

.AppError--container {
  /* per personalizzare il contenitore del messaggio di errore di tipo panic*/
}

.AppError--title {
  /* per personalizzare il titolo del messaggio di errore di tipo panic*/
}

.AppError--details {
  /* per personalizzare i dettagli del messaggio di errore di tipo panic*/
}

.AppError--message {
  /* per personalizzare il messaggio aggiuntivo del messaggio di errore di tipo panic*/
}

.AppError--list {
  /* per personalizzare la lista di informazioni del messaggio di errore di tipo panic*/
}

.DefaultError {
   /* per personalizzare il contenitore del messaggio di errore */
}

.DefaultError--title {
   /* per personalizzare il titolo del messaggio di errore */
}

.DefaultError--description {
  /* per personalizzare la descrizione del messaggio di errore */
}

.DefaultError--link {
  /* per personalizzare il link del messaggio di errore */
}

.DefaultError--details {
  /* per personalizzare i dettagli del messaggio di errore */
}

### Altro

.DefaultLinkIcon__small-size {
    /* per personalizzare l'icona accanto ai link */
}

.LoadingBar {
    /* per personalizzare la barra di caricamento */
}