He realizado algunos cambios que no puedo revertir

Estaba explorando mi código CSS y realicé algunos cambios que parecen irreversibles. Me temo lo peor, pero soy un completo novato en CSS y en realidad no debería haberme metido en esto desde el principio. Así es como se ve actualmente en mi sitio:

El único desenfoque que añadí a esta imagen es sobre los nombres de archivo de las copias de seguridad. El resto es exactamente como se muestra la página web.

Lo mismo ocurre con esto: puedes ver que el botón “Editar CSS”, al que solía acceder para modificar el CSS del tema, ya no está. En esencia, estoy atrapado y solicito amablemente que alguien me ayude a encontrar una solución.

Afortunadamente, no estoy totalmente desorientado y de hecho hice una copia de seguridad de una versión anterior del CSS antes de editarlo. Así es como se veía antes de mi golpe fatal:

    //usar la fuente 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);
}

//elevar y redondear botones
.btn {
  border-radius: 2px;
  @include boxShadow;
}

//eliminar sombra de algunos botones
.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;
}


Del código anterior, eliminé

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


y añadí

.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;
}

Foolishly asumiendo que tenía todo en orden, hice clic en guardar. Por favor, ayúdenme.

Puedes usar el modo seguro para desactivar temporalmente el tema y luego realizar los cambios que necesites:

Alternativamente, puedes usar las herramientas de desarrollador de tu navegador para encontrar el botón en el código HTML y deshabilitar temporalmente las reglas CSS que hacen que el botón sea invisible. Pero la solución de David parece más fácil y más confiable.

Hola David, parece que a nivel global no puedo marcar ninguna casilla. Quizás la forma más sencilla sea realizar manualmente una reversión a la copia de seguridad de hace un día.

Agrega ?safe_mode=no_custom%2Cno_plugins%2Conly_official al final de la URL mientras estás en la página principal de tu sitio y presiona Enter.

Amigo, eres un salvador de vidas. Tú y todos los demás en este hilo, gracias. Muchísimas gracias.

Hmm, creo que probablemente deberíamos eliminar el CSS del tema de la página /safe-mode, para que esto no pueda volver a ocurrir… ¿qué opinas, @Falco?

Aún funcionó con la solución propuesta, pero me dio un pequeño infarto al ver que, incluso en modo seguro, no podía marcar ninguna casilla. Nunca más volveré a tocar el CSS, pero si lo hago, haré una copia y la probaré primero en un entorno separado.

Me sentiría orgulloso de ser el idiota que os impulsó a llevar al equipo de desarrollo a hacer que su modo seguro fuera aún más seguro frente a errores tontos como el mío.

Por cierto, este es, sin duda, el mejor software de foro que he usado nunca. ¡Gracias por todo vuestro trabajo y apoyo!

¡Oh no, por favor no te rindas! Intentamos que sea lo más seguro posible para que la gente experimente con los temas.

Recuerda que puedes crear un componente de tema nuevo y usar el botón “vista previa” para probarlo sin establecerlo como el tema predeterminado del sitio. Alternativamente, puedes usar Theme Creator para experimentar con temas en un sitio completamente aislado.

Me gusta la idea de un modo seguro más seguro; aquí hay una PR:

Así que no estoy totalmente familiarizado con GitHub. ¿Puedo subir esta actualización a mi sitio mediante git?

Recuerda que puedes crear un componente de tema nuevo y usar el botón «Vista previa» para probarlo sin establecerlo como el tema predeterminado del sitio. Alternativamente, puedes usar el Creador de Temas para experimentar con temas en un sitio completamente aislado (sandbox).

No sé si estoy pasando por alto un artículo de preguntas frecuentes que explicara esto mejor, pero los contenedores de tema que mencionas parecen funcionar más como complementos para temas que como temas en sí mismos… ¿Estoy equivocado al asumir eso? Vi en las instrucciones de instalación de varios complementos públicos que debes crear un nuevo contenedor de tema e instalar algunos componentes a través de tu nuevo contenedor, en lugar de simplemente pegar la URL de git en el instalador de componentes de tema. Creo que estoy siguiendo los pasos correctamente, pero si pudieras confirmarme lo contrario, me sería de gran ayuda.

No fácilmente. Lo integraremos en Discourse en las próximas semanas, y entonces podrás actualizar tu sitio. Mientras tanto, tenemos la solución que compartió @Falco.

Lo siento, probablemente confundí las cosas al mencionar componentes. Puedes hacer lo mismo con temas normales: crea uno nuevo y usa el enlace de vista previa.

Si aún no lo has leído, este es un buen lugar para empezar:

Cuando tengo que ajustar CSS, ya sea en Discourse o en cualquier otro sitio, a menudo (o siempre, en realidad) pruebo nuevas reglas CSS usando una extensión de navegador de editor de CSS en vivo, esta:

(ten en cuenta que admite la sintaxis SASS)

Para Discourse, me permite probar cosas en tiempo real en la ventana actual sin tener que agregar mi CSS en el panel de personalización, luego hacer clic en “Guardar” y luego mirar otra ventana de Discourse para ver cómo queda.

Si cometes un error en este editor, por ejemplo:


(¡qué torpe soy!)

Realmente ocultará todos los elementos de la página, incluido el editor de CSS. ¡Ups!

Si esto sucede, solo tienes que hacer clic en el icono de la extensión:

Y volverá a mostrar el editor con las reglas deshabilitadas (esto se puede alternar):

Si te sientes incómodo editando tu CSS directamente en Discourse, te sugiero esta alternativa para probar cosas antes de escribirlas realmente en Discourse.

¡Vaya, eso es súper útil! ¡Muchas gracias!