تفعيل CSS/HTML مخصص

[lyseoy]

لقد أضفت بعض CSS و HTML مخصصين. قمت بمعاينة النتيجة، وكل شيء يبدو رائعًا.

الآن أريد تأكيد هذه التغييرات، لكن كيف؟ لا أرى أي أوامر لذلك، وحاولت إعادة بناء تطبيق Discourse، لكن لا يحدث أي شيء.

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

[Bcat]

يبدو غير ذي صلة، لكنني لا أفهم حقًا.

[Vaping_Community]

@lyseoy

لقد أضفت بعض CSS و HTML المخصص.

أين؟ في السمة المخصصة أم السمة الافتراضية؟
CSS المشترك / CSS سطح المكتب / CSS الجوال؟
سيكون من المفيد الحصول على مزيد من التفاصيل حول ما قمت به.

عادةً ما تقوم فقط باختيار سمة /admin/customize/themes وتقوم بما يلي:

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

[lyseoy]

ما قمت به. في الفيديو. باستثناء أنني أستطيع رؤية التغييرات فقط عند الضغط على زر المعاينة.

[Vaping_Community]

هل قمت باختيار السمة كسمة افتراضية نشطة؟ هل ترى علامة الصح الخضراء؟

[lyseoy]

نعم. لقد قمت بتعديل سمة الإضاءة القياسية، وهي نشطة وتُعد الافتراضية.

[Vaping_Community]

حسناً، هل يمكنك سرد التغييرات التي قمت بها من فضلك

سيكون من المفيد أيضاً تضمين رابط للموقع الإلكتروني

[lyseoy]

CSS:

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400, 400i, 700");
    .docked #main-outlet {
    margin-top: 0;
}
.docked nav#bar {
    display: none;
}
nav#bar {
    font-family: 'Open Sans',  sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
nav#bar ul {
    display: inline-flex;
    list-style-type: none;
    margin: 0 0 0 25px;
    align-items: center;
}
nav#bar ul li {
    margin-left: 20px;
}
@media (max-width: 650px) {
    nav#bar {
    flex-wrap: wrap;
    justify-content: center;
}
nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%}
nav#bar #logo img {
    width: 120px;
}
nav#bar ul li {
    margin-left: 8px;
}
nav#bar ul li a {
    font-size: 14px;
}
nav#bar ul li a.www-btn {
    padding: 3px 8px 5px;
}
}
nav#bar li a {
    text-decoration: none;
    color: #333;
}
nav#bar li a:hover {
    border-bottom: 5px solid;
}
nav#bar li:nth-of-type(1) a:hover {
    border-color: #D13239;
}
nav#bar li:nth-of-type(2) a:hover {
    border-color: #f15c22;
}
nav#bar li:nth-of-type(3) a:hover {
    border-color: #F2E88F;
}
nav#bar li:nth-of-type(4) a:hover {
    border-color: #00953A;
}
nav#bar li:nth-of-type(5) a {
    font-weight: bold;
}
nav#bar li:nth-of-type(5) a:hover {
    border-color: #14A0F4;
}
nav#bar img {
    width: 150px;
    height: auto;
    max-height: 40px;
}
nav#bar .www-btn {
    border: none;
    border-radius: 100px;
    background: #13a0f5;
    color: #fff;
    padding: 5px 20px 7px;
}
nav#bar .www-btn.big {
    font-size: 1.5rem;
    padding: 7px 30px 10px 30px;
}
nav#bar .www-btn:hover {
    background: #0a5783;
}
nav#bar .www-btn:active {
    background: #08476b;
    box-shadow: none;
}
nav#bar a.www-btn {
    text-decoration: none;
    color: #fff !important;
}
.d-header {
    background: linear-gradient(-90deg,  #F2E88F,  #a3e6ff);
    background-size: 100% 100%;
    background-repeat: repeat-x;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.15);
}
.d-header .icons .icon {
    color: #555;
}

سأقوم بنشر محتوى الرأس (Header) بعد قليل. فالبوابة تستمر في عرض كود HTML عند لصقه…

[Vaping_Community]

@lyseoy

nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%}

هذا غير صحيح، يجب أن يكون

nav#bar #logo {
    display: flex;
    justify-content: center;
    flex-basis: 100%;
}

[lyseoy]

هذا كل شيء! لقد لاحظت ذلك ببراعة، لديك عين حادة!

من المضحك أن المعاينة لم تعترض على خطأ بناء الجملة هذا.

[Vaping_Community]

يسعدنا أن الأمر يعمل الآن

• أي أخطاء في CSS ستجعل هذا CSS غير صالح.
• لم أستخدم المعاينة من قبل، لذا لا يمكنني التعليق على ذلك.
• أعتقد أنه كان هناك إشعار خطأ على الصفحة

يا لها من مناسبة سعيدة، كل عام وأنت بخير @tshenry :tada! استمتع بيومك