come modificare le immagini per le icone di faveeffect

[^o^^o^]

Salve, vorrei modificare le immagini delle icone del modulo faveffect che ho allegato. Dai parametri del modulo si possono modificare link, colori, font del carattere, però non si possono cambiare le immagini. Inoltre ho guardato in tutte le cartelle del mio joomla, images ecc., ma non ho trovato nulla. Ho allegato il file zip, lo si può installare e procvare (basta scompattare il file zip altrimenti non lo carica), sono effetti carini e mi piacerebbe poterli modificare. grazie.

[allegato eliminato automaticamente dopo un anno]

[alessioa]

Ciao,

sono glyph icon richiamate da CSS3 e Font Awesome, non sono vere e proprie immagini, dovresti cambiare il valore "content" contenuto all'interno del CSS del modulo, nelle impostazione del modulo trovi questa voce :

Icon 1 Name : fa-magic

il valore che devi cambiare è "fa-magic" che non è altro che il richiamo dell'icona, le icone le trovi tutte qui http://fontawesome.io/icons/

Buon divertimento :-)

[^o^^o^]

Grazie per la dritta, sono davvero interessanti!  Però io vorrei poter inserire una immagine al posto dei Font Awesome...è possibie modificare il css facendo in modo che l'icona richiami una immagine al posto del font? e se proprio non fosse possibile, esistono set di icone simili con questi effetti dove poter inserire delle immagini?

[alessioa]

Certo che si, se hai conoscenze di css3 e html puoi ottenere lo stesso effetto, cerca su google :

css3 animation effect
Css3 transition effect
Free icon set

Però così il modulo che hai installato non ti serve più

[^o^^o^]

Il tuo consiglio non sarebbe male ma ho paura che inserendo codici nei fogli di stile possa creare un pasticcio...più che altro avrei pensato quest'altra cosa: modifico il css del modulo in questione così lascio l'effetto e inserisco l'immagine al posto del FontAwesome. Quindi se ad esempio modifico l'icona numero 4 (che fa l'effetto moneta che gira) ed entro direttamente nel codice:

Codice: [Seleziona]

/* Effect 4 */
.faveffects-effect4 {
  -webkit-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
}
.faveffects-effect4:hover {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-perspective-origin: 50% 100px;
  -moz-perspective-origin: 50% 100px;
  -o-perspective-origin: 50% 100px;
  perspective-origin: 50% 100px;
  -webkit-transition: all 2s ease-in-out 0s;
  -moz-transition: all 2s ease-in-out 0s;
  -o-transition: all 2s ease-in-out 0s;
  transition: all 2s ease-in-out 0s;
  background-color: #eee!important;
  border-color: #444!important;
  color: #444!important;
}
.faveffects-effect4 i:hover {
  color: #444!important;
}mi basta sostituire questa parte di codice:

Codice: [Seleziona]

  background-color: #eee!important;
  border-color: #444!important;
  color: #444!important;
}
.faveffects-effect4 i:hover {
  color: #444!important;
}con quest'altra:

Codice: [Seleziona]

# image_bg {
  background:url(/nome cartella/nome file) repeat-x 0 0;
}oppure questi passaggi sono errati e devo farne altri?

[alessioa]

Il tuo consiglio non sarebbe male ma ho paura che inserendo codici nei fogli di stile possa creare un pasticcio...

Quale pasticcio ? Se aggiungi nuovo codice correttamente e non tocchi quello attuale non vedo cosa possa accadare, che poi tra l'altro non dovresti nemmeno scrivere nel css di font awesome ma in un qualunque altro foglio di stile.

Il css che hai scritto non va bene, questo si che è un pasticcio, ti manca la parte più importante che è :hover, e comunque dovresti scrivere da zero l'html.

Per fare quello che chiedi o utilizzi font awesome oppure scrivi un html tuo in un modulo personalizzato e poi gli passi il css sempre scritto da te.

Una cosa tipo

HTML

<div class="pippo">
</div>

CSS

div.pippo{
background:url(immagine_statica.png) no-repeat;
height: 200px;
width: 200px;
}
div.pippo:hover{
background:url(immagine_hover.png) no-repeat;
}

[^o^^o^]

capisco..però io non sono uno sviluppatore e faccio tutto da autodidatta...quindi non saprei creare un foglio nuovo da caricare all'interno del template, ecco perchè pensavo di modificare il modulo, perchè credevo fosse meno complicato, invece mi rendo conto che è il contrario...mi sa che mi tocca rinunciare. In realta io cercherei in modo più sbrigativo qualche plugin o modulo con icone ad effetto dove si possa sostituire solo l'immagine,ma purtroppo non riesco a trovarne,...

[alessioa]

Ciao,

onestamente non ho mai cercato nella JED, magari qualcosa trovi, non demordere, cerca, cerca, cerca anche su google, qualcosa trovi!

[^o^^o^]

grazie lo stesso, ciao!

[emanuelescrugli]

Ciao a tutti!


scusatemi  ma proprio non riesco a trovare i link alle immagini di font awesome! in quale css stanno??

[alessioa]

Ciao,

se leggi il topic dall'inzio ti rendi conto che non sono immagini, Font Awesome, lo dice il nome stesso, è un font, cioè un set di caratteri che contiene dei valori per creare delle icone, questi valori richiamano i caratteri contenuti nel font.

Il css si chiama fontawesome.css , ma ripeto non troverai immagini ma solo valori tipo "\f007" , ecc..