Joomla.it Forum
Joomla! 3 => Joomla! 3 => : enricoonofri 25 Aug 2015, 17:46:47
-
Buon giorno a tutti, anzi buonasera.
Avendo trovato questo articolo sul sito html.it (http://www.html.it/pag/19457/background-size/), vorrei capire se ciò che è elencato nella tabella in fondo (vedi immagine allegata) rappresenta il codice da inserire per la corretta visualizzazione nei browser corrispondenti.
body {
background: url('fiore_1024.jpg');
background-repeat: no-repeat;
background-position: 0 0;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
Se cambio il css in questo modo, aggiungendo le seguenti righe è corretto?
body {
background: url('fiore_1024.jpg');
background-repeat: no-repeat;
background-position: 0 0;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-size: 9.0+
background-size: 4.0+
background-size: 5.0+
}
Per quello che dice in quel sito, la riga di codice -moz-background-size: cover; , ad esempio, include tutte le versioni fino alla 3.6.
E' già sottinteso che per 9.0+ si intendono le versioni dalla 9 in poi di Int Explorer, e dalla 4 in poi di Mozilla ecc..... ??? ?
Oppure come devo indicarle per vederle bene nei vari browser?
Grazie
-
Da dove saltano fuori le ultime righe che hai aggiunto
background-size: 9.0+
background-size: 4.0+
background-size: 5.0+
Tieni presente che a parità di istruzione viene letta ed applicata sempre l'ultima, per cui, in questo caso varrebbe solo
background-size: 5.0+
ma ripeto che istruzione è?
-
leggi sempre la data degli articoli, nel 2011 la situazione dei browser era completamente differente quindi fai alcune considerazioni:
- in questo momento (siamo nel 2015) tutti i principali browser supportano i css3
- siamo in un momento di transizione, win10 è stato rilasciato con un nuovo browser "microsoft edge" che sembra (quasi) rispettare gli ultimi standard.
- le macchine che hanno installato versioni di EXPLORER 8/9/10 sono relativamente poche rispetto a tutto il parco macchine esistente e queste spesso sono in uso in aziende - banche- enti, gestite quindi da sysadmin che non hanno nessun interesse ad effettuare aggiornamenti di questo tipo, negando spesso la navigazione fuori dalla intranet.
- i privati che hanno un computer tendono ad aggiornare i browser, sopratutto quando le pagine vengono renderizate male
- il codice:
background-size: 9.0+
background-size: 4.0+
background-size: 5.0+
non esiste, da dove lo hai copiato?
quindi se vuoi inserire una immagine di sfondo che si adatti allo schermo senza che questa venga distorta, ovvero si adattera il larghezza eliminando la fascia alta e bassa per i monitor wide o si adatterà in altezza eliminando pezzi di immagine nelle fasce a dx e sx.
le tecniche sono diverse, ma come già ti scrissi in un altro post (forse ti ho dato il link)
questa è una buona tecnica:
lato html, quindi per joomla il file index.php
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
mentre per il file css
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
le regole top, left del div #bg fanno si che l'immagine venga centrata al centro dello schermo top -50 e left -50,
le regole width: 200% e height: 200%; creano un contenitore grande il doppio dello schermo per sicurezza,
ma le regole del div #bg img fissano le dimensioni dell'immagine, la centrano e la fissano ai bordi dello schermo.
le regole min-width: 50% e min-height: 50% si occupano di adattare le dimensioni dell'immagine al 100% in altezza o in larghezza.
questo codice non funzionerà con ie 8, 9,10.
-
Da dove saltano fuori le ultime righe che hai aggiunto
background-size: 9.0+
background-size: 4.0+
background-size: 5.0+
Tieni presente che a parità di istruzione viene letta ed applicata sempre l'ultima, per cui, in questo caso varrebbe solo
background-size: 5.0+
ma ripeto che istruzione è?
ahahaha, sono le versioni minime dei vari browser che supportano questa istruzione. Probabilmente un copia incolla da HTML.it :D
-
Grazie dei consigli!Il file index.php che modifico inserendo il codice html che dice Giusebos, qual'è?
Quello del template che sto utilizzando? in questo caso del t3_blank
-
nel caso di utilizzo di un framework bisogna rifarsi alla documentazione perchè spesso hanno uno schema di file diverso dallo standard.
-
Ecco infatti! Avevo nasato qualcosa...grazie per ora...provo a vedere la documentazione se dice qualcosa in merito alla modifica dell'html e del css in modo da non perdere le modifiche dopo gli aggiornamenti!
-
Un aiutino... vedi la cartella "local" dentro il template, a cosa potrebbe servire ? ;)
-
Uhm...suggerimenti? ::)
-
Uhm...suggerimenti? ::)
...provo a vedere la documentazione
Hai fatto ?
-
Si ma non capisco quale file modificare per ottenere una immagine di sfondo che si adatta alle varie grandezze dei dispositivi.
Al momento ho inserito il codice seguente nella sezione Custom Code e vedo l'immagine come deve essere, sia su Chrome, su Mozilla, sul cellulare con sistema Android, ma la vedo male su Int Expl.
Il codice che ho messo nella sezione After <Head> è il seguente:
<body style="background-image: url(templates/t3_blank/images/enrico.jpg); no-repeat center center fixed;
background-size:100% 100%;">
Il sito è questo (http://www.articolazione-temporomandibolare.info/).
Quindi al momento al momento ho lasciato stare il codice che ha detto giusebos perchè non so dove inserirlo in t3_blank e dalla doc non ho capito.
Poi vorrei anche capire, se possibile, come mai se apro le varie pagine dell'articolo "Racconto la mi storia" oppure "Cos'è l'A.TM. mi cambia la visualizzazione, una pagina sembra più zoommata dell'altra" (al di la del fatto che devo cambiare il colore del testo per renderlo più visibile, ma questo è altra cosa)
-
Guarda ti ho già datto uno spunto di partenza.
Vedi che nella documentazione di T3 esiste una sezione che si chiama "Isolate template settings and customization", cercala e leggi con attenzione, ti spiega tutto quello che serve.
-
Ok allora guardo subito lì! thanks ti faccio sapere e grazie al momento 8)
-
Vedi allegato, oppure (doc (http://www.t3-framework.org/documentation/new-features#isolate-template))Si capisce meglio in inglese che in italiano, cmq non riesco a capire se il mio file css con le mie personalizzazioni di background lo devo inserire nel percorso root/templates/t3_blank/local/css,
e soprattutto non capisco che cosa sia quel codice e dove lo debba metttere.
Non è poi così chiaro, anzi per nulla.
// Define CSS file
<stylesheets>
<file>css/custom/your-style.css</file>
</stylesheets>
-
Non ho seguito la guida ne non conosco il componente ma mi sembra che ci sia scritto che devi metterlo nel file local/etc/asset.xml
Ti torna?
-
Uhm...no...cioè innanzitutto all'interno della cartella local ci sono due cartelle: css e etc.
Dentro etc ce nè un'altra che si chiama layout, al cui interno ci sono 4 file (tutti e 4 sono file .ini e non .xml)
Nella cartella css tutti file .css
Ora, cosa dovrei avere chiaro? Direi proprio nulla.
In generale:
Se una pagina html con l'aggiunta di css per lo sfondo,ad esempio, è semplice da realizzare, come fare invece per integrare un template (in un framework come t3 ad esempio) con del codice css personalizzato o html, perchè la guida non dice: devi creare il css, lo chiami così, e lo metti qui punto e basta!
Poi il css invece lo metti qui!
E così se aggiorni tutti non perdi le modifiche!
Non lo dice! Che guida è se non è chiara! O almeno per me eh!
Scusate lo sfogo! Buona notte!!! :-X
-
Giovi grazie cmq per l'interesse, spero di ricevere consigli utili anche da te sul problema!
-
Allora, per quello che ho capito, e non so se ho capito bene dato i risultati.
Io ho creato un file dal nome assets.xml con il seguente codice, e l'ho messo dentro templates/t3_blank/local/etc/assets.xml
// Define CSS file
<stylesheets>
<file>css/custom/custom.css</file>
</stylesheets>
Poi ho creato una cartella dato che non c'era (dal nome custom) con all'interno un file chiamato custom.css in cui c'è il seguente codice e l'ho inserita in templates/t3_blank/local/css/custom/custom.css
<body style="background-image: url(templates/t3_blank/images/enrico.jpg); no-repeat center center fixed;
background-size:100% 100%;">
Ora il risultato è quello che vedete nell'immagine allegata.
Cosa sbaglio??
-
dal messaggio manca un '<'
-
é l'ho capito questo, ma dove???
-
Aldilà del messaggio di errore, quel codice nel file custom.css é sbagliato.
<body style="background-image: url(templates/t3_blank/images/enrico.jpg); no-repeat center center fixed;
background-size:100% 100%;">
questo codice potrebbe andar bene (anzi no perchè c'é un ; di troppo) inserito all'interno della pagina indice del template.
Ma se carichi un file css esterno il codice é diverso:
body {
background-image: url(templates/t3_blank/images/enrico.jpg) no-repeat center center fixed;
background-size:100% 100%;
}
-
Mi sta venendo il sospetto, visto le varie discussioni, che stai facendo un pò di esperimenti didattici.
Però se così fosse dovresti andare per gradi: stai inserendo dei pezzi di codice presi chissà dove nei posti sbagliati.
Io credo che al di là di joomla, prima dovresti avere almeno una buona infarinatura di html e di css. Se non hai questa minima base che colmi con qualche ora di lettura o di videotutorial e che ti consentrebbe di conoscere il perchè (il come lo impari via via) rischi di fare cose che non capisci e di generare errori su errori su errori su errori su errori in un loop infinito.
ma magari mi sbaglio.
-
grazie dei consigli!