In questo articolo scritto per joomla.it ho cercato di spiegare come funziona la Classe pagina che può essere applicata ad ogni voce di menu dai parametri > Opzioni avanzate > Opzioni visualizzazione pagina. Dopo aver scritto la classe test-classe e dopo aver inserito nella index.php del template il codice php nel modo descritto nell'articolo, se ispezionate il codice html con firebug vedrete che nel tag body è apparso ora un ID avente valore test-classe che quindi posso formattare con un paio di regole css:

#test-classe {
background-color:#0088CC;
}

#test-classe .pull-right a {
   color: #F9C804;
}

rendendo blu il background di questa sola pagina e analogamente tingendo di giallo il Back to top a fondo pagina.

Se andate invece nella Home vedrete come la stessa classe test-classe viene utilizzata per cambiare aspetto al titolo pagina e allo sfondo dell'articolo, stavolta scrivendola nel box Classe pagina della voce di menu Home facendola precedere da uno spazio bianco.

Queste le regole di stile utilizzate per la home page:

.test-classe {
  background-color: #F5F5F5;
  border: 1px solid #E3E3E3;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
  margin-bottom: 20px;
  min-height: 20px;
  padding: 19px;
  font-size:15px;
}
.test-classe h2 a {
  font-size: 36px;
  color: #F9C804;
}

Come vedete è possibile utilizzare questa proprietà della Classe pagina per interessanti personalizzazioni.

Qualcuno mi ha chiesto come poter realizzare nel proprio sito una animazione con una immagine come  come quella che vedete qui in basso a sinistra.

Ecco allora questo breve tutorial. In realtà la cosa è proprio semplicissima ed utilizza le proprietà dei css3, ormai ampiamente supportate da tutti i browser moderni.

Niente javascript, jquery, mootools, flash o qualsiasi altro script. Quindi massima leggerezza e compatibilità.

 Si prende una immagine di adeguata dimensione e fattezza e la si incolla in un modulo di tipo html personalizzato. Si pubblica questo modulo in una adeguata posizione del template. Io nel protostar l'ho pubblicata nella posizione debug. Dobbiamo aver cura di inserire l'immagine dentro un div avente una determinata classe a scelta. Io l'ho chiamata apina.Poi la dobbiamo solo formattare con un  paio di regolette css che, se ispezionate il codice con firebug, dovreste scoprire da soli.

Con questa:

div.apina {
  bottom: -210px; <-- la sposto fuori dallo schermo a sinistra
  left: -130px;  <-- la sposto sotto lo  schermo
  position: fixed; <-- la costringo in una posizione assoluta e fissa nel monitor anche allo scrolling
  transform: scale(0.6) rotate(45deg); <--- la riduco al 60 per cento e la piego di 45 gradi
  transition-duration: 0.5s; <-- stabilisco in mezzo secondo il tempo dell'animazione
  z-index: 100; <--- la tengo sopra agli altri elementi nella pagina
}

mentre con questa:

al puntatore del mouse sopra l'immagine avverrà il cambiamento. Vi sarà adesso chiaro che potrete giocare in diversi modi con questi valori per ottenere l'effetto desiderato. Io ho linkato all'immagine un mio sito esterno ma potrete ovviamente linkare anche pagine dello stesso sito, ad esempio per mandare l'utente in una speciale pagina.

Buone animazioni!

Alla prossima.

tonicopi

 

In quest'area pubblicherò piccoli tutorial e guide dove cerco di spiegare qualche particolare funzione di joomla 3.5, sempre accompagnate dalla relativa demo.

In questo articolo di prova faccio comparire alcune caratteristiche presenti negli articoli se utilizziamo la visualizzazione di TZ Portfolio. Intanto possiamo inserire immagini, gallerie di immagini, vari files media audio e video, campi aggiuntivi di ogni genere e allegati. Possiamo far comparire questi dati aggiuntivi sotto il contenuto dell'articolo. Possiamo aggiungere una mappa di google. Possiamo mostrare l'autore con un suo link e la sua icona. Cosa che ci sarà molto utile per un sito di informazione con la presenza di vari autori. Possiamo inserire commenti negli articoli. Possiamo mostrare i pulsanti di facebook, google plus, twitter e pinterest.

Tutto questo nei normali contenuti di Joomla!  senza bisogno di installare alcuna estensione aggiuntiva oltre a TZ Portfolio.

Se il tutto funzionasse alla perfezione sarebbe proprio una bella pacchia. Invece riscontro diversi problemi nell'impostare diverse cose. Tanto da poter per il momento concludere che la sola caratteristica che si può utilizzare senza particolari problemi è la visualizzazione portfolio.

 

Grazie di cuore del tuo contributo!

Darò conto in questa pagina delle donazioni ricevute e del loro impiego.

Per ora sei il primo!

TZ Portfolio è una estensione gratuita che ci consente di mostrare e organizzare i contenuti di Joomla! in modo assai interessante ed utile, consentendoci di fare diverse cose che non sarebbero possibili con la normale gestione del nostro amato cms.

Abbiamo inserito qui un video di una quindicina di secondi appena.