Drop Cap e Immagini

[Francolonna]

Buongiorno a tutti!
Ho bisogno di un aiuto! Sto editanto un sito internet, il template l'ho comprato da internet e in homepage ha 4 cerchi colorati con in mezzo una lettera .
All inizio pensavo fossero delle immagini e mi andava benissimo perchè volevo cambiarle con 4 mie immagini sempre rotonde.
Il problema è che studiando la struttura ho notato che invece il codice di riferimento parla di drop cap quindi io posso cambiare il colore dello sfondo e la lettera interna semplicemente agendo sui codici.


Ora partendo dal presupposto che non so cosa sia un drop cap e a cosa serve la mia domanda è , posso mettere al posto di questo cerchio con lettere una immagine con la stessa dimensione? quindi sostituire questo codice drop cap con un codice immagine?
Spero di essere stato chiaro!


Allego una immagine per farmi capire meglio!


Grazie per l'aiuto che spero mi darete

[allegato eliminato automaticamente dopo un anno]

[rezor]

Drop cap è quando la prima lettera di una frase è molto più grande del resto, ed è allineata in modo di occupare le prime 2-3 righe di testo, come si usava nei manoscritti degli amanuensi. CSS permette questa funzione.

Per sostituire i testi a. b. c. d. con le immagini puoi procedere in due modi, scegli a seconda di quale ti viene più comodo. Il primo è più semplice ma non è detto che funzioni correttamente sui vecchi IE.

1. css:

Scrivi una regola per il selettore di ciascuno degli elementi, con la quale nascondi il testo presente e aggiungi un'immagine (dovrai anche impostare le dimensioni):  quindi ad esempio

Codice: [Seleziona]

#qualcheidentificativo.chetipermette.ditrovareitag a {
     width:45px;height:45px;
     background-image:url(/images/immagine1.png);
     text-indent:-9000px;  /*questo fa sparire la "a." */
     overflow:hidden;
}

#qualcheidentificativo.chetipermette.ditrovareitag a:nth-child(2) {
     background-image:url(/images/immagine2.png);
}
e così via.

2. joomla

guarda il codice dal browser, trova la vista corrispondente (presumibilmente sarà il contenuto di un modulo custom.html), all'interno troverai il markup che genera queste lettere; cancella le classi e inserisci dei tag img ... oppure se vuoi una cosa lievemente più veloce fai uno sprite.

3. font css

usando font come font-awesome hai a disposizione tante belle icone, in quel caso ti sarebbe sufficiente mettere le classi giuste (dopo aver aggiunto il font al sito). Però ti appesantisci d i più il sito se è solo per questo forse 60kb di font sono tanti.

[Francolonna]

Ciao Rezor!


Intanto ti ringrazio per la disponibilità! e le esaurienti soluzioni!


Ora dovrò cercare di decifrarle perchè ahimè non sono un esperto maneggio qua e la ma non di piu però penso di potercela fare soprattutto con la soluzione 2!


Unica domanda , io però non voglio sostituire solo la lettera interna ma proprio tutto quindi anche il cerchio colorato e mettere un immagine che sarà sempre un cerchio colorato della stessa misura ma con immagini interne edito bla bla bla.


Quindi io avrò un png o jpeg raffigurante un cerchio colorato con dentro una icona delle immagini ecc ecc.


QUeste soluzioni che mi hai segnalato mi permettono di sostituire anche il cerchio colorato gia esistente?


Grazie!

[rezor]

Si allora vai con la due, cambiate le classi css e messe le immagini in sostituzione non dovresti aver bisogno di altro