DOCUMENTAZIONE TEMPLATE MAGAZINE PRO VERSIONE 1.0
Template Magazine Pro Release: 15 gennaio 2012
www.virtualproject.it – info@virtualproject.it 1
Caratteristiche: • • • • • • • • • • • • •
Template per testate giornalistiche online; Due/tre colonne Area slideshow e colonna di destra/sinistra collassabili 6 colori: blue, red, olive, pink, purple, grey selezionabili da pannello di controllo; Dimensione del testo selezionabile da pannello di controllo; 10 tipologie di moduli: blue, red, olive, pink, purple, grey, pro, video, last e default; Moduli slideshow e newspro4 completamente tradotti in italiano; Predisposizione multilingua; Compatibile con Joomla 1.5x Testato con: IE8+, Firefox 5+, Chrome 15+, Opera 11.x, Safari CSS3 Validato controlla File editor_content.css precompilato con gli stili tipografici per un utilizzo diretto con l’editor Tinycme; Index.php e template.css commentati per una veloce comprensione e modifica;
•
3 posizioni banner pre-configurate in testata: banner-top, banner-left, banner-right ed illimitate possibilità di inserimento nella altre posizioni: user1, left, right etc.
•
Drop-down menù.
Pacchetti • • •
Pacchetto quickstart quickstart_magazine_pro_1.0.zip Pacchetto template + estensioni template_estensioni_magazine_pro_1.0.zip Documentazione
Estensioni complementari Componenti AllVideos reloaded audio e video
www.virtualproject.it – info@virtualproject.it 2
Moduli Lofarticlesslideshow slide show notizie in home page Dinamods modulo tabs sulla destra Ariextmenu menù dropdown Newspro gk4 modulo Breaking news sotto la slideshow Plugin jw_disqus sistema di commento articoli Disqus PROCEDURE DI INSTALLAZIONE IMPORTANTE!! Vi raccomandiamo sempre hosting ottimizzati per Joomla! PACCHETTO QUICKSTART Il pacchetto quickstart è realizzato per fare in modo che, dopo l’installazione, il vostro sito sia esattamente uguale alla demo presente sul nostro sito. Istruzioni per l’installazione Scaricate il pacchetto quickstart_magazine_pro_1.0.zip dal nostro sito. Scompattate il pacchetto e caricate tutto il suo contenuto sul server. Effettuate l’installazione normale di Joomla! avendo cura di installare i dati di esempio. L’installazione di questi dati inserirà i contenuti così come li vedete nella demo. IMPORTANTE!! Se, conclusa l'installazione non riuscite ad entrare nel pannello di amministrazione con il nome utente e la password da voi inseriti durante la procedura, utilizzate questi: user: admin password: password PACCHETTO TEMPLATE + ESTENSIONI In questo pacchetto sono presenti il template Magazine Pro e le estensioni utilizzate. Si presume che abbiate già una installazione di Joomla! funzionante su un vostro server. Istruzioni per l’installazione • •
Scaricate il pacchetto template_estensioni_magazine_pro_1.0.zip dal nostro sito Scompattate il pacchetto template template_estensioni_magazine_pro_1.0.zip www.virtualproject.it – info@virtualproject.it 3
Al suo interno troverete sette cartelle compresse in formato .zip • • • • • • •
magazine_pro.zip com_avreloaded-1.2.7.zip mod_lofarticlesslideshow.zip mod_ariextmenu.zip mod_dinamods_1.5.zip mod_news_pro_gk4_J15!.zip jw_disqus-v3.1_j1.5-1.7.zip
magazine_pro.zip è il template, per installarlo andate nel pannello di amministrazione di Joomla!, menù estensioni installa/disinstalla ed installatelo come una qualunque estensione. Il template ha diversi parametri:
www.virtualproject.it – info@virtualproject.it 4
Da qui potete impostare il testo del footer, l’attivazione del messaggio di avviso agli utilizzatori del vecchio browser IE 6, il colore del template e la dimensione del testo del template. com_avreloaded-1.2.7.zip è il componente che consente la visualizzazione di video remoti o locali e l’ascolto di files audio. Installatelo seguendo sempre la solita procedura: pannello di amministrazione di Joomla!, estensioni installa/disinstalla La procedura installa anche un modulo e qualche plugin, e inserisce un comodo pulsante nell’editor Tinymce per inserire video direttamente nei contenuti. Ora andate nella gestione moduli e cercate il modulo avreloaded ed apritelo: Seguite lo schema delle immagini qui sotto per configurarlo:
www.virtualproject.it – info@virtualproject.it 5
Sezione dettagli (ingrandite l’immagine se necessario). Assegnate al modulo la posizione “user1” se volete ottenere lo stesso posizionamento della demo.
Sezione parametri Fate attenzione ad inserire uno spazio prima del testo “module_video” nel parametro Suffisso classe CSS modulo, altrimenti il modulo non avrà lo stile della demo.
www.virtualproject.it – info@virtualproject.it 6
mod_lofarticlesslideshow.zip è il modulo di presentazione delle news che trovate in home page. Installatelo seguendo sempre la solita procedura: pannello di amministrazione di Joomla!, estensioni installa/disinstalla Poi andate nella gestione moduli e apritelo per vedere le opzioni. Per ottenere lo stesso effetto della demo impostate i parametri in questo modo:
Sezione dettagli Assegnate al modulo la posizione slide show e vi apparirà come nella demo.
www.virtualproject.it – info@virtualproject.it 7
Sezione parametri:
www.virtualproject.it – info@virtualproject.it 8
Questa sezione è stata completamente tradotta in italiano per facilitare l’utilizzo del modulo. Settate i parametri come nell’immagine a fianco (ingranditela se necessario) per ottenere lo stesso effetto della demo.
www.virtualproject.it – info@virtualproject.it 9
mod_dinamods_1.5.zip è il modulo tabs sulla destra, dove sono riuniti i moduli “web 2.0”, “Atletica” e “Ambiente”. Installatelo seguendo sempre la solita procedura: pannello di amministrazione di Joomla!, estensioni installa/disinstalla Poi assegnategli la posizione user1 e pubblicatelo. settate i parametri del modulo come nell’immagine qui sotto. Sezione dettagli
www.virtualproject.it – info@virtualproject.it 10
Sezione Parametri
Ora, se volete inserire un modulo nel tab, per esempio il modulo Web 2.0, dovete per prima cosa creare una nuova posizione nel template. Aprite quindi il modulo ultime notizie, e alla voce posizione sulla sinistra cliccate e scrivete il nome della nuova posizione, che sarà “dinamod”.
www.virtualproject.it – info@virtualproject.it 11
Dettagli modulo ultime notizie
Questo sarà il nome della nuova posizione, che deve essere uguale a quello impostata nel parametro del modulo Dinamods alla voce new position (come si vede dall’immagine dei parametri). Pubblicate il modulo Web 2.0, salvate e chiudete. Il modulo comparirà ora come tab sulla destra. Ripetete l’operazione per gli altri moduli che volete visualizzare come tab. mod_news_pro_gk4_J15!.zip Questo è il modulo che permette la visualizzazione di tre importanti aree del template, e precisamente: • • •
Breaking news Zapping dal mondo Interviste
E’ sempre lo stesso modulo, opportunamente duplicato, che ha diverse modalità di visualizzazione degli articoli. Cominciamo come sempre dall’installazione. Seguite la solita procedura: amministrazione di Joomla!, estensioni installa/disinstalla.
pannello di
Ora vedremo passo passo come poter visualizzare tutti e tre i moduli nelle rispettive posizioni del template.
www.virtualproject.it – info@virtualproject.it 12
Breaking news. Dopo aver installato il modulo, andate in gestione moduli e apritelo: si presenterà come nell’immagine qui sotto. Sezione dettagli
Attivate il modulo e assegnategli la posizione slide show, settando le impostazioni come in figura. Sezione Parametri Questa è una sezione con molte opzioni, il modulo è stato completamente tradotto in italiano dal nostro Staff per facilitarne l’utilizzo. Vediamo come impostarlo per ottenere una visualizzazione come quella della demo: Impostazioni di base: Fate sempre attenzione a lasciare uno spazio prima del suffissdo css del modulo, che in questo caso è module_last. Settate le impostazioni come in figura avendo cura di impostare la voce “tipo di visualizzazione del modulo” su Portal mode - accordion news.
www.virtualproject.it – info@virtualproject.it 13
Sorgente degli articoli Scegliete la sezione o la categoria di articoli che volete visualizzare (nel nostro caso abbiamo scelto Politica) e impostate il resto come in figura.
www.virtualproject.it – info@virtualproject.it 14
Layout articolo N.B. L’immagine è divisa in due parti a causa della lunghezza della sezione. Immagine n.1 Qui possiamo impostare il layout del nostro modulo. Come potete vedere ci sono moltissime impostazioni, impostatele come in figura per ottenere l’effetto visivo della demo oppure settatele a vostro piacimento per ottenere altri effetti. Il numero di notizie nella Accordion news è impostato a 6 nella nostra demo.
www.virtualproject.it – info@virtualproject.it 15
www.virtualproject.it – info@virtualproject.it 16
Immagine n.2 Anche in questo caso impostate le voci come in figura.
Links layout Da qui potete impostare la visualizzazione dei links e alcune altre opzioni. Seguite i settaggi come in figura.
www.virtualproject.it – info@virtualproject.it 17
www.virtualproject.it – info@virtualproject.it 18
Miniature Qui potete impostare le regole di visualizzazione delle miniature delle immagini degli articoli. Seguite le impostazioni della nostra demo nella figura qui sotto.
www.virtualproject.it – info@virtualproject.it 19
Impostazioni aggiuntive Qui è possibile impostare alcune opzioni aggiuntive, come per esempio l’apertura automatica della prima notizia. Copiate le impostazioni della nostra demo.
www.virtualproject.it – info@virtualproject.it 20
Impostazioni negozio K2, impostazioni Virtuemart, Files esterni Le impostazioni K2 e le impostazioni Virtuemart non ci riguardano per ora perché nel nostro template non ci sono applicazioni di commercio elettronico, quindi le salteremo. Nella sezione Files esterni è possibile impostare alcune opzioni che riguardano principalmente CSS e Javascript. Seguite le impostazioni in figura.
Zapping dal mondo Il modulo Zapping dal mondo è sempre un modulo news_pro_gk4 ma con un’altra modalità di visualizzazione. Procedete così: Dalla gestione moduli, selezionate il modulo Breaking news e duplicatelo. Dopo averlo duplicato apritelo e rinominatelo Zapping dal mondo. Assegnategli la posizione newslide e pubblicatelo.
www.virtualproject.it – info@virtualproject.it 21
Impostazioni di base Ora dobbiamo cambiare alcune impostazioni di visualizzazione del modulo nella sezione parametri. Impostate il “Tipo di visualizzazione modulo” su PORTAL_MODE_4 e gli altri parametri come in figura.
www.virtualproject.it – info@virtualproject.it 22
Sorgente degli articoli Impostate la sorgente degli articoli a vostro piacimento e le altre opzioni come in figura.
www.virtualproject.it – info@virtualproject.it 23
Layout articolo Impostate il numero di notizie per il Portal Mode 4 a 10 e lasciate invariate le altre impostazioni.
www.virtualproject.it – info@virtualproject.it 24
Altre impostazioni Lasciate invariate tutte le altre impostazioni in figura.
www.virtualproject.it – info@virtualproject.it 25
Le interviste Il modulo Le interviste è sempre un modulo news_pro_gk4 ma con un’altra modalità di visualizzazione. Procedete così: Dalla gestione moduli, selezionate il modulo Breaking news e duplicatelo. Dopo averlo duplicato apritelo e rinominatelo Le interviste . Assegnategli la posizione newslide sotto il modulo Zapping dal mondo e pubblicatelo.
Impostazioni di base Impostate il “Tipo di visualizzazione modulo” a Normal mode e lasciate invariato il resto.
www.virtualproject.it – info@virtualproject.it 26
Sorgente degli articoli
Impostate la sorgente degli articoli a vostro piacimento e le altre opzioni come in figura. Altre impostazioni Lasciate invariate tutte le altre impostazioni in figura.
www.virtualproject.it – info@virtualproject.it 27
jw_disqus-v3.1_j1.5-1.7.zip Questo è il plugin che permette l’utilizzo di Disqus nei commenti degli articoli. Installatelo come sempre da gestione estensioni installa/disinstalla. Poi andate nella gestione plugin e attivate entrambi i plugin installati e impostate le categorie dove volete che vengano visualizzati i commenti. Per utilizzare questo plugin è necessario registrarsi e creare un account su http://didqus.com. La registrazione è gratuita. mod_ariextmenu.zip E’ il menù principale, quello orizzontale sotto il titolo del giornale. Installatelo sempre nella stessa maniera da gestione estensioni installa disinstalla, poi assegnategli la posizione navigation e pubblicatelo si tutte le pagine. Seguite le impostazioni nell’immagine.
www.virtualproject.it – info@virtualproject.it 28
E’ possibile assegnare al menù qualsiasi colore e dimensione del testo, sia dei menù sia dei sotto menù, in modo da averlo sempre in tinta con il colore dominante del sito.
www.virtualproject.it – info@virtualproject.it 29
POSIZIONI TEMPLATE Ingrandire l’immagine per visualizzare al meglio le posizioni.
www.virtualproject.it – info@virtualproject.it 30
COLORE E TIPO DI MODULI Magazine Pro ha 10 tipi di moduli diversi, attivabili dai parametri di ogni modulo alla voce “suffisso classe CSS modulo”. Per visualizzare la tipologia di modulo desiderato è necessario inserire la classe del modulo nella voce “suffisso classe CSS modulo” del parametri dello stesso. Di seguito le classi di ogni tipo di modulo. N.B. Fate attenzione ad inserire uno spazio prima del testo della classe desiderata, come si può vedere nell’immagine a fianco.
Classe = module_blue
Classe = module_red
Classe = module_olive
Classe = module_purple
Classe = module_pink
www.virtualproject.it – info@virtualproject.it 31
Classe = module_gray
Classe = module_last
Classe = module_pro
Nessuna classe
CAMBIARE COLORE AL TEMPLATE Potete scegliere fra i sei tipi di colori disponibili:
Per cambiare colore al template seguite questi passaggi: 1) andate nel menù gestione estensioni template magazine_pro e assegnate un colore dal selettore colore nei parametri sulla destra.
www.virtualproject.it – info@virtualproject.it 32
2) andate nella gestione moduli e aprite il modulo slideshow. Dai parametri scegliete il colore della slide dal campo “seleziona un tema”, come da immagine.
3) Non vi rimane che cambiare colore ai moduli, utilizzando le classi css come spiegato più sopra.
www.virtualproject.it – info@virtualproject.it 33
STILI TIPOGRAFICI Magazine Pro è provvisto di stili tipografici già configurati ed inseriti nel file magazine_pro/css/editor-content.css.
L’editor di Joomla Tinymce è predisposto per utilizzare un foglio di stile con le classi definite dall’utente. Per utilizzare le classi di Magazine_pro basterà inserire nel campo “classi css personalizzate” dei parametri del plugin “Editor – TinyMCE” il nome del nostro file, cioè editor_content.css, così come indicato nella figura. www.virtualproject.it – info@virtualproject.it 34
Adesso le classi compariranno direttamente nell’editor per essere facilmente utilizzate dall’utente.
Modulo registrati Il modulo registrati è quello in alto sopra l’header, da cui è possibile registrarsi, entrare nel sito, accedere a Facebook etc. Pre crearlo andate in amministrazione gestione moduli nuovo e create un modulo html, poi assegnategli la posizione “newstickewrs” come in figura.
www.virtualproject.it – info@virtualproject.it 35
Poi create i link alle varie pagine come nell’immagine qui sotto:
Banners in testata. In testata sono presenti 3 posizioni banner: banner-top, banner-top-left, banner-top-right. Create i vostri banner e assegnategli queste posizioni per visualizzarli.
Per qualsiasi ulteriore informazione potete contattare Project Informatica ai recapiti presenti sul nostro sito web. Vi auguriamo buon lavoro con il Template Magazine Pro!
www.virtualproject.it – info@virtualproject.it 36