أجريت بعض التغييرات التي لا يمكنني التراجع عنها

كنت أتصفح كود CSS الخاص بي وقمت ببعض التغييرات التي تبدو غير قابلة للعكس. أخشى الأسوأ، لكنني مبتدئ تمامًا في مجال CSS ولم يكن ينبغي لي العبث به من الأساس. هذا هو شكل موقعي حاليًا:


التأثير الضبابي الوحيد الذي أضفته إلى هذه الصورة هو على أسماء ملفات النسخ الاحتياطية. أما الباقي فهو كما يظهر على صفحة الويب.

نفس الأمر ينطبق على هذه الصورة، حيث تلاحظ أن زر “تعديل CSS” الذي كنت أذهب إليه سابقًا لتعديل ملف CSS الخاص بالقالب لم يعد موجودًا. باختصار، أنا عالق الآن، وأرجو من أحدكم مساعدتي في إيجاد حل.

لحسن الحظ، لست غبيًا تمامًا، فقد قمت بنسخ احتياطي لإصدار قديم من ملف 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;
}

بغبغة، افترضت أن كل شيء تحت السيطرة، فقررت الحفظ. أرجو مساعدتي.

يمكنك استخدام الوضع الآمن لتعطيل المظهر مؤقتًا، ثم إجراء التغييرات التي تحتاجها:

بدلاً من ذلك، يمكنك استخدام أدوات المطورين في المتصفح للعثور على الزر في كود HTML وتعطيل قواعد CSS التي تجعل الزر غير مرئي مؤقتًا. لكن حل ديفيد يبدو أسهل وأكثر موثوقية.

مرحبًا ديفيد، يبدو أنه لا يمكنني تحديد أي من المربعات على مستوى العالم. ربما يكون أسهل طريقة هي دفع التراجع يدويًا إلى نسخة احتياطية تعود ليوم واحد؟

أضف ?safe_mode=no_custom%2Cno_plugins%2Conly_official إلى نهاية الرابط وأنت في الصفحة الرئيسية لموقعك، ثم اضغط على Enter.

يا صديقي، أنت منقذ للأرواح. أنت وكل شخص آخر في هذا الموضوع، شكراً لكم. شكراً جزيلاً.

حسناً، أعتقد أنه يجب علينا على الأرجح إزالة CSS الخاص بالقالب من صفحة /safe-mode، حتى لا يحدث هذا… ما رأيك @Falco؟

ما زال يعمل مع الحل البديل المقترح، لكنني شعرت بنوبة خفيفة من الذعر عندما رأيت أنني لا أستطيع تحديد أي مربع حتى في الوضع الآمن. لن ألمس CSS مرة أخرى، ولكن إذا فعلت، فسأقوم بنسخه واختباره أولاً في بيئة منفصلة.

سأكون فخورًا بأن أكون الشخص الذي دفعكم إلى لوحة المطورين لجعل وضعكم الآمن أكثر أمانًا من الأخطاء السخيفة مثل خطأي.

بالمناسبة، هذا هو أفضل برنامج منتدى استخدمته على الإطلاق. شكرًا لكم على كل جهدكم ودعمكم!

أوه لا - من فضلك لا تستسلم! نحن نسعى جاهدون لجعل التجربة آمنة قدر الإمكان للأشخاص الذين يجربون القوالب.

تذكر أنه يمكنك إنشاء مكون قالب جديد واستخدام زر “معاينة” لتجربته دون جعله الافتراضي للموقع. أو يمكنك استخدام منشئ القوالب لتجربة القوالب على موقع معزول تمامًا.

أعجبني فكرة وجود وضع آمن أكثر أمانًا - إليك طلب سحب:

إذًا، أنا لستُ على دراية كافية بـ GitHub، هل يمكنني دفع هذا التحديث إلى موقعي عبر git؟

تذكّر أنه يمكنك إنشاء عنصر واجهة مستخدم (theme component) جديد واستخدام زر "المعاينة" لتجربته دون جعله الافتراضي للموقع. وبدلاً من ذلك، يمكنك استخدام منشئ السمات (Theme Creator) لتجربة السمات على موقع معزول تمامًا.

لا أعرف ما إذا كنتُ أتجاوز مقالًا في الأسئلة الشائعة يشرح ذلك بشكل أفضل، لكن حاويات السمات التي ذكرتها تبدو من حيث الوظيفة أشبه بملحقات للسمات أكثر من كونها سمات بحد ذاتها… هل أنا مخطئ في هذا الافتراض؟ لقد رأيتُ في إرشادات تثبيت بعض الملحقات العامة أنه يجب عليك إنشاء حاوية سمة جديدة وتثبيت بعض العناصر عبر حاويتك الجديدة بدلًا من مجرد لصق عنوان URL الخاص بـ git في مثبت عنصر السمة. أعتقد أنني أتبع الأمور بشكل صحيح، ولكن إذا كان بإمكانك إخباري بغير ذلك، فسأقدر ذلك.

ليس بسهولة. سنقوم بدمجه في Discourse خلال الأسابيع القليلة القادمة، وعندها ستتمكن من تحديث موقعك. في غضون ذلك، لدينا الحل الذي شاركه @Falco.

آسف، ربما خلطت الأمور بذكر المكونات. يمكنك فعل الشيء نفسه مع السمات العادية: أنشئ سمة جديدة واستخدم رابط المعاينة.

إذا لم تكن قد قرأته بعد، فهذا مكان جيد للبدء:

عندما أحتاج إلى تعديل CSS، سواءً كان ذلك في Discourse أو أي موقع آخر، غالبًا ما (بل دائمًا في الواقع) أجرب قواعد CSS جديدة باستخدام امتداد متصفح محرر CSS المباشر، وهو هذا:

(لاحظ أنه يدعم بناء جملة SASS)

بالنسبة لـ Discourse، يتيح لي تجربة الأمور في الوقت الفعلي على النافذة الحالية دون الحاجة لإضافة CSS الخاص بي في لوحة التخصيص، ثم النقر على “حفظ”، ثم الانتقال إلى نافذة Discourse أخرى لرؤية النتيجة.

إذا ارتكبت خطأً في هذا المحرر، على سبيل المثال:


(كم أنا غير ماهر!)

فسيختفي فعليًا جميع عناصر الصفحة بما في ذلك محرر CSS. أوه!

إذا حدث ذلك، ما عليك سوى النقر على أيقونة الامتداد:

وسيعود المحرر للظهور مع تعطيل القواعد (هذه الميزة قابلة للتفعيل والإلغاء):

إذا شعرت بعدم الارتياح عند تعديل CSS مباشرةً في Discourse، فإنني أقترح هذه البديل لتجربة الأمور قبل كتابتها فعليًا في Discourse.

واو، هذا مفيد جدًا. شكرًا جزيلًا لك!