Temi del portale

• 8 minuti

Power Pages usa il framework front-end Bootstrap per controllare la struttura e il layout del sito Web. Bootstrap è un pacchetto di modelli di progettazione HTML e Cascading Style Sheets (CSS) per tipografia, moduli, pulsanti, spostamento e altri elementi, oltre alle estensioni JavaScript facoltative. Una delle numerose funzionalità interessanti di Bootstrap è il layout reattivo predefinito che regola automaticamente il sito Web in modo che abbia un aspetto esteticamente gradevole su tutti i dispositivi, dai piccoli telefoni ai grandi desktop.

Concetti fondamentali del tema

Un tema determina l'aspetto di tutte le pagine del sito Web per garantire la coerenza visiva. Il tema controlla la struttura di spostamento, il banner, i colori e i caratteri e altri elementi visivi di una pagina Web.

È possibile implementare i modelli Web inclusi in Power Pages usando componenti Bootstrap standard con stili personalizzati aggiuntivi minimi. Pertanto, i siti Web basati su questi modelli possono sfruttare le opzioni di personalizzazione fornite da Bootstrap. È possibile personalizzare il tema in modo che venga applicato in modo coerente all'intero sito Web.

CSS sulle pagine Web

Cascading Style Sheets (CSS) è un linguaggio che determina lo stile di una pagina Web mediante la descrizione di come devono essere visualizzati gli elementi HTML, inclusi testo, caratteri, colori, sfondi, bordi e margini.

La modifica dello stile delle pagine del sito Web può essere un'operazione semplice quanto applicare le istruzioni CSS direttamente a una pagina. Quando si modifica il contenuto della pagina usando Visual Studio Code, CSS è disponibile come file separato. Il contenuto di tale file viene quindi memorizzato nella colonna CSS personalizzato della riga della pagina Web. Tale file CSS è incluso e fa parte della pagina e gli stili vengono applicati automaticamente. Ad esempio, se è necessario aumentare l'altezza della barra di spostamento nella parte superiore di una home page per inserirvi un logo, è sufficiente modificare il file CSS e quindi aggiungere un'istruzione CSS personalizzata.

.navbar-static-top.navbar { min-height: 100px; }

Questo processo funziona per piccoli aggiustamenti su una singola pagina oppure quando una pagina richiede un design esclusivo, ad esempio una pagina di destinazione di un evento specifico. Un approccio migliore e più flessibile consiste nel registrare le personalizzazioni in uno o più file CSS per poi applicarle all'intero sito Web o a parte di esso.

Applicazione delle personalizzazioni

Power Pages offre una raccolta completa di temi e strumenti per la progettazione del sito Web. Effettuare una selezione tra i diversi temi da usare nel sito Web e personalizzarli ulteriormente usando le opzioni di stile.

L'area di lavoro Stile nello studio di progettazione di Power Pages controlla quali stili CSS vengono applicati al sito Web e consente di implementare strutture di sito universali. È possibile incorporare modifiche al marchio aziendale e visualizzare i cambiamenti effettuati nel riquadro di anteprima a destra della finestra dell'app. L'area di lavoro Stile fornisce più temi predefiniti e per ognuno è possibile modificare la combinazione di colori, il colore di sfondo, i tipi di carattere, la struttura dei pulsanti e la spaziatura delle sezioni.

Temi

I temi creano un aspetto e un comportamento complessivo per il sito definendo stili per vari elementi di testo, pulsanti, collegamenti e layout di sezione. Se il sito richiede ulteriori personalizzazioni, è possibile usare la funzionalità Gestisci CSS.

Nell'area di lavoro Stile è possibile scegliere tra i temi disponibili. Dopo aver selezionato un tema, è possibile personalizzare ulteriormente i singoli elementi per creare lo stile desiderato.

Gestione di CSS

Per accedere alla funzionalità Gestisci CSS selezionare il menu con i puntini di sospensione (...), quindi Gestisci CSS nel riquadro del tema.

In tutte le pagine di tutti i siti Web Power Pages sono già inclusi i file seguenti: bootstrap.min.css, theme.css e portalbasictheme.css. Questi file definiscono gli stili per l'intero sito Web. È possibile caricare più file CSS usando il collegamento Carica e quindi apportando le necessarie modifiche nell'editor di Visual Studio Code. Per altre informazioni, consultare Gestire i file CSS in Power Pages.

È necessario valutare l'approccio da adottare per apportare modifiche allo stile del sito Web:

• Creare uno stile completo per l'intero sito e quindi sostituire il contenuto di un file CSS. Questo processo funziona bene se gli addetti alla progettazione possono assicurare la definizione di tutti gli elementi pertinenti. Questo approccio consente di creare stili controllati a livello centralizzato e a garantire la coerenza in tutto il sito Web.
• Ridefinire solo gli elementi che richiedono modifiche, ad esempio i colori e la dimensione del carattere. Creare e caricare il file CSS contenente solo quelle modifiche incrementali. Questo processo funziona bene se la struttura di destinazione è simile alla struttura inclusa nel modello selezionato e sono necessarie solo piccole modifiche di stile. Questo approccio consente di applicare modifiche incrementali che possibile annullare.

Modifiche locali di CSS

Anziché applicare codice CSS all'intero sito, è possibile caricare i file CSS come file Web usando l'app Gestione del portale. Il codice CSS contenuto nel file Web si applica alla pagina padre del file e a tutti i discendenti di quella pagina, consentendo così di creare sezioni completamente personalizzate del sito.

Ad esempio, se si vuole applicare uno stile diverso alla sezione Notizie e a tutti i nuovi articoli che contiene, passare a Notizie, creare un file Web figlio con estensione .css e caricare il file CSS (il nome non è rilevante). Lo stile verrà quindi applicato solo alla sezione Notizie e al relativo contenuto.

Personalizzazione di Bootstrap

Il modo standard per creare una versione personalizzata di Bootstrap è usando il sito ufficiale Bootstrap. Tuttavia, a causa della popolarità di Bootstrap, sono stati creati anche molti altri siti di origine che consentono di eseguire la sessa operazione. Questi siti possono fornire un'interfaccia più intuitiva per la personalizzazione di Bootstrap o versioni predefinite di Bootstrap da scaricare. Per altre informazioni, visitare il sito della personalizzazione ufficiale di Bootstrap.

Dopo aver impostato Bootstrap, vengono generati uno o più file da caricare come file Web. A meno che la finalità non sia sostituire completamente gli stili originali, assicurarsi di non usare bootstrap.css, bootstrap.min.css, theme.css o theme.min.css negli URL parziali a causa del modo in cui Power Pages gestisce più file CSS.