Joomla.it Forum
Joomla! 3 => I Template di Joomla! 3 => : daniel77 25 Apr 2015, 11:54:23
-
Ciao a tutti,
qualcuno ha mai fatto uno sprite di 2 o più immagini in joomla? ho cercato un pò di info in giro ma ho qualche dubbio..
se ad esempio voglio combinare 3 immagini da 50px 50px e 100px le prime 2 sopra e la terza sotto per visualizzarle in un modulo personalizzato, come devo procedere?
i miei dubbi sono i seguenti:
- che programma posso usare per combinarle e tenere traccia delle distanze in px?
- dove inserisco il codice necessario? ho visto che è diviso in 2 parti.
Grazie
-
ci sono fior di tutorial, fatti bene con immagini esplicite, esempi e codice.
Ne hai visto qualcuno?
-
Beh si, forse è quello il problema, ne ho visti anche troppi...
Però specifici per joomla no...
Hai qualche link con esempi per joomla da postare?
-
i css che siano di joomla, di wordpress o di pincopallo, sempre quelli sono ??? ???
non è possibile linkare risorse esterne, ma se digiti css sprite, vedrai quante pagine ci sono!
-
Si, ho letto un bel pò a riguardo, ma ad esempio, quando le guide dicono inserire il codice nell'html, in joomla dove lo devo mettere il codice?
-
dipende da dove vuoi visualizzare quelle icone, se ad esempio le vuoi visualizzare all'interno di un articolo, e li che devi inserirle.
-
ok.. vorrei inserirle in un modulo personalizzato... quindi lhtml lo metto nel modulo e il css?
-
il css sempre nel file css custom o css principale del template
-
ok.. ti ringrazio per il chiarimento. . faccio qualche prova.
-
Il codice dovrebbe essere questo...
Quindi, il css lo inserisco nel custom.css
e il resto? coe "costruisco" il modulo personalizzato?
Praticamente ho l'immagine social.png che raggruppa 5 icone social...
la metto così com'è sul modulo personalizzato?
=============== CSS =====================
.sprite {
background-image: url(social.png);
background-repeat: no-repeat;
display: block;
}
.sprite-1fb {
width: 44px;
height: 44px;
background-position: -5px -5px;
}
.sprite-2tw {
width: 44px;
height: 44px;
background-position: -59px -5px;
}
.sprite-3gp {
width: 44px;
height: 44px;
background-position: -113px -5px;
}
.sprite-4yt {
width: 44px;
height: 44px;
background-position: -167px -5px;
}
.sprite-5rss {
width: 44px;
height: 44px;
background-position: -221px -5px;
}
=============================================
=============== HTML ======================
<i class="sprite sprite-1fb"></i>
<i class="sprite sprite-2tw"></i>
<i class="sprite sprite-3gp"></i>
<i class="sprite sprite-4yt"></i>
<i class="sprite sprite-5rss"></i>
-
direi di inserire il css nel file css del template e il codice html dentro il modulo custom
-
Ciao Giusebos,
col css ci sono...
ma con l'html no...
Nel modulo inserisco l'immagine importandola normalmente e poi subito dopo incollo quel codice?
è tutto qui?
-
nel modulo html solo html
-
scusa e l'immagine dove la metto? avevo pensato di fare un modulo personalizzato, inserire l'immagine subito sotto il codice... ma c'è qualcosa che non mi torna però.
Dovrei fare qualcosa del genere?
< src="social.png" width="270" height="60"/>
<i class="sprite sprite-1fb"></i>
<i class="sprite sprite-2tw"></i>
<i class="sprite sprite-3gp"></i>
<i class="sprite sprite-4yt"></i>
<i class="sprite sprite-5rss"></i>
-
l'immagine la inserisce il file css con le sue istruzioni.
-
Ok,
quindi ricapitolando,
creo un modulo personalizzato, lo pubblico nel punto dove voglio visualizzare lo sprite, inserisco nel modulo il codice e salvo.. modifico il custom.css inserendo la nuova parte e dovrebbe andare.. giusto?
Adesso faccio qualche prova... vediamo che vien fuori.
-
No vabbè, ma non è possibile, tiny non mi fa inserire il codice... ma che è? ho provato ad abilitare tutti gli elementi in tiny, ma non funziona, ma che stress è?... ahahahaha
-
Non devi usare un editor per inserire codice, con tiny c'è l'icona html
-
e che devo usare? se utilizzo il tasto html visualizzo il codice inserito nel modulo.. possibile avere un esempio pratico, mi sono perso un pò..
-
Devi prima cliccare html e lì metterci il codice. In alternativa usa l'editor noeditor.
-
è proprio quello che ho fatto. . ma qualcosa non va. . nel modulo online visualizzo il codice pari pari come lho inserito. .. sbaglio qualcosa ma non capisco cosa. .. cmq adesso stacco un po e faccio altro. . così magari mi viene l'ispirazione ;D ;D
-
Allora, ho fatto qualche passo in avanti...
però ho ancora da sistemare le cose.... intanto il link
http://is.gd/2KjADj
Il modulo è il secondo a dx, quello con le icone social in verticale.
I problemi sono 2:
- Le icone dovrebbero essere in orizontale invece che in verticale.
- Devo inserire i collegamenti ad ogni "singola" icona..
Fatto questo dovrei esserci :)
-
Il primo problema sembra risolto, ho sostituito
da così
display: block;
a così
display: inline-block;
Anche se in tutti i tutorial c'è scritto che l'opzione corretta è la prima...
Adesso mi resta solo da far funzionare i collegamenti.. devo inserire i link nel css ?