CSS Import e privilegi Padre/figlio

[gervaweb]

Giorno a tutti
Ho un probleme che mi sta facendo perdere un mare di tempo :-(

Ho due file CSS uno padre e uno figlio che importa il padre.
Da cosnole posso solo personalizzare il file figlio tramite pannello.

Ho per esempio la linea seguente del file Padre
body { background: #eee url("images/site-bg.jpg") repeat; nowhitespace: afterproperty; font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; }

Come faccio a indicare mezzo file figlio che:
- non voglio nessuna immagine di bg
- che le impostazioni color: #444; sono da non considerare

Oppure in questo caso ho lo stesso file padre e nel file figlio le seguenti linee:
html { background: url("images/bg-site.jpg") no-repeat center center fixed; }
body { background-position:center top; background-image: url("data:image/png;base64,iKGgoVBORw0 ..... "); padding-bottom: 1.618em; }
body { nowhitespace: afterproperty; font: 16px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; }

In questo caso carico una immagine di bg mezzo tag html e vorrei che:
- body non consideri le impostazioni del file padre ma SOLO quelle del file figlio, qundi non utilizzi la vecchia immagine bg e non abbia color.


In pratica come posso "eliminare/nascondere" delle impostazioni presenti ed importate dal file padre ma modificate mezzo file figlio.


Grazie per l'aiuto

[giova95]

Un link al tuo sito potrebbe aiutare, perchè tra figlio padre e zii della tua spiegazione non ho capito moltissimo
Scherzo, ho capito più o meno
Aggiungendo "!important" appena dopo la proprietà dovresti risolvere

body {
background:none!important; 
}

(mi raccomando, prima "!important" poi il punto e virgola)

[gervaweb]

Grazie per la risposta.

il link è questo puertojohnmartin.it

Ora il file "padre" carica le seguenti linee:
body { background: #eee url("images/main-bg.png") repeat; nowhitespace: afterproperty; font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body a { color: #f15a23 }
body a:hover { text-decoration: underline }

Il file figlio viceversa:
html { background: url("images/bg-site.jpg") no-repeat center center fixed; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; }
body { background-position:center top; background-image: url("data:image/png;base64,iVBOR...."); padding-bottom: 1.618em; }
body { nowhitespace: afterproperty; font: 16px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }

Come puoi vedere ho aggiunto il tag html per avere una immagine di bg fissa (che va in collisione con il body del padre)
Il tag body dovrebbe "annullare" le impostazioni bg-image del file padre ed utilizzare quella base64 del file figlio


Aggiungo, ma non esiste un tag che annulli tutto?
Per esempio body {none !important;} e quindi reimposto il mio body nuovo come voglio?

Il fatto di applicare background-image:none!important; come suggerisci non entra in conflitto dato che cmq voglio un'immagine?

Cmq ho fatto una prova, ho aggiunto così
body { background-image: none !important; color: none !important; background-position:center top; background-image: url("data:image/png;base64,iVBO..."); padding-bottom: 1.618em; }
Così facendo non vedo più la mia immagine. Ma se faccio "vedi immagine di sfondo" con dx mouse appare. Qundi c'è.

Se invece aggiungo background: none !important; appare l'immagine, ma non quella base64 dello stesso body.

Viceversa se metto un REM nel file padre il tutto funge correttamente.


Grazie per il supporto

[giova95]

Si nota che non sei esperto dell'ambiente, leggiti le guide di css qui su html.it, le migliori che trovi sul web in italiano.

Se vuoi un'immagine metterai:

 body { background-image: url('percorso_immagine')!important;}

!important serve per sovrastare qualsiasi altra regola definita, quindi se imposti background: none!important; e poi metti un background-image è ovvio che non vedrai niente perchè la regola applicata sarà quella che dice che non ci deve essere background.

Comunque non esiste nessuna regola del tipo:

body {none !important;}

in quanto le regole definite dopo sovrascrivono quelle scritte prima e dunque annullare tutto non ha senso perchè si annulla automaticamente, più o meno.
Leggendo le guide css qui su html soffermati su questa pagina che sicuramente ti aiuterà a capire il problema.

[gervaweb]

Si nota che non sei esperto dell'ambiente, leggiti le guide di css qui su html.it, le migliori che trovi sul web in italiano.

Mai detto di essere un esperto, se sono qui è perchè ho bisogno di aiuto per capire come fare e imparare eventualmente.

Probabilmente non hai capito bene il problema.

Cmq ho risolto oggi. Avevo omesso di aggiungere al file "figlio" background-color=trasparent; che di fatto, per la regola della Ereditarietà va ad annullare/modificare color: #444; presente nel file "padre" facendo vedere l'immagine di sfondo e la stessa immagine base64.

Ora le due nuove regole, come da mio promo post, funzionano.

html { background: url("images/bg-site.jpg") no-repeat center center fixed; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; }
body { background-position:center top; background-image: url("data:image/png;base64,iVBO....") !important; padding-bottom: 1.618em; background-color:transparent; }

Comunque non esiste nessuna regola del tipo:

body {none !important;}

Grazie per la conferma, lo immaginavo ma non ne ero sicuro.