GDRCD 5.6.0.5 - CSS Modali + problema di usabilità

GDRCD 5.6.0.5 - CSS Modali + problema di usabilità postato il 21/01/2023 15:59:22 nel forum programmazione, gdrcd, open source, hosting e modificato da jan90 il 21/01/2023 21:40:27

Non so se è OK usare questo spazio per trasformare il dubbio che avevo in risposta da lasciare ai posteri, ma me la tento comunque!

Testando GDRCD 5.6.0.5 (un gioiello 😍), mi sono imbattuta in un paio di "guai" in merito alle modali. Di funzionare funzionavano, di aprire si aprivano, ma...
A) Non riuscivo ad agire sul CSS per uniformarle alla grafica della land;
B) Quando aprivo una modale, il resto della land restava bloccato, niente era cliccabile.
Così, mi sono messa ad andare a ritroso e studiare i punti e le pagine del codice in cui sapevo di dover intervenire, e ho risolto.
In caso qualcuno dovesse trovarsi di fronte alle stesse difficoltà, lascio i passaggi di seguito.

- PASSAGGI -

1. In ../includes ho creato un nuovo foglio chiamandolo jquery-ui.min.css

2. Dentro ho incollato ciò che si trova a questo link: https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css

3. Usando lo strumento di editing di Altervista "Text editor", ho cercato (ctrl+f) la voce: .ui-widget-overlay. Una volta individuata, ho modificato {position:fixed;...} con {position:relative;...}. «« Questo sblocca l'overlay che impediva il funzionamento del resto della land se la modale viene aperta

4. Con lo stesso trucchetto, ho cercato anche le voci per sostituire i colori standard. È un lavoro un po' lungo ma le voci essenziali da modificare dovrebbero essere: .ui-widget .ui-widget-content / .ui-widget-content / .ui-widget-header / .ui-widget-content a «« Così è possibile cambiare i colori del bordo, dell'header e anche del pulsante di chiusura

5. Fatto questo, è necessario dire al codice di basarsi sul nuovo CSS e non su quello standard ed esterno. Perciò, andando in header.inc.php, ho sostituito questa stringa: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> con questa: <link rel="stylesheet" href="includes/jquery-ui.min.css" />

Infine, con il solito giro di pulizia cache, in teoria we're done! 🖖

New World Order ↗
Diventa un agente del Nuovo Ordine Mondiale e affronta le forze occulte che minacciano il pianeta Terra in questo GDR Urban Fantasy per Mobile!

quota

Pagine → 1

backwaters

SCRIVI

23/01/2023 13:29:16 e modificato da backwaters il 23/01/2023 13:32:38

jan90 ha scritto: 3. Usando lo strumento di editing di Altervista "Text editor", ho cercato (ctrl+f) la voce: .ui-widget-overlay. Una volta individuata, ho modificato {position:fixed;...} con {position:relative;...}. «« Questo sblocca l'overlay che impediva il funzionamento del resto della land se la modale viene aperta

Intanto grazie per i passaggi, avevo lo stesso problema con l’overlay e non sapevo di preciso dove mettere le mani.
Aggiungo - per chi magari riscontra lo stesso problema - che con questo sistema mi ha sbloccato il menu superiore, ma i pulsanti del menu bottom rimanevano non cliccabili (uso il layout top-bottom).
Con un po’ di prove alla fine ho risolto modificando width e height di questo css:

.ui-widget-overlay{position:relative;top:0;left:0;width:100%;height:100%}

in:

.ui-widget-overlay{position:relative;top:0;left:0;width:100vh;height:100vh}