css Zen Garden
The Beauty of CSS Design
Questa è una notizia flash. Per pubblicarla qui o per modificarne il contenuto si accede al Pannello Amministratore di Joomla. Così come tutti gli altri contenuti del sito. Non occorrono specifiche conoscenze per gestire un sito con Joomla! |
| Tabs negli articoli di Joomla! |
|
Volete mostrare negli articoli o in un modulo dei contenuti in delle schede che si aprono al clic o al mouse over con effetto TABS (schede che si alternano orizzontalmente) o ACCORDION (scorrimento a scomparsa verticale) con un piacevole effetto Ajax? Allora vi serve un moduletto semplicissimo da usare e molto versatile, veloce, leggero e preciso nel fare il suo lavoro: Jtabs è quello che fa per voi.
Il modulo è prodotto da http://mybrisbane.net ma ve ne offro una versione modificata che potete scaricare da qui: scarica Jtabs_tonicopi. Il modulo è stato poi ulteriormente modificato dal grande Vamba che è autore anche di questo bellissimo sito che vi invito a visitare: http://www.mamboitalia.com Una volta scaricato nel vostro computer ed installato nel modo usuale andrete in gestione moduli a configurarlo. Nelle prima opzione tabs_type scegliete se visualizzare il modulo a Tabs (schede) classiche disposte in orizzontale Horizontal (Tabs) oppure nella versione Accordion(Vertical Tabs) per vederle nella disposizione verticale con la tipica apertura a fisarmonica. Nella seconda opzione potrete scegliere sia per la visione verticale che per quella orizzontale se far aprire le tabs semplicemente passandogli sopra con il mouse oppure con il classico clic, che è l'opzione predefinita. In tab lable scriveremo il titolo della tab e nel riquadro successivo HTML,text inseriremo il testo o il codice html che vogliamo mostrare nella TAB. Questo per tutte le tabs che ci servono. Il modulo originale prevedeva dieci tabs ma io ne ho aggiunte altre dieci, che abbondare male non fa. Noi utilizzeremo solo quelle che ci servono. Dato che c'ero ho aggiunto anche la possibilità di inserire il Suffisso Classe CSS modulo (che a mio avviso è meglio che ci sia sempre) che rende facilmente personalizzabile il modulo. Adesso non avete che da pubblicare il modulo in un posizione esistente del vostro template oppure dentro un articolo inserendo la classica posizione modulo nei contenuti e vedere l'aspetto del vostro modulo. Il modulo è scritto bene e si adatterà al meglio sulla maggior parte dei templates. Ma se volete personalizzarlo ulteriormente non fate come me che mi stavo ad applicare in laboriose modifiche manuali al suo css.... Poichè il modulo in questione utilizza jQuery, che è una libreria JavaScript che semplifica e velocizza simpatici effetti animati e Ajax, e specificatamente un plugin di jQuery, possiamo utilizzare i templates che troviamo nel loro sito per personalizzare in modo velocissimo ed incredibilmente efficace il nostro modulo. Andate qui http://jqueryui.com/themeroller/ e prendete in considerazione solo le prime due caratteristiche di questo plugin Accordion e Tabs che sono quelle utilizzate dal nostro modulo jtabs. Guardate il menù nella colonna sinistra e cliccate su Gallery. Si apriranno 24 temi tra i quali scegliere quello che più si avvicina al risultato che volete ottenere. Ci cliccate sopra, guarderete e testerete l'effetto sulle vostre Tabs ed Accordion e quando avrete scelto il tema potete tornare nella colonna iniziale cliccando Roll Your Own. Da qui potrete rifinire la personalizzazione usando questo editor visuale incredibilmente potente e preciso. Alla fine, quando sarete pienamente soddisfatti dell'aspetto grafico ottenuto, cliccate sul pulsante arancione download theme, sempre nella colonna sinistra, che vi manderà in una nuova pagina da dove dovrete di nuovo cliccare sul pulsante DOWNLOAD, questa volta circa a metà pagina a destra. Una volta scaricato dezippate il file in una cartella del vostro computer. Di tutto questo pacchetto noi ci dobbiamo prendere solo il css e al massimo qualche immagine se abbiamo usato delle texture per gli sfondi. Ma per evitare confusioni io consiglio di copiarvi l'intera cartella delle immagini. Procedete dunque in questo modo: aprite la cartella CSS e poi la cartella col nome del tema che avete scelto (sarà custom-theme se avete personalizzato) quindi cercate il file che finisce con l'estensione .css (sarà jquery-ui-1.7.2.custom.css se avete personalizzato) e rinominatelo in jquery-ui.css e sovrascrivete il file css del modulo jtabs che trovate con questo percorso: modules/mod_jtabs/jquery/jquery-ui.css Quindi copiate la cartella images che trovate dentro il pacchetto che avete scaricato (che sarà di fianco al file css che avete appena rinominato e col quale avete sovrascritto il file css del modulo) e andate a sovrascrivere la cartella images del modulo che trovate in questo percorso: modules/mod_jtabs/jquery/images Adesso non ci resta altro che goderci il modulo che, se ci avete saputo fare, si integrerà davvero alla perfezione nel nostro sito. Il modulo jtabs può essere duplicato e pubblicato in diverse pagine del sito. Ma solo due volte, con le due diverse impostazioni TABS e ACCORDION, nella medesima pagina. Qui potete vedere una demo del modulo jtabs nei suoi diversi aspetti. |
Commenti
A proposito di questo modulo, io vorrei usarlo come menù: dunque metto la "sezione" nel tab lable e le "categorie" come link nel text HTML e devo dire che è davvero bello!!! Così ho tolto quell'inutile (da un mio punto di vista) pagina che viene fuori quando clicchi sulla sezione in un qualsiasi menù di joomla...
Cmq sia, io ho 10 voci di menù. Se clicco sulla categoria della 5° sezione (per esempio) appena mi carica la pagina il menù si ricompatta e lascia aperta solo la prima voce del menù. Ora, c'è un modo per tenere aperta la voce del menù che il visitatore seleziona anche dopo aver cliccato sulla categoria di suo interesse?
Non so se mi son spiegato...
Forse si potrebbe intervenire nel codice per modificarlo. Ma a che pro considerato che ci sono molte altre estensioni che lo fanno già? Qui ne trovi diversi:
http://extensions.joomla.org/extensions/structure-a-nav igation/menu-systems/accordion-menus
P.S. Ho provato anche replicare lo stesso codice HTML per tutte le 6 TAB, ma il risultato è sempre lo stesso : le prime 4 TAB perfette, la quinta me ne tagia un pezzo e la sesta addirittura mi scompare...
Grazie per ogni eventuale risposta e buona serata!
Conosci altri metodi per modificare il tema? Anche se si tratta di un metodo più complicato, non fa niente. Comunque grazie è un ottimo strumento!
Tuttavia ti voglio segnalare che mentre funziona bene con internet explorer 7 e 8 , e con google chrome, ho avuto dei problemi di allineamento nella pagina con firefox 3.6.3. Francamente non li ho saputi risolvere e non so se dipendono da una cattiva condifuraione o dal modulo, ma poichè con altri browse funziona....
E' un peccato per il modulo e per me che avevo già fatto il lavoro di inserimento. Comunque grazie di rendere dispobile il software.
Saluti
Ancora mille grazie per la tua disponibilità
http://extensions.joomla.org/extensions/photos-a-images/images-slidesho w
C'è solo l'imbarazzo della scelta. Se non dovesse funzionare con le immagini puoi sempre usare un modulo che mostra news a rotazione e dentro ogni articolo ci incolli una foto. Allora ce ne sono altre decine:
http://extensions.joomla.org/extensions/news-display/news-tickers-a- scrollers
Non è mica finita. Potresti usare anche una estensione che mostra i banner? Direi di si. Allora via con con altre decine di moduli:
http://extensions.joomla.org/extensions/ads-a-affiliate s/banner-manageme nt
Ma forse ti basta anche solo un'image rotator, a dire il vero, se lo devi pubblicare in left. Qui:
http://extensions.joomla.org/extensions/photos-a-images/images-rotators
Troppa grazia? Le indicazioni verranno buone a chi passerà di qui...
Cmq ho appena provato questo
http://briask.com/blog/download-images lideshow/
che puoi vedere all'opera nella demo del modulo Jtabs e funziona perfettamente in contemporanea.
Domani lo metto anche in download da me. Notte!
1. In posizione right ho inserito un modulo rockslideshows per visualizzare una slideshow di foto la quale SOLO nella pagina contente l'articolo in cui ho inserito il modulo jtabs non mi viene visualizzato(compare solo il nome del modulo in posizione right ma non le foto che scorrono)
2. Nella pagina contenete l'articolo in cui ho inserito il modulo jtabs (che però mi viene visualizzata tutta correttamente) nella barra in basso a sinistra mi compare una scritta "Done" con un punto esclamativo di fianco, cliccandoci sopra m'è comparso il seguente messaggio di errore
'jQuery' is undefined
jquery.no.conflict.js
Object doesn't support this property or method
mootols.js
Code 0
URI: http://localhost/NomeSito/media/system/js/mootols.js
Potresti aiutarmi a risolvere questi 2 problemi? Te ne sarò eternamente grato!
Grazie mille, buona notte e ancora scusami tanto per il disturbo
Avrei un domanda, forse è banale, sto da poco usando joomla e vorrei far apparire questo modulo tabs in una pagina lincata da un menù.
Es: tra le voci del menù principale c'è la voce Servizi, cliccando su questo link, vorrei visualizzare una pagina con il solo componente jTabs, composto da 4 o 5 schede.
Fin'ora non ho trovato il modo di fare questo ma ho dovuto indicare un articolo esistente come "Tipo menù" e o comunque un altro tipo menù, solo così ho poi pututo visualizzare anche JTabs.
Ho il sito il locale e non posso postare link, spero di essere stato chiaro, ti ringrazio se vorrai rispondere e complimenti.
Ora provo a fare come hai spiegato. ... bisogna scriverre proprio proprio: {loadposition ...} non c'è un'icona da cliccare, oppure non esiste, che tu sappia, un plugin per gestire questa cosa ? (credo sia l'inserimento di campi personalizzati, se ho capito bene.