Il look & feel di IRIS è basato sul framework Bootstrap a cui viene applicato un tema responsive chiamato Londinium.
Il layout è a colonna singola o a doppia colonna (colonna di navigazione sulla sinistra, collassabile).
L’Ateneo può personalizzare gli stili CSS e le immagini (logo e immagini mostrate nella home page e nell’intestazione del portale pubblico). Le risorse si raggiungono con il percorso: "Visione completa" > Configurazione > Portale pubblico > CMS > Cartella “sr”.
La cartella “sr” ha la seguente struttura:
e contiene i seguenti file:
/sr/cineca/css/cineca.css |
|---|
Le immagini possono essere sovrascritte a quelle precaricate, mantenendo però il nome originario e l’eventuale sequenza numerica riportata nel nome stesso.
L’immagine logo_instance.png corrisponde al logo mostrato in alto a destra della home page del portale pubblico e ha dimensioni indicative di 350x100 pixel.
L’immagine logo_iris_small_narrowed.png corrisponde al logo mostrato a sinistra in alto nell’intestazione e ha dimensioni indicative di 170x40 pixel.
Le immagini che ruotano in sequenza automatica (carosello) alla voce “Prodotti recenti” della home page del portale pubblico, hanno nome news_1120x400_trasparent_01.png, news_1120x400_trasparent_02.png, etc. e dimensioni come indicato nel nome del file (1120x400 pixel).
Le immagini che ruotano in sequenza automatica (carosello) al logout hanno nome au_slide1_w1000.jpg, au_slide2_w1000.jpg, etc. e dimensioni indicative di 800x400 pixel o più.
In verde le immagini personalizzabili nell'intestazione e nella home page del portale pubblico:
La sequenza secondo cui i CSS sono chiamati nella costruzione delle pagine è:
una regola CSS definita in cineca.css viene renderizzata per ultima, ovvero sostituisce una definizione precedente o la sovrascrive.
Questo CSS contiene il reset degli stili e le formattazioni degli elementi principali, fra cui:
Questo CSS contiene alcuni stili aggiuntivi o per funzionalità specifiche, fra cui:
Questo CSS contiene stili aggiuntivi o di riscrittura rispetto ai precedenti.
Se ad esempio si vuole imporre un colore diverso dal bianco ai link di un dato livello di navigazione basta aggiungere in cineca.css la stessa classe utilizzata nei CSS precedenti, ma con un valore differente della proprietà color:
lasciando invariati, quando possibile, gli stili del tema in uso.