Visite: 10198

Valutazione attuale: 0 / 5

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

Visite: 5720

Valutazione attuale: 0 / 5

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

Immagine menu = images/socials/jed.png

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

JED 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

Classe Immagine = Icon Icon-info

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

Visite: 9004

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.

Visite: 6149

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.

it Web Toolkit + Joomla! = ItaliaPA

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.

it + J! = IPA

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!

Visite: 137

Valutazione attuale: 0 / 5

Il template supporta 4 tipi differenti di sfondi per i contenuti. Per impostare lo sfondo desiderato bisogna agire sul parametro Sfondo contenuti direttamente nella pagina dello stile (Estensioni > Template > Stili).

Destra - Right

Background - Right

Sinistra - Left

Background - Left

Doppio - Double

Background - Double

Niente - None

Senza sfondo.

Torna su