Autore Topic: [RISOLTO] Modifiche size e col su user.css ignorate quando aperte da sito mobile  (Letto 869 volte)

Offline idroweb

  • Esploratore
  • **
  • Post: 168
  • Sesso: Maschio
    • Mostra profilo
Ciao dopo un lungo periodo di inattività su Joomla!, ho da poco aggiornato alla versione 4 e pensavo che bastasse duplicare o creare un template Cassiopeia derivato per fare modifiche ai css ma ho poi scoperto alla fine in realtà così facendo si modificano i file originali, se è corretto ciò che ho scritto.

Mi rimangono 2 modifiche da fare senza toccare i file originali, copie o quant'altro ma non sono ancora riuscito visto anche che sono cambiate le posizioni di cartelle, file e mi pare anche del codice.

Modificando i caratteri, size e colore per h1, h2.... sul file user.css, queste vengono ignorate quando si apre il sito web da mobile, non capisco se serve un'altra istruzione, pensavo al file template.rtl.min.css mi pare però che il codice sia identico al file template.min.css e quindi non inutile inserirlo nel file user.css, ho provato a creare un file rtl ma non permette la destinazione in directory del derivato e non so se possibile replicare in cartelle.

L'altra modifica che vorrei fare è centrare le voci del menu top al container ma con Joomla! 4 ma non ho trovato ancora da quale file php , trovato invece come aumentare i caratteri del titoli menu top.

Per il discorso su grandezza caratteri e loro colori questo il codice emesso:
Codice: [Seleziona]
@media (min-width:1200px){.h1,h1{font-size:1.7rem ;color: #135cae;}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:1.3rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.1rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1rem}}.h5,h5{font-size:0.95rem}.h6,h6{font-size:0.9rem}[code][/size]


[size=2px]L'ultima cosa che non ho capito, eseguendo questa modifica sempre su user.css sia se seleziono template standard o alternativo, riguardo i colori, il file colour.alternative.min.css rimane ininfluente dando sempre lo standard, stessa tipologia di risultato del codice sopra tra i file.[/size]

[size=2px][code]:root{--cassiopeia-color-primary:#005e8d;--cassiopeia-color-link:#135cae;--cassiopeia-color-hover:#95c2f0}[code][/size]


[size=2px]Grazie.
« Ultima modifica: 03 Set 2022, 23:03:30 da idroweb »

Offline xplosion

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4019
  • Sesso: Maschio
    • Mostra profilo
pensavo che bastasse duplicare o creare un template Cassiopeia derivato per fare modifiche ai css ma ho poi scoperto alla fine in realtà così facendo si modificano i file originali, se è corretto ciò che ho scritto.
Non e così.
Se hai creato correttamente un child template, in quel child template devi fare tutte le modifiche, sia css che override. In questo modo non vengono toccati i file originali.

Per quanto riguarda le media-query, quella tua è sbagliata. Prova così:
Codice: [Seleziona]
@media (max-width: 576px) {
  h1, h2 {
    font-size:1.3rem;
  }
}

Offline idroweb

  • Esploratore
  • **
  • Post: 168
  • Sesso: Maschio
    • Mostra profilo
Temo di non aver capito, ho preso la parte di codice originale dal template.min.css ed ho aggiunto il colore solo per h1 cambiando la grandezza caratteri come per h2, h3, h4, h5, h6 e si qui funziona da pc, non da mobile tab e telefoni, ora ho sostituito solo max con min ma lasciando gli stessi valori.
Ora a seconda dei formati funziona o meno sia come hai scritto tu che come vedi qui sotto, dovrei fare in modo che funzionasse con qualsiasi dispositivo ma non so dove intervenire
Codice: [Seleziona]
@media (min-width:1200px){.h1,h1{font-size:1.7rem ;color: #135cae;}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:1.3rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.1rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1rem}}.h5,h5{font-size:0.95rem}.h6,h6{font-size:0.9rem}


@media (max-width:576px){.h1,h1{font-size:1.3rem ;color: #135cae;}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (max-width:576px){.h2,h2{font-size:1.3rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (max-width:576px){.h3,h3{font-size:1.1rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (max-width:576px){.h4,h4{font-size:1rem}}.h5,h5{font-size:0.95rem}.h6,h6{font-size:0.9rem}

L'originale prima parte che avevo modificato è scritto così:
Codice: [Seleziona]
@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}
Ps. Che strano anche se impostate le notifiche sul forum continuo a non riceverle
« Ultima modifica: 26 Ago 2022, 16:50:21 da idroweb »

Offline idroweb

  • Esploratore
  • **
  • Post: 168
  • Sesso: Maschio
    • Mostra profilo
La prima di queste cose che dovrei fare è la modifica della grandezza caratteri di h1 (questo anche il colore) h2, h3, h4, h5 e h6 ma che funzioni su tutti i dispositivi ovvero in tutti i formati schermi

Offline idroweb

  • Esploratore
  • **
  • Post: 168
  • Sesso: Maschio
    • Mostra profilo
In attesa di qualche eventuale risposta provando e riprovando o modificato così da smartphone mi funziona, con Edge in tutti i formati, con Smiljet (base Chrome) non tutti i formati:


Da Così

Codice: [Seleziona]
@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--body-bg);color:var(--body-color);font-family:var(--body-font-family);font-size:var(--body-font-size);font-weight:var(--body-font-weight);line-height:var(--body-line-height);margin:0;text-align:var(--body-text-align)}hr{background-color:currentColor;border:0;color:inherit;margin:1rem 0;opacity:.25}hr:not([size]){height:1px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.2;margin-bottom:.5rem;margin-top:0}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}

a così
Codice: [Seleziona]
@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--body-bg);color:var(--body-color);font-family:var(--body-font-family);font-size:var(--body-font-size);font-weight:var(--body-font-weight);line-height:var(--body-line-height);margin:0;text-align:var(--body-text-align)}hr{background-color:currentColor;border:0;color:inherit;margin:1rem 0;opacity:.25}hr:not([size]){height:1px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.2;margin-bottom:.5rem;margin-top:0}.h1,h1{font-size:calc(1.7rem + 1.5vw)}@media (min-width:375px){.h1,h1{font-size:1.7rem ;color: #135cae;}}.h2,h2{font-size:calc(1.3rem + .9vw)}@media (min-width:375px){.h2,h2{font-size:1.3rem}}.h3,h3{font-size:calc(1.1rem + .6vw)}@media (min-width:375px){.h3,h3{font-size:1.1rem}}.h4,h4{font-size:calc(1rem + .3vw)}@media (min-width:375px){.h4,h4{font-size:1rem}}.h5,h5{font-size:0.95rem}.h6,h6{font-size:0.9rem}


Offline xplosion

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4019
  • Sesso: Maschio
    • Mostra profilo
Primo, non hai detto se hai inserito il codice che te l'ho scritto sopra.
Secondo, se non fornisci un URL del tuo sito è difficile che qualcuno ti possa aiutare.

P.S. Non devi toccare nessun altro file css , tutte le tue modifche/personalizzazioni devono essere fatte solamente in user.css !
Ciao,

Offline idroweb

  • Esploratore
  • **
  • Post: 168
  • Sesso: Maschio
    • Mostra profilo
Ciao, no non funzionava il codice con tutte le risoluzioni, sul primo post l'avevo scritto che stavo usando user.css.

Ora invece pare vada con tutte le risoluzioni anche Slimjet, probabilmente era una questione di cache, inoltre questa mattina ma dopo le verifiche ho aggiornato alla versione 8 il php visto l'avviso apparso.

Il sito è questo http://www.idraulicogastorino.it/

ps. le notifiche dal forum continuo a non riceverle, boh
« Ultima modifica: 28 Ago 2022, 13:03:44 da idroweb »

Offline idroweb

  • Esploratore
  • **
  • Post: 168
  • Sesso: Maschio
    • Mostra profilo
Ora come scrivevo all'inizio, l'altra modifica che vorrei fare è centrare le voci del menu top al container ma con Joomla! 4 ma non ho trovato ancora da quale file php, trovato invece come aumentare i caratteri del titoli menu top.
« Ultima modifica: 28 Ago 2022, 13:03:17 da idroweb »

Offline idroweb

  • Esploratore
  • **
  • Post: 168
  • Sesso: Maschio
    • Mostra profilo
Ok grazie, anche stavolta a forza di provare ci sono riuscito.

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21430
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
caro idroweb, ma secondo te questa discussione potrà mai essere di aiuto a qualcun'altro che vorrà avere il menù centrato?

Io dico di no.

Se capisci perchè esistono i forum e se capisci come funzionano avrai certamente capito di cosa sto parlando.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline idroweb

  • Esploratore
  • **
  • Post: 168
  • Sesso: Maschio
    • Mostra profilo
caro idroweb, ma secondo te questa discussione potrà mai essere di aiuto a qualcun'altro che vorrà avere il menù centrato?

Io dico di no.

Se capisci perchè esistono i forum e se capisci come funzionano avrai certamente capito di cosa sto parlando.


Ma, per me si, con ciò che ho postato ho risolto, nell'attesa di eventuale intervento, non vedo cosa ci sia di male, inoltre il post del menù centrato è un altro, risolto anche quello postando la soluzione prendendo spunto dal gentile utente.

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21430
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Si ho sbagliato l'argomento, ma la sostanza non cambia.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 31893
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo

Ma, per me si, con ciò che ho postato ho risolto,
E qua sta il punto, il forum non serve per far risolvere al webmaster di turno, ma per condividere le soluzioni con tutti, non solo a chi pone il problema, altrimenti non saremmo un forum ma un help desk. Tutto qui il succo e quello che voleva farti capire Giusebos.Spero ti serva in futuro e ti adegui a postare una sola richiesta per topic. Grazie.

Offline idroweb

  • Esploratore
  • **
  • Post: 168
  • Sesso: Maschio
    • Mostra profilo
E qua sta il punto, il forum non serve per far risolvere al webmaster di turno, ma per condividere le soluzioni con tutti, non solo a chi pone il problema, altrimenti non saremmo un forum ma un help desk. Tutto qui il succo e quello che voleva farti capire Giusebos.Spero ti serva in futuro e ti adegui a postare una sola richiesta per topic. Grazie.
Scusate ma i codici risolutivi, prendendo spunto dagli interventi, li ho postati ed hanno funzionato se leggete bene per cui mi pare siano soluzioni che possono servire ad altri utenti, altrimenti non li inserivo neppure se fosse come dite voi, di forum tra i più disparati ne seguo da oltre 20 anni e questo dal mio primo sito in Joomla! 1.012 e solo ora ricevo bacchettate.


D'accordo che potevo postare da subito 2/3 post separati, l'ho fatto poco dopo.


Inoltre mi si contestava il lessico tecnico ma ho già scritto.


Grazie.

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 31893
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Beh però uno la soluzione la deve cercare per trovarla, perciò è importante il titolo e separare le discussioni. Non sono bacchettate ma delucidazioni.

 

Host

Torna su