eshiol.it

All'interno del megamenu è possibile aggiungere pulsanti invece di semplici voci di menu. È il caso del pulsante Accedi/Esci.

Sono definiti 7 tipologie di tabelle: Default, Compact, Complex, Irregular, Responsive, Swipe, Twoheaders. Le tabelle possono essere inserite tramite apposito codice. Ogni nuova tabella sarà creata con la formattazione di default se viene creata mediante l'editor TinyMCE. Tramite plugin javascript le tabelle prive di formattazione saranno formattate con il formato Default.

Componente per la visualizzazione cronologica di eventi.

L'uso delle icone può rendere un sito web molto più professionale e accattivante. Il template ItaliaPA supporta le seguenti icone derivate sia dal Web Toolkit che da Bootstrap Italia. Il codice da utilizzare per inserirle all'interno dei propri articoli è il seguenre: <span class="Icon Icon-external-link"></span>

• Icon-italiapa
  Icon-ipa

• Icon-joomla
  Icon-it-joomla

• Icon-spid-joomla

• Icon-spid

• Icon-designers-italia
  Icon-it-designers-italia

• Icon-team-digitale
  Icon-it-team-digitale

• Icon-blank

• Icon-attachment

• Icon-behance

• Icon-linkedin

• Icon-youtube

• Icon-instagram

• Icon-medium

• Icon-github

• Icon-slideshare

• Icon-googleplus

• Icon-gsuite

• Icon-flickr

• Icon-expand-media

• Icon-list

• Icon-pin

• Icon-facebook

• Icon-share

• Icon-twitter

• Icon-whatsapp

• Icon-rss

• Icon-youtube-text

• Icon-telegram

• Icon-comment

• Icon-file

• Icon-mail

• Icon-video

• Icon-camera

• Icon-external-link

• Icon-link

• Icon-calendar

• Icon-pdf

• Icon-copy

• Icon-favorite

• Icon-error

• Icon-download

• Icon-upload

• Icon-unlock

• Icon-lock

• Icon-exit

• Icon-settings

• Icon-search

• Icon-zoom-in

• Icon-zoom-out

• Icon-arrow-down

• Icon-arrow-up

• Icon-more-items

• Icon-more-actions

• Icon-check

• Icon-cancel

• Icon-app

• Icon-refresh

• Icon-close

• Icon-drop-up

• Icon-drop-down

• Icon-collapse

• Icon-expand

• Icon-chevron-right

• Icon-chevron-left

• Icon-chevron-last

• Icon-chevron-first

• Icon-arrow-right

• Icon-arrow-left

• Icon-checkbox-checked

• Icon-checkbox

• Icon-radio-button

• Icon-radio-button-checked

• Icon-warning

• Icon-info

• Icon-question

• Icon-print

• Icon-user

• Icon-office

• Icon-phone

• Icon-fax

• Icon-mobile

• Icon-earth

• Icon-star-full

• Icon-bubble

• Icon-it-arrow-down

• Icon-it-arrow-down-circle

• Icon-it-arrow-down-triangle

• Icon-it-arrow-left

• Icon-it-arrow-left-circle

• Icon-it-arrow-left-triangle

• Icon-it-arrow-right

• Icon-it-arrow-right-circle

• Icon-it-arrow-right-triangle

• Icon-it-arrow-up

• Icon-it-arrow-up-circle

• Icon-it-arrow-up-triangle

• Icon-it-ban

• Icon-it-behance

• Icon-it-bookmark

• Icon-it-bootstrap

• Icon-it-box

• Icon-it-burger

• Icon-it-calendar

• Icon-it-camera

• Icon-it-card

• Icon-it-chart-line

• Icon-it-check

• Icon-it-check-circle

• Icon-it-chevron-left

• Icon-it-chevron-right

• Icon-it-clip

• Icon-it-clock

• Icon-it-close

• Icon-it-close-big

• Icon-it-close-circle

• Icon-it-code-circle

• Icon-it-collapse

• Icon-it-comment

• Icon-it-copy

• Icon-it-delete

• Icon-it-designers-italia

• Icon-it-download

• Icon-it-edit

• Icon-it-envelope

• Icon-it-error

• Icon-it-exchange-circle

• Icon-it-expand

• Icon-it-external-link

• Icon-it-eye-close

• Icon-it-eye-open

• Icon-it-facebook

• Icon-it-facebook-square

• Icon-it-fast-backward

• Icon-it-fast-forward

• Icon-it-file

• Icon-it-files

• Icon-it-flag

• Icon-it-flickr

• Icon-it-flickr-square

• Icon-it-folder

• Icon-it-fullscreen

• Icon-it-funnel

• Icon-it-github

• Icon-it-hearing

• Icon-it-help

• Icon-it-help-circle

• Icon-it-horn

• Icon-it-inbox

• Icon-it-info-circle

• Icon-it-instagram

• Icon-it-key

• Icon-it-less-circle

• Icon-it-link

• Icon-it-linkedin

• Icon-it-linkedin-square

• Icon-it-list

• Icon-it-lock

• Icon-it-locked

• Icon-it-mail

• Icon-it-map-marker

• Icon-it-map-marker-circle

• Icon-it-map-marker-minus

• Icon-it-map-marker-plus

• Icon-it-maximize

• Icon-it-maximize-alt

• Icon-it-medium

• Icon-it-medium-square

• Icon-it-minimize

• Icon-it-minus

• Icon-it-minus-circle

• Icon-it-more-actions

• Icon-it-more-items

• Icon-it-note

• Icon-it-pa

• Icon-it-password-invisible

• Icon-it-password-visible

• Icon-it-pencil

• Icon-it-pin

• Icon-it-plug

• Icon-it-plus

• Icon-it-plus-circle

• Icon-it-presentation

• Icon-it-print

• Icon-it-refresh

• Icon-it-restore

• Icon-it-search

• Icon-it-settings

• Icon-it-share

• Icon-it-star-full

• Icon-it-star-outline

• Icon-it-telephone

• Icon-it-tool

• Icon-it-twitter

• Icon-it-twitter-square

• Icon-it-unlocked

• Icon-it-upload

• Icon-it-user

• Icon-it-video

• Icon-it-warning

• Icon-it-warning-circle

• Icon-it-whatsapp

• Icon-it-whatsapp-square

• Icon-it-wifi

• Icon-it-wordpress

• Icon-it-xml

• Icon-it-youtube

• Icon-it-zoom-in

• Icon-it-zoom-out

Di seguito sono riportati i codici delle icone IcoMoon presenti in Joomla.

• icon-joomla

• icon-chevron-up
  icon-uparrow
  icon-arrow-up

• icon-chevron-right
  icon-rightarrow
  icon-arrow-right

• icon-chevron-down
  icon-downarrow
  icon-arrow-down

• icon-chevron-left
  icon-leftarrow
  icon-arrow-left

• icon-arrow-first

• icon-arrow-last

• icon-arrow-up-2

• icon-arrow-right-2

• icon-arrow-down-2

• icon-arrow-left-2

• icon-arrow-up-3

• icon-arrow-right-3

• icon-arrow-down-3

• icon-arrow-left-3

• icon-menu-2

• icon-arrow-up-4

• icon-arrow-right-4

• icon-arrow-down-4

• icon-arrow-left-4

• icon-share
  icon-redo

• icon-undo

• icon-forward-2

• icon-backward-2
  icon-reply

• icon-unblock
  icon-refresh
  icon-redo-2

• icon-undo-2

• icon-move

• icon-expand

• icon-contract

• icon-expand-2

• icon-contract-2

• icon-play

• icon-pause

• icon-stop

• icon-previous
  icon-backward

• icon-next
  icon-forward

• icon-first

• icon-last

• icon-play-circle

• icon-pause-circle

• icon-stop-circle

• icon-backward-circle

• icon-forward-circle

• icon-loop

• icon-shuffle

• icon-search

• icon-zoom-in

• icon-zoom-out

• icon-apply
  icon-edit
  icon-pencil

• icon-pencil-2

• icon-brush

• icon-save-new
  icon-plus-2

• icon-minus-sign
  icon-minus-2

• icon-delete
  icon-remove
  icon-cancel-2

• icon-publish
  icon-save
  icon-ok
  icon-checkmark

• icon-new
  icon-plus

• icon-plus-circle

• icon-minus
  icon-not-ok

• icon-ban-circle
  icon-minus-circle

• icon-unpublish
  icon-cancel

• icon-cancel-circle

• icon-checkmark-2

• icon-checkmark-circle

• icon-info

• icon-info-2
  icon-info-circle

• icon-question
  icon-question-sign
  icon-help

• icon-question-2
  icon-question-circle

• icon-notification

• icon-notification-2
  icon-notification-circle

• icon-pending
  icon-warning

• icon-warning-2
  icon-warning-circle

• icon-checkbox-unchecked

• icon-checkin
  icon-checkbox
  icon-checkbox-checked

• icon-checkbox-partial

• icon-square

• icon-radio-unchecked

• icon-radio-checked

• icon-circle

• icon-signup

• icon-grid
  icon-grid-view

• icon-grid-2
  icon-grid-view-2

• icon-menu

• icon-list
  icon-list-view

• icon-list-2

• icon-menu-3

• icon-folder-open
  icon-folder

• icon-folder-close
  icon-folder-2

• icon-folder-plus

• icon-folder-minus

• icon-folder-3

• icon-folder-plus-2

• icon-folder-remove

• icon-file

• icon-file-2

• icon-file-add
  icon-file-plus

• icon-file-minus

• icon-file-check

• icon-file-remove

• icon-save-copy
  icon-copy

• icon-stack

• icon-tree

• icon-tree-2

• icon-paragraph-left

• icon-paragraph-center

• icon-paragraph-right

• icon-paragraph-justify

• icon-screen

• icon-tablet

• icon-mobile

• icon-box-add

• icon-box-remove

• icon-download

• icon-upload

• icon-home

• icon-home-2

• icon-out-2
  icon-new-tab

• icon-out-3
  icon-new-tab-2

• icon-link

• icon-picture
  icon-image

• icon-pictures
  icon-images

• icon-palette
  icon-color-palette

• icon-camera

• icon-camera-2
  icon-video

• icon-play-2
  icon-video-2
  icon-youtube

• icon-music

• icon-user

• icon-users

• icon-vcard

• icon-address

• icon-share-alt
  icon-out

• icon-enter

• icon-exit

• icon-comment
  icon-comments

• icon-comments-2

• icon-quote
  icon-quotes-left

• icon-quote-2
  icon-quotes-right

• icon-quote-3
  icon-bubble-quote

• icon-phone

• icon-phone-2

• icon-envelope
  icon-mail

• icon-envelope-opened
  icon-mail-2

• icon-unarchive
  icon-drawer

• icon-archive
  icon-drawer-2

• icon-briefcase

• icon-tag

• icon-tag-2

• icon-tags

• icon-tags-2

• icon-options
  icon-cog

• icon-cogs

• icon-screwdriver
  icon-tools

• icon-wrench

• icon-equalizer

• icon-dashboard

• icon-switch

• icon-filter

• icon-purge
  icon-trash

• icon-checkedout
  icon-lock
  icon-locked

• icon-unlock

• icon-key

• icon-support

• icon-database

• icon-scissors

• icon-health

• icon-wand

• icon-eye-open
  icon-eye

• icon-eye-close
  icon-eye-blocked
  icon-eye-2

• icon-clock

• icon-compass

• icon-broadcast
  icon-connection
  icon-wifi

• icon-book

• icon-lightning
  icon-flash

• icon-print
  icon-printer

• icon-feed

• icon-calendar

• icon-calendar-2

• icon-calendar-3

• icon-pie

• icon-bars

• icon-chart

• icon-power-cord

• icon-cube

• icon-puzzle

• icon-attachment
  icon-paperclip
  icon-flag-2

• icon-lamp

• icon-pin
  icon-pushpin

• icon-location

• icon-shield

• icon-flag

• icon-flag-3

• icon-bookmark

• icon-bookmark-2

• icon-heart

• icon-heart-2

• icon-thumbs-up

• icon-thumbs-down

• icon-unfeatured
  icon-asterisk
  icon-star-empty

• icon-star-2

• icon-featured
  icon-default
  icon-star

• icon-smiley
  icon-smiley-happy

• icon-smiley-2
  icon-smiley-happy-2

• icon-smiley-sad

• icon-smiley-sad-2

• icon-smiley-neutral

• icon-smiley-neutral-2

• icon-cart

• icon-basket

• icon-credit

• icon-credit-2

L'uso delle icone può rendere un sito web molto più professionale e accattivante. Oltre all'uso delle immagini nelle voci di menu, mediante il campo Immagine menu, ItaliaPA permette di usare le icone messe a disposizione dal Web Toolkit e quelle proprie del template, sfruttando il campo Classe Immagine.

Partiamo dal caso base, l'inserimento di una immagine mediante il campo Immagine menu

Il risultano è la presenza dell'immagine a sinistra del menu.

 Voce di menu

Come detto nel preambolo, il Web Toolkit mette a disposizione una serie di Icone che possono essere sfruttare nelle voci di menu impostando la Classe Immagine

Anche in questo caso il risultato è la presenza di una icona alla sinistra del menu, ma si tratta di una delle icone proprie del Web Toolkit.

 Voce di menu

Infine, sia che si utilizzi una immagine, sia che si utilizzi una icona del Web Toolkit, è possibile allinearla a destra aggiungendo la classe u-floatRight al campo Classe Immagine.

 Voce di menu

Il template ItaliaPA può essere modificato direttamente dal Template Manager. Il problema con la modifica diretta dei file del template è che potrebbero essere sovrascritti da un aggiornamento. Quindi, per evitare di aggiungere le personalizzazioni CSS ad ogni aggiornamento, possiamo applicare una semplice soluzione implementata sin da ItaliaPA 3.8.0.9

Personalizzazione in modo sicuro del template

• Andare su Estensioni -> Template -> Lista template (direttamente dal menu o dalla sidebar posta sulla sinistra).
  
• Aprite il template ItaliaPA cliccando su Italiapa Dettagli e File.

Creare un nuovo file user.css

• Cliccare sul pulsante Nuovo file
• Verrà aperta una finestra modale, selezionare la posizione del file dalla cartella css a sinistra
• Digitare user nella casella nome file
• Selezionare css come tipo file
  
• Cliccare sul pulsante Crea

Adesso siete nell'editor del codice, nel quale è possibile inserire il codice personalizzato. Basta inserire solo le proprietà che si intende modificare o aggiungere.

• Cliccare su Salva per concludere la modifica.

Il menu Owner è collocato in alto a sinistra in posizione Owner, posizione disponibile a partire dalla versione 3.8.0.9 del template, e rappresenta la zona nella quale inserire i riferimenti ai siti web correlati al sito principale.

Nel caso delle scuole viene spesso utilizzato per inserire il link al sito del MIUR, mentre nel caso dei Comuni viene utilizzato per inserire il link al sito della Regione.

Associando le giuste classi ai link, mediante il campo Classe CSS del link, è possibile definire se visualizzati su mobile o desktop.

Mobile

Classe CSS del link: u-inline u-md-hidden u-lg-hidden u-sm-hidden

Desktop

Classe CSS del link: u-hidden u-md-inline u-lg-inline u-sm-inline

Note

È possibile aggiungere dello spazio tra le varie voci agendo sul parametro Classe CSS del link. L'elenco completo delle classi per la gestione della spaziatura è consultabile qui

Nel seguente esempio sono state omesse le voci di menu separatore ed è stata aggiunta la classe u-padding-right-s alla Classe CSS del link delle voci di menu it Web Toolkit e Joomla!

Il Web Toolkit mette a disposizione il componente Dialog per la visualizzazione di finestre modali per mostrare contenuti in evidenza, notifiche agli utenti, o contenuti personalizzati.

Il Web Toolkit mette a disposizione un componente per la visualizzazione dei tooltip. A differenza di quanto ci si possa apettare, il tooltip compare al click e non al passaggio del mouse sulla parola chiave.