Sprite css in joomla

[daniel77]

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

[giusebos]

ci sono fior di tutorial, fatti bene con immagini esplicite, esempi e codice.

Ne hai visto qualcuno?

[daniel77]

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?

[giusebos]

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!

[daniel77]

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?

[giusebos]

dipende da dove vuoi visualizzare quelle icone, se ad esempio le vuoi visualizzare all'interno di un articolo, e li che devi inserirle.

[daniel77]

ok.. vorrei inserirle in un modulo personalizzato... quindi lhtml lo metto nel modulo e il css?

[giusebos]

il css sempre nel file css custom o css principale del template

[daniel77]

ok.. ti ringrazio per il chiarimento. . faccio qualche prova.

[daniel77]

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?

Codice: [Seleziona]


=============== 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>



[giusebos]

direi di inserire il css nel file css del template e il codice html dentro il modulo custom

[daniel77]

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?

[giusebos]

nel modulo html solo html

[daniel77]

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?

Codice: [Seleziona]


< 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>



[giusebos]

l'immagine la inserisce il file css con le sue istruzioni.

[daniel77]

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.

[daniel77]

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

[tomtomeight]

Non devi usare un editor per inserire codice, con tiny c'è l'icona html

[daniel77]

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ò..

[tomtomeight]

Devi prima cliccare html e lì metterci il codice. In alternativa usa l'editor noeditor.

[daniel77]

è 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 

[daniel77]

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

[daniel77]

Il primo problema sembra risolto, ho sostituito

da così

Codice: [Seleziona]

display:  block;

a così

Codice: [Seleziona]

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 ?