Grave problema con layout con tema figlio del tema Clean su IE10 e Firefox

Grave problema con layout con tema figlio del tema Clean su IE10 e Firefox

di Giovanni Graziani -
Numero di risposte: 6

Ciao a tutti!

Da quando ho aggiornato a Moodle 2.5.1 e Moodle 2.5.1+ ho un problema con il layout del mio tema, clonato dal tema Clean. Stranamente su Chrome 28 il sito www.abcelearning.it viene visualizzato correttamente mentre su IE10 e Firefox 22, no e prima non succedeva. Per questo escludo che il problema sia il tema in sé che ho creato. Forse è stata effettuata qualche modifica nel tema Clean... è possibile sistemare? Vi lascio alcuni screenshot: 

ABC e-learning con chrome 28

ABC e-learning con IE10

ABC e-learning con Firefox 22

 

Media dei voti:  -
In riposta a Giovanni Graziani

Re: Grave problema con layout con tema figlio del tema Clean su IE10 e Firefox

di Matteo Scaramuccia -

Ciao Giovanni,
puoi indicare esattamente quale sia la tua 2.5.1+? Essendo una weekly è importante sapere l'esatta versione interna: trovi le indicazioni della versione in version.php o, da Amministratore, nella pagina delle notifiche.

Hai già provato anche con il tema "Clean" e non con la tua "derivazione"? Ci sono molte lavorazioni in corso sul tema e vanno di pari passo con le modifiche al core di Moodle per cui potrebbe anche essere che devi "semplicemente" riallineare anche il codice del tuo tema.

HTH,
Matteo

Media dei voti:  -
In riposta a Matteo Scaramuccia

Re: Grave problema con layout con tema figlio del tema Clean su IE10 e Firefox

di Giovanni Graziani -

Allora la versione precisa è la 2.5.1+ build 20130719

Premetto che il tema clean funziona ovunque e che il mio tema clonato funzionava sulla 2.5 e la 2.5+ (ho rifatto prove anche il locale).

Sostanzialmente ho clonato il tema Clean, ho aggiunto un'immagine nel logo e il seguente css personalizzato:

 

a.logo { height: 150px; margin-bottom: 40px; border-radius: 3px; background-image: url('http://www.abcelearning.it/pluginfile.php/1/theme_mytheme/logo/1371659715/ logoabc.png') no-repeat 0 0; background-position: center; border: solid 2px #ff9900; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; } .breadcrumb { background: #ffffcc; background: -moz-linear-gradient(top, #ffffcc 0%, #ff9900 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffcc), color-stop(100%,#ff9900)); background: -webkit-linear-gradient(top, #ffffcc 0%,#ff9900 100%); background: -o-linear-gradient(top, #ffffcc 0%,#ff9900 100%); background: -ms-linear-gradient(top, #ffffcc 0%,#ff9900 100%); background: linear-gradient(top, #ffffcc 0%,#ff9900 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffcc', endColorstr='#ff9900',GradientType=0 ); border: solid 2px #ff9900; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; } .block { background: transparent; border: none; box-shadow: none } .block .header .title h2, .block h3.main { background: #ffffcc; /* Old browsers */ background: -moz-linear-gradient(top, #ffffcc 0%, #ff9900 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffcc), color-stop(100%,#ff9900)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffcc 0%,#ff9900 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffcc 0%,#ff9900 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffcc 0%,#ff9900 100%); /* IE10+ */ background: linear-gradient(top, #ffffcc 0%,#ff9900 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffcc', endColorstr='#ff9900',GradientType=0 ); /* IE6-9 */ border-radius: 3px; padding: 5px 15px; color: #000; text-shadow: none; border: solid 2px #ff9900; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; } .course_category_tree .category > .info { background: #ffffcc; background: -moz-linear-gradient(top, #ffffcc 0%, #ff9900 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffcc), color-stop(100%,#ff9900)); background: -webkit-linear-gradient(top, #ffffcc 0%,#ff9900 100%); background: -o-linear-gradient(top, #ffffcc 0%,#ff9900 100%); background: -ms-linear-gradient(top, #ffffcc 0%,#ff9900 100%); background: linear-gradient(top, #ffffcc 0%,#ff9900 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffcc', endColorstr='#ff9900',GradientType=0 ); border: solid 2px #ff9900; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; } .courses .coursebox.collapsed { border: 2px solid #FF9900; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; background: transparent; margin-bottom: 4px } .coursebox { border: solid 2px #ff9900; } ##.courses .coursebox.even { background: #ffffcc; background: -moz-linear-gradient(top, #ffffcc 0%, #ff9900 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffcc), color-stop(100%,#ff9900)); background: -webkit-linear-gradient(top, #ffffcc 0%,#ff9900 100%); background: -o-linear-gradient(top, #ffffcc 0%,#ff9900 100%); background: -ms-linear-gradient(top, #ffffcc 0%,#ff9900 100%); background: linear-gradient(top, #ffffcc 0%,#ff9900 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffcc', endColorstr='#ff9900',GradientType=0 ); } .breadcrumb>li { text-shadow: none; } #page-footer { border-top: solid 2px #ff9900 } .course-content ul li.section.main { margin-top: 0; border-bottom: 2px solid #ff9900; } .course-content .section-summary { margin-top: 5px; list-style: none; border: 2px solid #ff9900; border-radius: 3px; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; } .course-content .single-section .section-navigation .title { clear: both; font-size: 24.5px; line-height: 40px; color: #005580; margin-bottom: 30px; font-weight: bold; }

 

Mi sembra però strano che su Chrome funzioni tutto e sugli altri browser no. Evidentemente c'è qualcosa di sbagliato.

Media dei voti:  -
In riposta a Giovanni Graziani

Re: Grave problema con layout con tema figlio del tema Clean su IE10 e Firefox

di Andrea Bicciolo -
Immagine Core developers Immagine Plugin developers Immagine Translators
Se hai clonato il tema da una versione 2.5+ prima dell'aggiornamento a 2.5.1, tieni presente che nella release 2.5.1 sono state introdotte delle modifiche che possono avere un impatto su temi clonati da Clean

Abbiamo riscontrato problematiche simili alle tue con temi clonati da Clean durante i test per l'aggiornamento a 2.5.1 e sebbene sia sempre possibile riallineare il codice abbiamo trovato più semplice e veloce clonare nuovamente i temi per poi aggiungere i CSS personalizzati.

In ogni caso, credo dovrai rimettere mano al tuo tema sorridente.
Media dei voti:  -
In riposta a Giovanni Graziani

Re: Grave problema con layout con tema figlio del tema Clean su IE10 e Firefox

di Giovanni Graziani -

Credo di aver scoperto l'inghippo. Se dal tema clonato tolgo il css personalizzato il layout torna normale. Devo ristudiarmi il css per i nuovi browser. Evidentemente ho sbagliato più di qualcosa. 

PS.: Vedo adesso Andrea la tua risposta. A questo punto faccio un tentativo. Mi salvo il css, riclono il tema da Clean 2.5.1 e vedo se riesco a sistemare. Grazie mille sorridente

Media dei voti:  -
In riposta a Giovanni Graziani

Re: Grave problema con layout con tema figlio del tema Clean su IE10 e Firefox

di Giovanni Graziani -

Ho risolto tutto procedendo così se succedesse a qualcun altro:

1) salvato il css personalizzato in un file txt

2) clonato il tema Clean dall'ultima versione rilasciata (nel mio caso la weekly)

3) reinstallato tema

4) aggiunto il CSS così com'era e salvato

Adesso è tutto ok su tutti e 3 i browser. Contentissimo sorridente Grazie per l'aiuto.

Media dei voti:  -