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).

CSS e immagini

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
/sr/cineca/images/interface/logo_instance.png
/sr/cineca/images/interface/logo_iris_small_narrowed.png
/sr/cineca/images/wallpaper/au_slide1_w1000.jpg
/sr/cineca/images/wallpaper/au_slide2_w1000.jpg
/sr/cineca/images/wallpaper/au_slide..._w1000.jpg
/sr/cineca/images/wallpaper/news_1120x400_trasparent_01.png
/sr/cineca/images/wallpaper/news_1120x400_trasparent_02.png
/sr/cineca/images/wallpaper/news_1120x400_trasparent_...png
/sr/londinium/css/londinium-theme.css
/sr/londinium/css/styles.css

Personalizzazione delle immagini

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 180x40 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:

Personalizzazione dei CSS

La sequenza secondo cui i CSS sono chiamati nella costruzione delle pagine è:

1. londinium-theme.css
2. styles.css
3. cineca.css

per cui uno stile definito in cineca.css viene renderizzato per ultimo, ovvero sovrascrive quando quanto definito nei CSS precedenti.

CSS: londinium-theme.css

Questo CSS contiene il reset degli stili e le formattazioni degli elementi principali, fra cui:

• body
• link
• titoli
• liste
• navbar
• menu dropdown
• form
• progress bar
• alert
• tooltip
• popover
• paginazioni
• tabelle
• thumbnail.

CSS: styles.css

Questo CSS contiene alcuni stili aggiuntivi o per funzionalità specifiche, fra cui:

• widget
• chart e statistiche
• sidebar
• navigazione
• breadcrumb
• footer
• plugin
• file upload
• datatable
• datepicker
• editor WYSIHTML5
• lightbox.

CSS: cineca.css

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.