[RISOLTO] Sostituire il titolo del modulo con immagine

[danjde]

Salve amici,
ho letto questo post su come sostituire un immagine ad un titolo modulo.
Purtroppo nel mio caso qualcosa non sembra andare per il verso giusto e dunque non riesco a visualizzare l'immagine.

Ciò che ho fatto è:

1) Ho inserito nel modulo il module class suffix: _marablog
 2) Ho creato in custom.css la classe: .moduletable_marablog h3
 3) dove ho posto il seguente codice:

Codice: [Seleziona]

.moduletable_marablog h3 {
        background:transparent url(../images/mara-k2-avatar.png) no-repeat scroll 49px -12px;
        color:#ffffff;
        height:81px;
        font-size:0;
}
allego lo screenshot da Firebug

Grazie infinite!

Davide

[giusebos]

Codice: [Seleziona]

.moduletable _marablog h3 {
        background:transparent url(../images/mara-k2-avatar.png) no-repeat scroll 49px -12px;
        color:#ffffff;
        height:81px;
        font-size:0;
}

[danjde]

Grazie "giusebos"!

Eh, sapessi, le ho provate tutte, ma non prende i nuovi attributi!
Non so capire, non sono di certo un mago con i css, ma non riesco a capire dove sbaglio!
Ho provato ad impostarli anche direttamente da firebug/analizza elemento ma niente.

Se vuoi, se hai tempo, se hai voglia di curiosare, ecco qui l'url

Grazie ancora della tua gentilissima disponibilità :-)

Davide

[Alex21]

. . . Eh, sapessi, le ho provate tutte, ma non prende i nuovi attributi! . . .

Provate quasi tutte, altrimenti funzionerebbe. 


Purtroppo i css hanno il difettuccio che solitamente funzionano nella pagina per cui sono stati scritti. Quando li si copia fanno cilecca, per questo o per quello.


Riguardiamoli, iniziando da questo: url(../images/mara-k2-avatar.png)  . Per quello che capisco dovrebbe esserci l'immagine a questo url:  https://www.veronalive.it/images/mara-k2-avatar.png  . Però mi dà 404 - page not found.  Dove hai messo l'immagine?
Ciao!

[danielecr]

2) Ho creato in custom.css

Ciao,
oltre alle cose già scritte, magari mi sbaglio, ma se guardo il sorgente della pagina che hai linkato poco sopra, non vedo il caricamento del file custom.css, quindi assicurati che il file dove scrivi le istruzioni sia caricato.
Se poi ti confondi con ../ e le posizioni relative puoi sempre usare il percorso copleto del tipo

Codice: [Seleziona]

url('http://sito.com/percorso/cartella/immagine/immagine.png')


[danjde]

Hey! Grazie a tutti del gentilissimo aiuto!
Vorrei in effetti capire (per imparare) meglio dove sta l'inghippo :-D

Ho provato a sostituire il path relativo con uno assoluto, ma nisba!
Allora ho provato ad assegnare i valori unicamente al tag ".g-title" e per la prima volta vedo l'immagine (poi devo sistemare le dimensioni) al posto del testo:

Codice: [Seleziona]

.g-title {
        background:transparent url(../../../../images/stories/veronalive/logo/K2/mara-k2-avatar.png) no-repeat scroll 49px -12px;
        color:#ffffff;
        height:81px;
        font-size:0;
}

Ovviamente usando il tag ".g-title" generico mi ritrovo la stessa immagine su ogni modulo titolo.

Allora ho provato con i tag:

Codice: [Seleziona]

.g-title .moduletable _marablog h3
.g-title _marablog
.g-title h3 (tanto per provare)
.moduletable _marablog .g-title
nulla, nulla, nulla!


PS
"le ho provate ..quasi tutte" (eccetto l'unica giusta) :-D

Grazie ancora

[Alex21]

Mi sembra che ci siano sostanziali miglioramenti.  Il file css personale  c'è  e pure il percorso dell' immagine, che si vede.
Adesso bisogna raggiungere quel particolare <h3>.
Toccando ferro si può provare così:

Codice: [Seleziona]

.moduletable._marablog h3{
background:transparent url(../../../../images/stories/veronalive/logo/K2/mara-k2-avatar.png) no-repeat scroll 49px !important;
color:#ffffff;
height:81px;
font-size:0;
}
oppure
.moduletable._marablog .g-title{

background:transparent url(../../../../images/stories/veronalive/logo/K2/mara-k2-avatar.png) no-repeat scroll 49px !important;
 color:#ffffff;
 height:81px;
 font-size:0;
}
Se togli -12px si allinea giusto in altezza.
Ciao!



[danjde]

WAW Alex, hai fatto centro!
Vanno bene entrambe e in effetti sia "h3" che "g-title" identificano in modo univoco quella porzione di modulo.

Il problema dipendeva evidentemente dal fatto che tra i vari tentativi non avevo "attaccato" il tag e aggiunto il punto insieme.
Non sapevo che i tag si potessero "attaccare" anche se il punto li precede.

Ma del resto ci sono un infinità di cose che ignoro e più imparo e più mi rendo conto di essere ignorante... :-D


Grazie grazie grazie grazie grazie a tutti!!!!