Fiz algumas alterações que não consigo reverter

Estava explorando meu código CSS e fiz algumas alterações que parecem irreversíveis. Estou temendo o pior, mas sou um total iniciante em CSS e, na verdade, não deveria ter mexido nisso desde o início. É assim que meu site está ficando agora:

A única parte embaçada que adicionei nesta imagem é sobre os nomes dos arquivos de backup. O restante é exatamente como a página da web está sendo exibida.

O mesmo acontece com esta imagem: você pode ver que o botão “Editar CSS”, onde eu costumava acessar para editar o CSS do tema, não está mais lá. Basicamente, estou preso e estou pedindo gentilmente que alguém me ajude a encontrar uma solução.

Por sorte, não estou totalmente sem noção e fiz backup de uma versão antiga do CSS antes de editar. É assim que tudo parecia antes do golpe fatal que dei:

    //use a fonte 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 e arredondar botões
.btn {
  border-radius: 2px;
  @include boxShadow;
}

//remover sombra de alguns botões
.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;
}


Do código listado acima, removi

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 adicionei

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

Imprudentemente, assumi que estava tudo certo e cliquei em salvar. Por favor, ajudem-me.

Você pode usar o modo de segurança para desativar temporariamente o tema e, em seguida, fazer as alterações necessárias:

Alternativamente, você pode usar as ferramentas de desenvolvedor do seu navegador para encontrar o botão no código HTML e desabilitar temporariamente as regras de CSS que tornam o botão invisível.
Mas a solução de David parece mais fácil e mais confiável.

Olá David, parece que globalmente não consigo marcar nenhuma das caixas. Talvez a maneira mais fácil seja fazer manualmente um rollback para o backup de um dia atrás?

Adicione ?safe_mode=no_custom%2Cno_plugins%2Conly_official ao final da URL enquanto estiver na página inicial do seu site e pressione Enter.

Meu amigo, você é um salvador de vidas. Você e todos os outros neste tópico, obrigado. Muito obrigado.

Hmm, acho que devemos provavelmente remover o CSS do tema da página /safe-mode, para que isso não aconteça… o que você acha, @Falco?

A solução alternativa sugerida ainda funcionou, mas quase tive um infarto ao ver que, mesmo no modo de segurança, não conseguia marcar nenhuma caixa. Nunca mais vou mexer no CSS, mas se eu o fizer, farei uma cópia e testarei primeiro em um ambiente separado.

Estaria orgulhoso de ser o idiota que levou vocês à prancheta de desenvolvimento para tornar o modo de segurança ainda mais seguro contra erros bobos como o meu.

Aliás, este é, sem dúvida, o melhor software de fórum que já usei. Obrigado por todo o trabalho e suporte!

Ah não — por favor, não desista! Tentamos tornar o mais seguro possível para que as pessoas experimentem temas.

Lembre-se de que você pode criar um componente de tema novo e usar o botão “pré-visualizar” para testá-lo sem torná-lo o padrão do site. Alternativamente, você pode usar o Criador de Temas para experimentar temas em um site totalmente isolado.

Gosto da ideia de um modo seguro mais seguro — aqui está um PR:

Então, não estou totalmente familiarizado com o GitHub. É possível fazer o push dessa atualização para o meu site via git?

Lembre-se de que você pode criar um componente de tema novo e usar o botão "visualizar" para testá-lo sem torná-lo o padrão do site. Alternativamente, você pode usar o Criador de Temas para experimentar temas em um site totalmente isolado (sandbox).

Não sei se estou ignorando um artigo de FAQ que explicava isso melhor, mas os contêineres de tema que você mencionou parecem funcionar mais como plugins para temas do que como temas em si… Estou errado ao fazer essa suposição? Vi, nas instruções de instalação de alguns plugins públicos, que você deve criar um novo contêiner de tema e instalar alguns componentes por meio desse novo contêiner, em vez de simplesmente colar a URL do git no instalador de componentes de tema. Acredito que estou seguindo corretamente, mas, se puder me confirmar o contrário, seria muito útil.

Não facilmente. Vamos mesclá-la ao Discourse nas próximas semanas, e então você poderá atualizar seu site. Enquanto isso, temos a solução que @Falco compartilhou.

Desculpe, provavelmente causei confusão ao mencionar componentes. Você pode fazer o mesmo com temas regulares: crie um novo e use o link de pré-visualização.

Se você ainda não leu, este é um bom lugar para começar:

Quando preciso ajustar CSS, seja no Discourse ou em qualquer outro site, frequentemente (na verdade, sempre) tento novas regras de CSS usando uma extensão de navegador para editor de CSS em tempo real, esta aqui:

(observe que ela suporta a sintaxe SASS)

Para o Discourse, ela me permite testar coisas em tempo real na janela atual, sem precisar adicionar meu CSS no painel de personalização, clicar em “Salvar” e depois olhar em outra janela do Discourse para ver como ficou.

Se você cometer um erro neste editor, por exemplo:


(que desastrado eu sou!)

Ele realmente ocultará todos os elementos da página, inclusive o editor de CSS. Ops!

Se isso acontecer, basta clicar no ícone da extensão:

E o editor aparecerá novamente com as regras desativadas (isso pode ser alternado):

Se você se sentir desconfortável editando seu CSS diretamente no Discourse, sugiro essa alternativa para testar as coisas antes de realmente escrevê-las no Discourse.

Uau, isso é super útil. Muito obrigado!