Ho apportato delle modifiche che non riesco a annullare

Stavo dando un’occhiata al mio codice CSS e ho apportato delle modifiche che sembrano irreversibili. Ho paura del peggio, ma sono un principiante assoluto quando si tratta di CSS e in realtà non avrei dovuto smanettare, per cominciare. Ecco come appare attualmente il mio sito.

L’unico effetto sfocato che ho aggiunto a questa immagine è sui nomi dei file di backup. Il resto è esattamente come viene visualizzata la pagina web.

Stessa cosa qui: puoi notare che il pulsante “Modifica CSS”, dove prima andavo per modificare il CSS del tema, non c’è più. In pratica sono bloccato e chiedo gentilmente se qualcuno può aiutarmi a trovare una soluzione.

Fortunatamente, non sono completamente privo di cervello e ho effettivamente fatto un backup di una versione precedente del CSS prima di modificarlo. Ecco com’era prima del colpo di grazia che mi ha dato.

    // usa il font Roboto
html {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.background {
  
  position: absolute;
  width: 100%;
  height: 100%;
}


body input,
body button,
body select,
html { 
  background: url(linktoimage) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


body textarea {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
}

@mixin boxShadow {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
}

@mixin buttonShadow {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

// alza e arrotonda i pulsanti
.btn {
  border-radius: 2px;
  @include boxShadow;
}

// rimuovi l'ombra da alcuni pulsanti
.d-editor-button-bar .btn,
.bulk-select-all,
.bulk-clear-all,
.period-chooser-header,
.topic-map .btn.no-text,
.badge-section .btn,
#revision .btn,
#new-account-link,
#login-link {
  border-radius: 0;
  box-shadow: none;
}


Dal codice sopra elencato, ho rimosso

html { 
  background: url(linktoimage) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


e ho aggiunto

.page-bg {
  background: url('linktoimage');
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

Assumendo stupidamente di aver messo tutto a posto, ho cliccato su salva. Aiutatemi per favore.

Puoi utilizzare la modalità sicura per disabilitare temporaneamente il tema e apportare le modifiche necessarie:

In alternativa, puoi utilizzare gli strumenti di sviluppo del browser per individuare il pulsante nel codice HTML e disabilitare temporaneamente le regole CSS che lo rendono invisibile. Tuttavia, la soluzione di David sembra più semplice e affidabile.

Ciao David, sembra che a livello globale non riesca a spuntare nessuna casella. Forse il modo più semplice è eseguire manualmente un rollback sul backup di un giorno fa?

Aggiungi ?safe_mode=no_custom%2Cno_plugins%2Conly_official alla fine dell’URL mentre ti trovi sulla homepage del tuo sito e premi Invio.

Amico mio, sei un salvatore di vite. Grazie a te e a tutti gli altri in questa discussione. Mille grazie.

Hmm, penso che dovremmo probabilmente rimuovere il CSS del tema dalla pagina /safe-mode, in modo che questo non possa accadere… che ne pensi @Falco?

Ha funzionato comunque con l’ workaround suggerito, ma ho avuto un leggero infarto quando ho visto che nemmeno in modalità provvisoria riuscivo a spuntare nessuna casella. Non toccherò mai più il CSS, ma se lo farò, lo clonerò e lo testerò prima in un ambiente separato.

Sarei orgoglioso di essere l’idiota che vi ha spinto a lavorare sulla scheda di sviluppo per rendere la vostra modalità provvisoria ancora più sicura da errori stupidi come il mio.

A proposito, questo è senza dubbio il software per forum migliore che abbia mai usato. Grazie per tutto il vostro lavoro e supporto!

Oh no, non arrenderti! Cerchiamo di rendere il più sicuro possibile l’esperimento con i temi.

Ricorda che puoi creare un nuovo componente tema e utilizzare il pulsante “anteprima” per provarlo senza impostarlo come predefinito per il sito. In alternativa, puoi usare Theme Creator per sperimentare con i temi su un sito completamente isolato.

Mi piace l’idea di una modalità sicura più sicura: ecco una PR:

Quindi non sono completamente familiare con GitHub: posso caricare questo aggiornamento sul mio sito tramite git?

Ricorda che puoi creare un nuovo componente tema e utilizzare il pulsante “Anteprima” per provarlo senza impostarlo come tema predefinito del sito. In alternativa, puoi usare Theme Creator per sperimentare con i temi su un sito completamente isolato in sandbox.

Non so se sto trascurando un articolo delle FAQ che spiegava meglio la questione, ma i contenitori tema che hai menzionato sembrano, per funzione, più simili a plugin per i temi che a veri e propri temi stessi… Ho sbagliato a fare questa supposizione? Ho notato nelle istruzioni di installazione di alcuni plugin pubblici che si deve creare un nuovo contenitore tema e installare alcuni componenti tramite il nuovo contenitore, invece di incollare semplicemente l’URL git nell’installer del componente tema. Penso di aver capito correttamente, ma se potessi farmi sapere il contrario, sarebbe utile.

Non facilmente. Lo mergeremo in Discourse entro le prossime settimane, e a quel punto potrai aggiornare il tuo sito. Nel frattempo, abbiamo la soluzione che @Falco ha condiviso.

Mi scuso, probabilmente ho creato confusione menzionando i componenti. Puoi fare la stessa cosa con i temi normali: creane uno nuovo e usa il link di anteprima.

Se non l’hai già letto, questo è un ottimo punto di partenza:

Quando devo apportare modifiche al CSS, sia su Discourse che su qualsiasi altro sito, spesso (anzi, sempre) provo nuove regole CSS utilizzando un’estensione del browser per l’editing CSS in tempo reale, questa qui:

(nota che supporta la sintassi SASS)

Per Discourse, mi permette di provare le modifiche in tempo reale nella finestra corrente, senza dover aggiungere il mio CSS nel pannello di personalizzazione, cliccare su “Salva” e poi guardare un’altra finestra di Discourse per vedere come va.

Se commetti un errore in questo editor, ad esempio:


(quanto sono goffa!)

L’editor nasconderà tutti gli elementi della pagina, compreso l’editor CSS stesso. Ops!

Se succede, basta cliccare sull’icona dell’estensione:

E l’editor verrà mostrato di nuovo con le regole disabilitate (questa opzione è attivabile/disattivabile):

Se ti senti a disagio nel modificare direttamente il CSS su Discourse, ti suggerisco questa alternativa per provare le modifiche prima di scriverle effettivamente su Discourse.

Wow, è davvero utilissimo. Grazie mille!