Back to top

Autore Topic: Template al... collasso  (Letto 13908 volte)

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Template al... collasso
« il: 03 Nov 2010, 23:10:57 »
Ho scritto una guida su come realizzare il collasso delle colonne di un template dopo aver tentato di spiegare ad un utente come si realizza questa cosa.
Ancora non so se è riuscita nel suo intento, non vorrei che fosse collassata anche lei  ;D ;D

La guida è nel wiki ed un articolo su Joomla.it ne fa da introduzione (sperando la renda più visibile, visto che non lo leggete mai il wiki!!  ::))

L'articolo lo trovate qui http://www.joomla.it/articoli-della-community/4550-template-al-collasso.html

La guida è nel wiki col titolo Template con colonne collassabili

Ciao
« Ultima modifica: 04 Nov 2010, 08:41:31 da alexred »
Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

Offline g.amadasi@2tor.it

  • Nuovo arrivato
  • *
  • Post: 8
    • Mostra profilo
Re:Template al... collasso
« Risposta #1 il: 05 Nov 2010, 09:05:58 »
Provo ad aggiungere il mio contributo. Premetto che non sono un esperto di programmazione.
Nel mio sito www.2tor.it utilizzo il template "rt_quasar_j15 " (free) di "RocketTheme" che gestisce a mio avviso magnificamente la situazione in diverse modalità. Provatelo credo che non ne rimmarrete delusi.
Alla prossima

Offline vincenzo01

  • Esploratore
  • **
  • Post: 85
  • Sesso: Maschio
    • Mostra profilo
Re:Template al... collasso
« Risposta #2 il: 05 Nov 2010, 09:21:44 »
Ottimo, si aggiunge una perla all'immenso panorama delle istruzioni per joomla.
Quello che più mi ha scocciato nel passaggio alla 1.5 è proprio la difficoltà di gestione di un template che, nei fatti, era semplicissima nella 1.0 (sarà che sono un poco sfaticato e non voglio sempre studiare per ottenere la stessa operazione).
La tua guida aiuta molto e credo la utilizzerò per cercare di crearmi una griglia base per i template dei miei siti.
@g.amadasi, il template che utilizzi è una sorta di griglia che però ha un limite non è precisamente dinamica, per cui basta voler inserire o togliere un pezzo che la riga si scompagina.

cmq grazie bigham.
Se puoi fare ciò che vuoi, non sempre puoi fare ciò che non sai.

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Re:Template al... collasso
« Risposta #3 il: 05 Nov 2010, 13:34:50 »
Ciao

Che sia un bel template non c'è dubbio. Il dubbio è, semmai, come ci si troverebbe nel momento in cui si volesse modificare il codice. Bisogna avere una buona dose di esperienza e conoscenze pregresse per mettere le mani ad un template del genere.
Anche se il codice è scritto bene il template si basa su un framework proprietario (creato da chi l' ha sviluppato) e l'esperienza insegna che quando si mettono le mani in un codice che non hai realizzato tu diventa tutto più complesso. Entrare nella logica di chi ha scritto il codice non è sempre cosa facile e presuppone esperienze di programmazione.

Io sono dell'idea che, chi può si crea il proprio framework o il proprio modello di template da utilizzare per ogni template da realizzare, chi non ha queste capacità, perchè deve ancora acquisire le conoscenze e l'esperienza necessaria, cominci dal realizzare a mano i template.

Se si trova un template che fa al caso nostro bisogna ritenersi fortunati, ma se il template non c'è bisogna trovare una soluzione che non ci faccia perdere tempo.

Le alternative sono: usare tools che generano template o crearli manualmente partendo da zero o da uno scheletro già esistente (es. un css template)
Non sono contro i programmi che realizzano automaticamente i template, però consentitemi di dire che usandoli non si impara nulla.

Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Re:Template al... collasso
« Risposta #4 il: 05 Nov 2010, 13:35:42 »
@vincenzo01

Grazie ;D
Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

Offline ele_

  • Appassionato
  • ***
  • Post: 388
  • Sesso: Femmina
    • Mostra profilo
Re:Template al... collasso
« Risposta #5 il: 05 Nov 2010, 15:30:10 »
Ciao bigham, volevo farti i complimenti per questo articolo, scritto molto bene e molto chiaro, finalmente o capito bene a che servivano sti pezzi di php :-) prima li copiavo e dicevo beh se ci sono ci sarà un motivo, ora so che a volte possono servire altre no... :-)

Aspettiamo allora altre piccole perle!

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Re:Template al... collasso
« Risposta #6 il: 05 Nov 2010, 15:34:39 »
Ciao ele_

Ecco, lo scopo di tanta fatica è stato raggiunto!!  ;D ;D

L'altra perla è in arrivo. Veramente è già arrivata ma ancora non c'è l'annuncio ufficiale.
Ma se dai una sbirciatina al wiki.... ;)
Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

Offline ele_

  • Appassionato
  • ***
  • Post: 388
  • Sesso: Femmina
    • Mostra profilo
Re:Template al... collasso
« Risposta #7 il: 05 Nov 2010, 16:05:15 »
Sono le piccole guide che salvano chi come me non ama leggere  ;D...
Magari prima o poi potresti risolvere gli enormi dubbi che si nascondono dietro a questa istruzione

Codice: [Seleziona]
<jdoc:include type="modules" name="header" style="xhtml" />
o meglio
Codice: [Seleziona]
style="xhtml" cos'è e a cosa serve soprattutto, so che si può mettere anche dell'altro tipo table o rounded ma non ci ho mai capito nulla  :'(

Intanto Grazie!!!! adesso mi metto a cercare se trovo la tua nuova perla...

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Re:Template al... collasso
« Risposta #8 il: 05 Nov 2010, 19:40:14 »
Ottima domanda! ;D

Come dicevo in questo paragrafo della guida alla realizzazione di template per joomla 1.5 il parametro style dell'istruzione jdoc:include consente a Joomla di generare un codice html diverso per quel modulo.

I moduli altro non sono che condice html che viene generato da joomla ed inserito al posto della jdoc:include. Se in quella determinata posizione modulo abbiamo pubblicato 5 moduli tutti e 5 verranno creati all'interno di una struttura di tag html uguale per ognuno di essi. All'interno di questa struttura che fa da contenitore ogni modulo avrà il suo codice personale (un modulo di login non ha la stessa funzione di un modulo mod_mainmenu) che dipende dalla funzione che il modulo stesso svolge.

In quel paragrafo ho riportato l'esempio di due tipi di Style: xhtml e rounded. Gli altri non è sconsigliato usarli visto che utilizzano il tag table per generare il codice che conterrà il modulo.

Usare uno style piuttosto che un altro dipende da quale aspetto grafico vogliamo dare al modulo e quindi quali classi di stile dobbiamo creare per farlo.

Ora ti faccio un rimprovero (per modo di dire  ;D)
Capisco che leggere non è una tua passione e sono d'accordo che se qualcuno ti spiega le cose è più facile capirle (ho insegnato per 13 anni) ma questo vale se la persona che ti spiega le cose lo fa in presenza. Quindi che differenza c'è tra leggere una guida e leggere un post sul forum? ;D ;D Alla fine leggi lo stesso (meno, ma leggi).

Caso mai, come fai tu e come fanno altri, prima si legge una guida, poi si chiedono chiarimenti su qualche passaggio che non è chiaro.

Neanche io non riesco a leggere gli ebook, preferisco, quando posso, la vecchia e cara carta (magari riciclata se possibile). Ma il mio è un problema legato all'età  ::)
Però faccio di necessità virtù e se mi tocca leggere una pagina web di un manuale online (soprattutto quelli in inglese) mi armo di pazienza e lo faccio.

Dai ele_ che sei sulla buona strada!!!  ;D ;D
« Ultima modifica: 05 Nov 2010, 19:42:36 da bigham »
Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

Offline ele_

  • Appassionato
  • ***
  • Post: 388
  • Sesso: Femmina
    • Mostra profilo
Re:Template al... collasso
« Risposta #9 il: 08 Nov 2010, 17:11:43 »
Mi sono data alla lettura delle tue piccole guide in questo weekend, visto che le trovo molto chiare ma mi sono sorte alcune domande. le mie F.A.Q.

1. Il cosidetto <div class="wrap"> ovvero quello che contiene tutto tutto, a volte si usa e a volte no. è meglio metterlo sempre e associarli poche o nessuna regola nel css, oppure serve solo in certi casi, quali?
2. 1. Il cosidetto <div class="main-content"> ovvero quello che contiene la parte centrale, a volte si usa e a volte no. è meglio metterlo sempre e associarli poche o nessuna regola nel css, oppure serve solo in certi casi, quali?
3. Al <div class="footer"> o al div sucessivo alla parte divisa in colonne bisogna sempre associare - clear:left; - ?
4. Nella tua guida "Conversione di un css template per Joomla" hai affronatato un template dove veniva usato la proprietà float:right, c'è un motivo per cui si dovrebbe ragionare al contrario e non in modo sequenziale diciamo?

Grazie

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Re:Template al... collasso
« Risposta #10 il: 08 Nov 2010, 17:25:52 »
Ciao ele_

Per rispondere alle prime due domande potrei dire che la regola fondamentale è che, se ci sono due o più container div da affiancare (usando la proprietà float:left o float:right), è sempre cosa buona metterli dentro un altro container div che li racchiuda, ciò a maggor ragione per un container div che racchiuda tutto tutto.
Ad esempio, usando un container div che racchiuda tutti gli altri container che compongono la pagina è possibile centrare l'intera pagina del sito semplicemente applicando una classe di stile che contenga due proprietà:
Codice: [Seleziona]
.wrap{
width: 980px; /*la larghezza dell’elemento*/
margin:auto; /*margine destra e sinistra in modo automatico*/
}
In questo caso il container assumerà una larghezza di 980px e verrà centrato automaticamente nella pagina del browser. Prova a farlo senza e vedrai che è impossibile.

La proprietà clear consente di evitare che un container div venga allineato a destra o a sinistra rispetto ad un precedente container a cui è applicata la proprietà float:left o float:right. ti faccio un esempio con un'immagine.

Nell'immagine il quarto container div non segue l'allineamento a destra del terzo perchè gli viene applicata la proprietà clear:left.
Insomma la proprietà clear è come un ritorno a capo dato ad un container div.

Alla quarta domanda posso rispondere che è stato solo un caso, utile, ma un caso. Quando mi sono accorto della particolarità ne ho approfittato per descriverla ma non c'è nessun motivo per relizzare un template con questa caratteristica.


[allegato eliminato da un amministratore]
Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

Offline Ago_

  • Abituale
  • ****
  • Post: 823
  • Sesso: Maschio
    • Mostra profilo
Re:Template al... collasso
« Risposta #11 il: 04 Dic 2010, 22:42:57 »
ringraziando l'autore della guida chiedo se qualcuno è in grado di aiutarmi...

http://forum.joomla.it/index.php/topic,120334.0.html

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:Template al... collasso
« Risposta #12 il: 05 Dic 2010, 00:45:23 »
Devi averla seguita male perchè quella colonna destra non collassa per nulla.  ;D
Prova a seguire anche questo post in evidenza:
http://forum.joomla.it/index.php/topic,90672.0.html
 ;)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline Ago_

  • Abituale
  • ****
  • Post: 823
  • Sesso: Maschio
    • Mostra profilo
Re:Template al... collasso
« Risposta #13 il: 05 Dic 2010, 12:33:02 »
Devi averla seguita male perchè quella colonna destra non collassa per nulla.  ;D
Prova a seguire anche questo post in evidenza:
http://forum.joomla.it/index.php/topic,90672.0.html
 ;)

molto più semplice questa soluzione da te linkato, ma il problema rimane sempre lo stesso....trovare nei css l'id del content delle colonne...provo a fare un altro giro cn notepad++

Offline Ago_

  • Abituale
  • ****
  • Post: 823
  • Sesso: Maschio
    • Mostra profilo
Re:Template al... collasso
« Risposta #14 il: 05 Dic 2010, 12:37:01 »
il codice nel css mi sembra d'averlo individuato...

Codice: [Seleziona]
#BJ_Right_Col{
float:left;
width:740px;
margin:4px 0 0 18px;
background:#FFF;
padding:0 0 20px 0
}

#BJ_Main{
float:left;
width:480px;
margin:10px 0 0 10px;
padding:0 10px
}
#BJ_Main *{line-height:1.7em;}
#BJ_Main h1,#BJ_Main h2,#BJ_Main h3,#BJ_Main h1 *,#BJ_Main h2 *,#BJ_Main h3 *{line-height:1.5em;}
#BJ_Main input,#BJ_Main textarea{line-height:1em;}

#BJ_Right{
float:left;
width: 202px;
margin:10px 0 0 18px;
}

potresti darmi una dritta per sintonizzarlo con il codice da te linkato ???

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:Template al... collasso
« Risposta #15 il: 05 Dic 2010, 18:12:47 »
Una volta che assegni la larghezza dei div nella index.php del template con il sistema indicato cancella la width nel css anche se a rigor di logica non servirebbe neppure perchè la regola dovrebbe essere sovrascritta da quella nella index del  template  ;)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline Ago_

  • Abituale
  • ****
  • Post: 823
  • Sesso: Maschio
    • Mostra profilo
Re:Template al... collasso
« Risposta #16 il: 05 Dic 2010, 21:42:17 »
il problema è che non riesco a capire, perchè non conosco a fondo la struttura di cui parliamo...

questo è il codice css che penso si riferisca alle colonne

Codice: [Seleziona]
#BJ_MainBody{
margin:20px 0 0 0;
}

#BJ_Left_Col{
float:left;
width:202px
}

#BJ_Main_Top_Round{background:#fff;height:4px;width:732px;position:relative;margin:-4px 0 0 4px}
#BJ_Main_Top_Round .left{position:absolute;left:-4px;top:0;padding:2px;background:url(../images/main_tl.png) no-repeat}
#BJ_Main_Top_Round .right{position:absolute;right:-4px;top:0;padding:2px;background:url(../images/main_tr.png) no-repeat}

#BJ_Main_Bottom_Round{background:#fff;height:4px;width:732px;position:relative;float:left}
#BJ_Main_Bottom_Round .left{position:absolute;left:-4px;top:0;padding:2px;background:url(../images/main_bl.png) no-repeat}
#BJ_Main_Bottom_Round .right{position:absolute;right:-4px;top:0;padding:2px;background:url(../images/main_br.png) no-repeat}

#BJ_Right_Col{
float:left;
width:740px;
margin:4px 0 0 18px;
background:#FFF;
padding:0 0 20px 0
}

#BJ_Main{
float:left;
width:480px;
margin:10px 0 0 10px;
padding:0 10px
}
#BJ_Main *{line-height:1.7em;}
#BJ_Main h1,#BJ_Main h2,#BJ_Main h3,#BJ_Main h1 *,#BJ_Main h2 *,#BJ_Main h3 *{line-height:1.5em;}
#BJ_Main input,#BJ_Main textarea{line-height:1em;}

#BJ_Right{
float:left;
width: 202px;
margin:10px 0 0 18px;
}

il mio problema sta nell'inserirlo CORRETTAMENTE (ho fatto varie prove ma con risultati leggermente ridicoli) nel codice per l'index da te linkato...

questa è l'ultima prova www.gdsicilia.it

Offline Caluk

  • Nuovo arrivato
  • *
  • Post: 30
    • Mostra profilo
Re:Template al... collasso
« Risposta #17 il: 07 Dic 2010, 16:10:43 »
risolto io XD (ago la prox volta sn 50€ ahah) ho fatto però a modo mio :P

al posto di modifcare la classe dichiarando il css all'interno del php ho creato la classe bj_main2 con la larghezza di 700px (direttamente nel file layout.css) e tramite loadmodules ho specificato che se c'è il modulo all'interno di "right"

Codice: [Seleziona]
<?php  if ($this->countModules('right')) {?>
si prende la classe normale (ossia BJ_Main con larghezza 480px )

Codice: [Seleziona]
<?php  } else { ?> <!-- altrimenti -->
si prende la classe BJ_Main2 con 700px di larghezza
Codice: [Seleziona]
<?php  ?>
Tutto funzia perfettamente ;)
Caluk.iT WebDesign & Multimedia @ Tutorial - WebDesign - Video Editing - CMS

Offline Nitro41

  • Nuovo arrivato
  • *
  • Post: 13
    • Mostra profilo
Re:Template al... collasso
« Risposta #18 il: 08 Nov 2012, 18:49:14 »
ciao a tutti, rieccomi, ho seguito la guida per il template collassabile e tutto funge fino a che faccio collassare una colonna sola, quando provo a far collassare le due colonne laterali ho risultati strani a seconda dei parametri che vado a toccare, utilizzo la versione 2.5 di joomla e sto creando un template da zero, la parte funzionante è questa


Codice: [Seleziona]



<div class="maincontent">
                        <div class="breadcrumb">
                                <jdoc:include type="modules" name="breadcrumb" />
                        <>                 
                     
<div class="side-left">
<jdoc:include type="modules" name="left" style="xhtml"  />
<>
 
<?php 
if  ($this->countModules('right')) {
$classe_contenuti 'content';
} else {
$classe_contenuti 'content_wide';
}
?>

 
<div class="<?php echo $classe_contenuti?>">
<jdoc:include type="message" />
<jdoc:include type="component" />
        <jdoc:include type="modules" name="center" />
<>
<?php if ($this->countModules('right')) { ?>
<div class="side-right">
<jdoc:include type="modules" name="right" style="xhtml"  />
<>
<?php ?>                <>






come devo modificare correttamente per entrambe le colonne? ho letto e riletto il wiki ma qualsiasi mossa porta alla distruzione del layout
« Ultima modifica: 08 Nov 2012, 19:08:37 da Nitro41 »

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:Template al... collasso
« Risposta #19 il: 09 Nov 2012, 09:48:22 »
Ciao Nitro41 prova così  ;)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline Nitro41

  • Nuovo arrivato
  • *
  • Post: 13
    • Mostra profilo
Re:Template al... collasso
« Risposta #20 il: 09 Nov 2012, 10:32:23 »
ti ringrazio davvero tanto, sono all'inizio con joomla ma sono partito con l'idea, dopo qualche lavoro con template preconfezionati, di realizzarmi da me quanto più cose possibili, ho una buona base di html e css e devo mettermi in testa che alla fine (avendo macinato un po di action script con flash) il php non può risultarmi così ostico... mannaggia ma a 37 anni, con lavoro, moglie, bimba, cani e gatti è dura ritagliarsi tempo e testa (sopratutto) per migliorare le conoscenze... ci provo

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Re:Template al... collasso
« Risposta #21 il: 09 Nov 2012, 13:36:40 »
Ciao Nitro41.

Quello che fai per la colonna destra lo fai anche per la colonna sinistra:

Codice: [Seleziona]

<?php if ($this->countModules('left')) { ?>
<div class="side-left">
<jdoc:include type="modules" name="left" style="xhtml"  />
<>
<?php ?>


Paragrafo "collassare due colonne" nella guida che però dice anche altro...

Scusa la domanda, perchè non chiudi i tag html?
Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

Offline Nitro41

  • Nuovo arrivato
  • *
  • Post: 13
    • Mostra profilo
Re:Template al... collasso
« Risposta #22 il: 09 Nov 2012, 15:01:58 »
Ho inventato un nuovo standard per il linguaggio html6... si chiamano fantatag  ;D ... probabilmente è successo qualcosa nel copia incolla da dreamweaver, per le colonne ho seguito un'altra soluzione che prevede delle condizioni da inserire fuori dal codice html lasciandolo più ordinato, ho visto che la guida dice altro ma data la mia inesperienza cercavo di collassare la colonna destra e ottenevo l'implosione del layout... con calma tornerò sul problema per cercare di capirlo e risolverlo

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Re:Template al... collasso
« Risposta #23 il: 09 Nov 2012, 20:32:08 »
Ho inventato un nuovo standard per il linguaggio html6... si chiamano fantatag  ;D 
;D ;D ;D ;D


Dreamweaver? Io ti consiglio un "normalissimo" editor come Notepad++  o PSPad. Io uso il primo e mi sono sempre trovato ottimamente.


Anche il link proposto da tonicopi è interessante, è un'altra soluzione che si può integrare nel codice del template.
Capito il trucco il resto viene da se (ovviamente il trucco sta nell'uso del php e delle funzioni del framework di joomla)

Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

 



Web Design Bolzano Kreatif