変更を加えてしまい、元に戻せません

サポート
1

CSSコードをいじって、どうやら元に戻せない変更を加えてしまいました。最悪の事態を恐れていますが、CSSについては完全な初心者で、そもそもいじるべきではなかったと後悔しています。現在、私のサイトは次のようになっています。

1280×960 63.4 KB

この画像に追加したぼかしは、バックアップファイル名の上だけです。残りはウェブページの実際の表示状態です。

1000×732 45.9 KB

これと同じで、以前テーマのCSSを編集するために使っていた「CSSを編集」ボタンも消えてしまいました。 essentially 行き詰まってしまい、どなたか解決策をご教示いただけないでしょうか。

幸いにも、私は完全に頭がおかしいわけではなく、編集する前に古いバージョンのCSSをバックアップしておきました。これが、致命的な変更を加える前の状態です。

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

// ボタンを浮き上がらせ、角を丸める
.btn {
  border-radius: 2px;
  @include boxShadow;
}

// 一部のボタンから影を削除
.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;
}


上記のコードから、以下の部分を削除しました

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


そして、以下のコードを追加しました

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

愚かにも、すべてが完璧に準備できていると勘違いして保存ボタンをクリックしてしまいました。どうかご助力をお願いします。

2

テーマを一時的に無効化するにはセーフモードを使用し、その後必要な変更を加えることができます：

3

あるいは、ブラウザの開発者ツールを使用して、HTML コード内のボタンを見つけ、ボタンを非表示にする CSS ルールを一時的に無効化することもできます。
ただし、david の解決策の方が簡単で信頼性が高いようです。

4

こんにちは、デビッドさん。
どうやら、グローバルレベルではどのチェックボックスも選択できないようです。
最も簡単な方法は、1 日前のバックアップに手動でロールバックを適用することかもしれません。

1958×1009 30.5 KB

6

サイトホームページで URL の末尾に ?safe_mode=no_custom%2Cno_plugins%2Conly_official を追加し、Enter キーを押してください。

7

友達よ、あなたは命を救う人です。あなたとこのスレッドの皆さん、本当にありがとうございます。

8

うーん、たぶんこの問題を防ぐために、/safe-mode ページからテーマの CSS を削除すべきだと思います。どう思いますか、@Falco？

9

推奨された回避策ではまだ動作しましたが、セーフモードでもチェックボックスにチェックを入れられないのを見て、一瞬心臓が止まるかと思いました。もう二度とCSSいじりはしませんが、もしやるなら、まずクローンを取って別環境でテストします。

私のような愚かな間違いで、皆さんの開発チームがセーフモードをさらに安全にするよう駆り立てられたと聞けば、むしろ誇りに思います。

余談ですが、これまで使った中で間違いなく最高のフォーラムソフトウェアです。これまでのご尽力とサポートに感謝します！

10

おや、あきらめないでください！私たちは、テーマの実験をできるだけ安全に行えるよう努めています。

新しいテーマコンポーネントを作成し、「プレビュー」ボタンを使って、サイト全体のデフォルトに変更せずに試すことができます。あるいは、テーマクリエーター を使って、完全にサンドボックス化されたサイトでテーマを実験することもできます。

より安全なセーフモードというアイデアは素晴らしいですね。こちらの PR をご覧ください：

11

GitHubにはあまり慣れていないのですが、この更新をgit経由で自分のサイトにプッシュすることは可能でしょうか？

新しいテーマコンポーネントを作成し、「プレビュー」ボタンを使って、サイトのデフォルトに変更せずに試すことができます。または、Theme Creatorを使って、完全にサンドボックス化されたサイトでテーマを実験することも可能です。

もしかすると、これをより詳しく説明したFAQ記事を見逃しているのかもしれませんが、あなたが言及しているテーマコンテナは、実際のテーマというよりは、テーマ用のプラグインのような機能のように思えます。私の推測は間違っていますか？いくつかの公開プラグインのインストール手順を見ると、git URLをテーマコンポーネントインストーラーに直接貼り付けるのではなく、新しいテーマコンテナを作成して、そのコンテナ経由でコンポーネントをインストールするよう指示されています。私は正しく理解しているつもりですが、もし異なる点があれば教えていただけると助かります。

12

簡単ではありません。数週間以内に Discourse にマージされ、その後、サイトを更新できるようになります。それまでの間、@Falco が共有したソリューションがあります。

申し訳ありません。コンポーネントについて言及したことで混乱を招いたかもしれません。通常のテーマでも同じことができます。新しいテーマを作成し、プレビューリンクを使用してください。

まだお読みでない場合は、ここから始めるのが良いでしょう：

13

CSSを調整する必要がある際、Discourseであれ他のサイトであれ、私はいつも（実際には常に）このライブCSSエディターブラウザ拡張機能を使って新しいCSSルールを試しています：

（SASS構文もサポートしています）

Discourseでは、カスタマイズパネルにCSSを追加して「保存」をクリックし、別のDiscourseウィンドウで結果を確認する必要がなく、現在のウィンドウでリアルタイムに試すことができます。

もしこのエディターでミスをしてしまった場合、例えば：

image
image558×413 14.2 KB

(なんて不器用な私！)

ページ全体の要素が隠れてしまい、CSSエディター自体も表示されなくなることがあります。おっと！

このような場合は、拡張機能のアイコンをクリックするだけです：

image
image141×175 7.66 KB

そうすると、ルールが無効化された状態でエディターが再度表示されます（この状態は切り替え可能です）：

image
image562×412 14.2 KB

Discourse内で直接CSSを編集することに不安を感じる場合は、実際にDiscourseに記述する前に試すためのこの代替案をお勧めします。

14

おっと、それは本当に役立ちますね。どうもありがとうございます！