Piu' immagini con link in un blocco modulo

[ifossati]

Ciao, a seguito delle varie indicazioni ricevute in un precedente post (grazie ancora!) sto modificando il template per la creazione del sito che devo rifare. Ho preso un template (blue_dragon) e lo sto riadattando alle mie esigenze modificando il file index.php ed il css.
La struttura e' la seguente:

I blocchi user3, user4 e user5 li ho aggiunti io rispetto all'originale, ora vorrei capire come mettere nel blocco user5 in alto a destra tre immagini una sopra l'altra, ognuna delle quali e' un link ad una URL differente. Finora sono riuscito a metterne solo una utilizzando il banner e specificando come posizione user5. E' possibile fare quanto sopra in un unico blocco o devo creare tre nuovi blocchi? In tal caso come faccio a posizionare tre (o piu') blocchi uno sotto all'altro nella stessa area, tipo due nuovi user6 e user7, esattamente sotto user5 ma che come alteza non superino quella di user4? Non so se mi sono spiegato bene, nel caso chiedete e faccio un disegnino di come li vorrei.
Grazie mille in anticipo.
Ciao, Ivano

[maria.p]

visto lo spazio immagino che stiamo parlando di img piccole, comunque ti suggerisco 2 soluzioni
- crei un modulo nuovo e inserisci le immagini una sopra l'altra con i link, naturalmente facendo delle prove per le dimensioni e pubblicando dopo il modulo in user5
- crei un'unica immagine che ne contiene 3 e con un software specifico crei le aree sensibili così potrai assegnare 3 link ad una sola immagine che dovrai inserire sempre in un modulo in user5

inserire 3 blocchi dentro user5 te lo sconsiglio

[ifossati]

Grazie Maria. Si, le immagini sono piccole, delle gif che rimandano ad altri siti. Sono quelle che vedi al sito http://www.acquariforum.com/ sotto l'immagine randomica.
Ho seguito il primo suggerimento in quanto il piu' veloce. Ora ho le tre immagini impilate ma non riesco ad assegnargli un link 
Ho l'editor standard di Joomla, seleziono l'immagine desiderata e clicco su link e mi trovo sempre nel campo URL quella dell'immagine. Dove posso specificare che se clicco sull'immagine deve andare alla determinata URL?
Grazie e ciao.
Ivano

[.Andrea S.]

Disabilita l'editor.
Apri il modulo da te creato e incolla questo codice:

Codice: [Seleziona]

<table border="0">
<tbody>
<tr>
<td><a href="http://www.tuo link.it/tuaurl"><img src="http://www.tuosito.it/images/tuaimmagine.gif" border="0" alt="Titoloimg" title="Titoloimg" align="left" /></a></td>
<td><a href="http://www.tuo link.it/tuaurl"><img src="http://www.tuosito.it/images/tuaimmagine2.gif" border="0" alt="Titoloimg2" title="Titoloimg2" align="left" /></a></td>
<td><a href="http://www.tuo link.it/tuaurl"><img src="http://www.tuosito.it/images/tuaimmagine3.gif" border="0" alt="Titoloimg3" title="Titoloimg3" align="left" /></a></td>
</tr>
</tbody>
</table>


Ovviamente sostituisci il percorso del link e quello delle immagini con quello che desideri.
E il titolo img.
Io ho inserito come allineamento sinistra puoi ovviamente cambiarlo.

Le immagini sono inserite in una tabella, in modo da non avere problemi in caso di layout flessibili.

Puoi replicare questo pezzo quante volte vuoi:

Codice: [Seleziona]


<td><a href="http://www.tuolink.it/tuaurl"><img src="http://www.tuosito.it/images/tuaimmagine3.gif" border="0" alt="Titoloimg3" title="Titoloimg3" align="left" /></a></td>



[ifossati]

Ciao Andrea, mi e' chiara la parte di codice, un po' meno questo:

Disabilita l'editor.
Apri il modulo da te creato e incolla questo codice:

Come faccio a disabilitare l'editor? Dove trovo il modulo per inserire il codice?
Scusa ma son proprio junior su joomla 
Grazie e ciao.
Ivano

[maria.p]

non credo che per inserire del semplice codice html c'è bisogno di disabilitare l'editor comunque lo fai dalla configurazione globale e nella chiamata editor predefinito seleziona nessun editor, il codice inserito da andrea va bene se vuoi le immagini sulla stessa riga e se non sbaglio le volevi una sopra l'altra quindi dovrai modificarlo in questo modo:

Codice: [Seleziona]

<table border="0">
<tbody>
<tr>
<td><a href="http://www.tuo link.it/tuaurl"><img src="http://www.tuosito.it/images/tuaimmagine.gif" border="0" alt="Titoloimg" title="Titoloimg" align="left" /></a></td></tr>

<tr>
<td><a href="http://www.tuo link.it/tuaurl"><img src="http://www.tuosito.it/images/tuaimmagine.gif" border="0" alt="Titoloimg" title="Titoloimg" align="left" /></a></td></tr>


<tr>
<td><a href="http://www.tuo link.it/tuaurl"><img src="http://www.tuosito.it/images/tuaimmagine.gif" border="0" alt="Titoloimg" title="Titoloimg" align="left" /></a></td></tr>

</tbody>
</table>ricordati dopo di riabilitare l'editor e naturalmente stai attento a cambiare il percorso delle immagini con quello giusto

dimenticavo il modulo che devi usare non esiste già pronto devi solamente entrare nei moduli e cliccare su nuovo e in basso ci sarà la finestra dell'editor dove inserire il codice, lo pubblichi nella posizione che vuoi e poi lo salvi

[ifossati]

Ciao, ci ho provato ma c'e' qualcosa che tocca...
Vi riporto sotto il codice.

Codice: [Seleziona]

<span style="font-size: 12pt; font-family: &#39;Times New Roman&#39;">
<span style="font-size: 12pt"><span style="font-size: 7.5pt; color: white; font-family: Verdana; text-decoration: none;

text-underline: none"><span style="font-size: 12pt; font-family: &#39;Times New Roman&#39;"><span style="font-size: 12pt;

font-family: &#39;Times New Roman&#39;">
<span style="font-size: 7.5pt; color: white; font-family: Verdana; text-decoration: none; text-underline: none">
<span style="font-size: 12pt; font-family: &#39;Times New Roman&#39;"><span style="font-size: 12pt; font-family: &#39;Times

New Roman&#39;">
<span style="font-size: 7.5pt; color: white; font-family: Verdana; text-decoration: none; text-underline: none">
<span style="font-size: 12pt; font-family: &#39;Times New Roman&#39;">
<span style="font-size: 12pt; font-family: &#39;Times New Roman&#39;">
<span style="font-size: 7.5pt; color: white; font-family: Verdana; text-decoration: none; text-underline: none">
<span style="font-size: 12pt">
<span style="font-size: 12pt; font-family: &#39;Times New Roman&#39;">
<span style="font-size: 7.5pt; color: white; font-family: Verdana; text-decoration: none; text-underline: none">
<span style="font-size: 12pt; font-family: &#39;Times New Roman&#39;">
<span style="font-size: 12pt; font-family: &#39;Times New Roman&#39;">
<span style="font-size: 7.5pt; color: white; font-family: Verdana; text-decoration: none; text-underline: none">
<span style="font-size: 12pt; font-family: &#39;Times New Roman&#39;">
<span style="font-size: 12pt; font-family: &#39;Times New Roman&#39;">
<span style="font-size: 7.5pt; color: white; font-family: Verdana; text-decoration: none; text-underline: none">
<span style="font-size: 12pt; font-family: &#39;Times New Roman&#39;">
<span style="font-size: 12pt">
<table border="0">
<tbody>
<tr><td><a href="http://www.acquariforum.com/forum"><img src="images/stories/Links/acquariforum.gif" alt="Forum" width="186"

height="55" /></a></td></tr>
<tr><td><a href="http://www.acquariforum.com/acquariguide/index.php"><img src="images/stories/Links/acquaribase.gif"

alt="Acquaribase" width="186" height="55" /></a></td></tr>
<tr><td><a href="http://www.acquariforum.com/dentroedoltrelacquariofilia.php"><img

src="images/stories/Links/dentroedoltre2.gif" alt="dentro&amp;oltre" width="196" height="59" ></a></td></tr>
</tbody>
</table>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span

></span></span></span></span></span>In pratica ottengo si una tabella con i tre loghi uno sopra l'altro (anche se con un bordo che vorrei eliminare) ma se clicco sulle singole immagini invece dei link definiti sopra mi apre il link delle immagini stesse...
Cosa devo fare?
Grazie mille e ciao.
Ivano

[maria.p]

per il bordo basta inserire dopo il richiamo dell'immagine border=0 come nel codice d'esempio...

hai la possibilità di farmelo vedere on line

controlla bene perchè ho inserito il tuo codice in un mio modulo e (a parte naturalmente le immagini che non ho) i links funzionano perfettamente

[ifossati]

Ciao Maria, portato live funziona  in locale no... boh...
Sotto trovi il frutto del mio lavoro grazie ai tuoi consigli.
http://ivafos.100webspace.net/Joomla_1012_stabile_ita/index.php
Grazie e ciao.
Ivano

[maria.p]

la terza immagine ti conviene farla uguale alle altre come larghezza, non hai ancora levato il bordo con border=0

[ifossati]

Sto lavorando sulle dimensioni. Per il bordo devo fare una cosa del tipo:

Codice: [Seleziona]

<img src="images/stories/Links/acquaribase.gif" alt="Acquaribase" border="0" width="186" height="55" />o devo posizionare il tag border in un altro posto? Ho provato cosi' ed e' venuto fuori un caos... 
grazie e ciao.
Ivano

[maria.p]

non vedo il tuo codice però nell'esempio c'era fin dall'inizio

Codice: [Seleziona]



<img src="http://www.tuosito.it/images/tuaimmagine.gif" border="0" alt="Titoloimg" title="Titoloimg" align="left" />




[ifossati]

Vero, son distratto, eheheheh...
Fatto, il bordo e' stato eliminato. Ma se volessi tenerle attaccate? E' possibile. Devo usare cellspacing="0"?
grazie.
Ivano

[maria.p]

Inserisci questo nel codice iniziale della tabella

Codice: [Seleziona]


<table border="0" cellspacing=0 cellpadding=0>




[ifossati]

Yes! Grazie ancora, ciao.
Ivano

[ifossati]

Ciao, ho ancora un problemino. Il blocco con le immagini, ora perfetto, non e' allineato esattamente all'altezza deegli altri 2 alla sua sinistra. Se guardtae il modulo con le immagini casuali e' disallineato, piu' in alto rispetto a questo. http://ivafos.100webspace.net/Joomla_1012_stabile_ita/index.php
Si puo' tirare su per allinearlo al resto?
Grazie mille.
Ivano

[.Andrea S.]

Hai disabilitato l'editor quando hai inserito il codice?
Guarda l'html e verifica come mai c'è quello spazio.

[ifossati]

Ciao Andrea, si l'editor era disabilitato. Il codice del nuovo modulo e' il seguente:

Codice: [Seleziona]

<table border="0" cellspacing=0 cellpadding=0>
<tbody>
<tr><td><a href="http://www.acquariforum.com/forum"><img src="images/stories/Links/acquariforum.gif" border="0" alt="Forum" width="186" height="50" /></a></td></tr>
<tr><td><a href="http://www.acquariforum.com/acquariguide/index.php"><img src="images/stories/Links/acquariguide.gif" border="0" alt="AcquariGuide" width="186" height="50" /></a></td></tr>
<tr><td><a href="http://www.acquariforum.com/dentroedoltrelacquariofilia.php"><img src="images/stories/Links/dentroedoltre2.gif" border="0" alt="dentro e oltre l'acquariofilia" width="186" height="50" ></a></td></tr>
</tbody>
</table>
Ora che lo noto anche l'altro modulo creato da me, il primo a sx contenente il testo, non e' prefettamente allineato al top del blocco user3. L'unico che rispetta esattamente il tutto e' il modulo immagini randomiche. Posso fare qualcosa?
Grazie e ciao.
Ivano

[.Andrea S.]

Strano.... ma hai un altro modulo pubblicato nella stessa posizione?

[ifossati]

Niente purtroppo. La modifica mi riduce lo spazio nel mainbody tra user2 ed il primo articolo pubblicato, non agisce sulla zona di user5. Io sto facendo altre prove in locale modificando dimensione e codice (vado a tentativi...), altri suggerimenti sono ben accetti.
Esiste un file in cui sono definite le carattersitiche dei moduli user?
Grazie e ciao,
Ivano

[.Andrea S.]

scusa  mi ero sbagliato.

Ho trovato uno spazio nel tuo codice:

Codice: [Seleziona]

<td width='10%'> <div class="moduletable">

&nbsp; </div>
<div class="moduletable">
<table border="0" cellspacing=0 cellpadding=0>
<tbody>
<tr><td><a href="http://www.acquariforum.com/forum"><img src="images/stories/Links/acquariforum.gif" border="0" alt="Forum" width="186" height="50" /></a></td></tr>
<tr><td><a href="http://www.acquariforum.com/acquariguide/index.php"><img src="images/stories/Links/acquariguide.gif" border="0" alt="AcquariGuide" width="186" height="50" /></a></td></tr>
<tr><td><a href="http://www.acquariforum.com/dentroedoltrelacquariofilia.php"><img src="images/stories/Links/dentroedoltre2.gif" border="0" alt="dentro e oltre l'acquariofilia" width="186" height="50" ></a></td></tr>
</tbody>
</table> </div>

Devi eliminare questo  , è lui il colpevole.

[ifossati]

Sto per farti una domanda ovvia per te ma un po' meno per me...  Ho visto che quanto da te indicato e' il codice html (ho fatto view source del sito da IE). Dove devo modificarlo? O meglio, dove si trova il file che devo modificare togliendo quanto sotto?
Grazie, ciao.
Ivano

[.Andrea S.]

Primo: Abolisci IE!! E usa Firefox (leggi la mia firma e dotati di webdeveloper) 

Secondo, con firefox si possono vedere molte cose, ma non tutto, dove sta sto spazio lo puoi sapere tu!
Io ti posso dire dove penso che sia, ovvero nel modulo che hai creato tu, ma non ne sono certo. 

Ribadisco il suggerimento, disabilita l'editor e verifica il codice del modulo, se non vedi niente prova a fare un test: crea un altro modulo (sempre con l'editor disabilitato) e incolla il codice senza nessuna aggiunta.
Pubblica il nuovo e disabilita il vecchio, se lo spazio rimane devi cercare altrove.

Che hai pubblicato in user5 oltre a quel modulo?

[ifossati]

ehehehe... Ho Firefox con relativo webdeveloper (avevo letto alcuni tuoi post e dalla firma avevo scaricato) ma qui in ufficio non funziona causa proxy. Dovrei recuperare i parametri per configurarlo. A casa lo uso (inseme ad IE ed Opera) per vedere il risultato finale (normalmente 3 cose diverse...  ). Ora provo a fare le prove da te indicate, nel frattempo mi hai illuminato riguardo a cosa pubblicato in user 5. Avevo pubblicato il banner anche se vuoto... e porta via spazio. Ora va gia' meglio ma non siamo ancora allineati del tutto. Provo in locale con ffox, alemo li funziona.
Ad ogni modo, esiste un file in cui sono definite le caratteristiche dei moduli user (tipo i file.php per i moduli caricati). Se uno vuole modificare questi moduli user nei colori, sfondi, ecc... da dove lo fa? So che c'e' una guida di Carlo Ernesto, e' per caso quella chiamata TemplateCSS?
Grazie mille per la disponibilita' e per l'aiuto.
Ciao.
Ivano

[maria.p]

probabilmente i moduli hanno allineamento centrato, le 3 immagini a destra in totale hanno un'altezza di 150px mentre l'immagine random 156 quindi se è questo il problema non potrà mai essere allineato e lo stesso il modulo di sinistra

[.Andrea S.]

...........
Ad ogni modo, esiste un file in cui sono definite le caratteristiche dei moduli user (tipo i file.php per i moduli caricati). Se uno vuole modificare questi moduli user nei colori, sfondi, ecc... da dove lo fa? So che c'e' una guida di Carlo Ernesto, e' per caso quella chiamata TemplateCSS?
.......................

Di solito sono definiti nel css, ma dipende dal template.
Nel tuo caso quel modulo è definito in questo file "/templates/blue_dragon/css/template_css.css"
in ".moduletable"

[ifossati]

probabilmente i moduli hanno allineamento centrato, le 3 immagini a destra in totale hanno un'altezza di 150px mentre l'immagine random 156 quindi se è questo il problema non potrà mai essere allineato e lo stesso il modulo di sinistra

Ho portato a 150 l'latezza dell'immagine random ed ora sono allineati. Per l'allineamento centrato intendi centrato rispetto al modulo?
Questi 3 blocchi li ho creati aggiungendo nel file index.php il seguente codice:

Codice: [Seleziona]

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr valign="top"">
    <td colspan='100%'>
      <table width='100%'>
        <tr>
          <td width='15%'><?php mosLoadModules('user3',-2);?></td>
          <td width='20%'><?php mosLoadModules('user4',-2);?></td>
          <td width='10%'><?php mosLoadModules('user5',-2);?></td>                   
        </tr>
      </table>
    </td>
  </tr>   
</table>Premetto che sto imparando in un'unica volta Joomla, php e css, essendo alla prima esperienza con tali strumenti/SW.
Dove e' definito l'allineamento?

Di solito sono definiti nel css, ma dipende dal template.
Nel tuo caso quel modulo è definito in questo file "/templates/blue_dragon/css/template_css.css"
in ".moduletable"

Chiaro. Ma questi sono parametri "system wide", ossia vengono applicati a tutti i moduli user, corretto? Se io volessi cambiare il colore solo di user2 come dovrei fare? Ho utilizzato la funzione cerca nel forum ma non ho trovato risposta... 
Grazie mille, ciao.
Ivano

[maria.p]

si ora sono allineati probabilmente il terzo modulo essendo 6 px in meno lo metteva centrato rispetto al secondo, il primo modulo lo vuoi anche allineato in alto o va bene cosi'.
Per quanto riguarda il colore dei moduli potresti utilizzare un colore di background direttamente nell'index (non l'ho mai fatto ma dovrebbe funzionare) cioè assegnando alla cella che lo contiene un colore oppure creare una classe personalizzata nel css con il background ed assegnarla al modulo che vuoi

[ifossati]

si ora sono allineati probabilmente il terzo modulo essendo 6 px in meno lo metteva centrato rispetto al secondo, il primo modulo lo vuoi anche allineato in alto o va bene cosi'.

Vorrei capire come allinearlo in alto nel caso.

Per modificarlo nell'index intendi una cosa del genere?

Codice: [Seleziona]

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr valign="top"">
    <td colspan='100%'>
      <table width='100%'>
        <tr>
          <td width='15%'><?php mosLoadModules('user3',-2);?></td>
          <td width='20%'><?php mosLoadModules('user4',-2);?></td>
          <td width='10%' background="fff"><?php mosLoadModules('user5',-2);?></td>
        </tr>
      </table>
    </td>
  </tr>   
</table>
Per la classe personalizzata devo studiare ancora un po' 

Grazie, ciao.
Ivano

[ifossati]

Rettifico, ho usato questa sintassi nell'index.php:

Codice: [Seleziona]

<td bgcolor="BEE3FF"><?php mosLoadModules ( 'user2' ); ?></td>
semplicemente usando bgcolor e funziona alla grande!!!!

Mi rimane solo l'allineamento del primo modulo ora, provo a fare un po' di "frulli" vari.

Grazie mille, ciao.
Ivano

[maria.p]

hai visto che non era difficile il colore, le classi vanno usate anche per cose ben + complesse,
per il primo modulo controlla che non ci sia uno spazio sopra il testo ma non credo perchè secondo me è centrato, potresti provare ad inserire nel TD che lo contiene valign=top

[ifossati]

 
Ma quante ne sai! un valign ed e' andato tutto a posto.
Son proprio 'gnurant come si dice dalle mie parti... 
Grazie mille, ciao.
Ivano