على غرار ديكورات عيد الميلاد، إليك موضوعًا لمشاركة ديكورات هالوين.
شبح مرعب
بالافتراض، تظهر احتمالية ظهور الشبح عند فتح محرر الرسائل بنسبة 1 من أصل 10.
- قم بتحميل الصورة التالية في سمة/مكونك وحدد اسم المتغير باسم ghost:
المصدر
-
أضف كود الجافاسكريبت التالي في علامة التبويب
</head>في سمةك أو مكونك:
يمكنك زيادة أو تقليل قيمة متغير rarity لجعل الشبح يظهر بشكل أقل أو أكثر تكرارًا.<script type="text/discourse-plugin" version="1.4.0"> const appEvents = api.container.lookup("service:app-events"); appEvents.on('composer:opened', () => { let rarity = 10 // الشبح لديه فرصة 1 من أصل [قيمة rarity] للظهور عند فتح محرر الرسائل if (Math.floor(Math.random() * rarity) == 0) { let halloweenGhost = document.createElement("img"); halloweenGhost.id = "halloween-ghost"; halloweenGhost.src = settings.theme_uploads.ghost; document.getElementsByTagName("body")[0].appendChild(halloweenGhost); setTimeout(function () { halloweenGhost.classList.add("ghost-show"); }, 0); setTimeout(function(){ halloweenGhost.remove(); }, 1000); } }); </script> -
أضف هذا الكود في علامة التبويب CSS:
#halloween-ghost { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.5); z-index: 10000; opacity: 1; pointer-events: none; transition: opacity .75s ease-in, top .75s ease, transform .75s cubic-bezier(0.175, 0.885, 0.32, 1.275); &.ghost-show { transform: translate(-50%, -60%) scale(.6); opacity: 0; } } @media all and (min-width: 1024px) { #halloween-ghost { transform: translate(-50%, -50%) scale(.75); &.ghost-show { transform: translate(-50%, -60%) scale(.9); } } }
يقفز الشبح على الهواتف المحمولة عند ظهور لوحة المفاتيح الافتراضية.
شبكات العناكب
ستتم إخفاء الشبكات على الشاشات الأصغر.
كيفية إضافة هذا إلى منتداك:
-
قم بإنشاء مكون سمة جديد أو عدّل سمتك، وقم بتحميل هذه الصورة، وحدد اسم المتغير باسم spiderweb:
المصدر -
أضف كود CSS التالي إلى سمةك أو مكونك:
@media all and (min-width: 1300px) { #main { &:before, &:after { content: ""; display: block; top: 4em; width: 300px; height: 300px; position: absolute; background: transparent url($spiderweb) top left no-repeat; background-size: contain; z-index: -1; } &:after { right: 0; transform: scaleX(-1); } } }
أيقونة جمجمة لمحدد الرموز التعبيرية
تلميح بسيط يستبدل أيقونة الابتسامة في محرر الرسائل بجمجمة 
-
أضف
skullفي إعداد مجموعة أيقونات SVG الخاص بك:
-
استبدل الأيقونة في علامة التبويب
</head>في سمةك/مكون السمة الخاص بك:<script type="text/discourse-plugin" version="0.8.23"> api.replaceIcon('far-smile', 'skull'); </script>
وبالتالي، يتم استبدال أيقونة الابتسامة في أماكن أخرى أيضًا، مثل لوحة التحكم. لكن هذا هالوين بعد كل شيء، أليس كذلك؟
يقطينة منقوشة (Jack-o’-lantern)
يقطينة منقوشة ثابتة وبسيطة تقع في الزاوية اليمنى السفلية من موقعك:
-
قم بإنشاء مكون سمة جديد أو عدّل سمتك، وقم بتحميل هذه الصورة، وحدد اسم المتغير باسم pumpkin:
المصدر -
أضف كود CSS التالي إلى سمةك أو مكونك:
body { background: transparent url($pumpkin) bottom right no-repeat; background-size: 10%; } @media all and (min-width: 1024px) { body { background-size: 7%; } }
غير متوافق مع المنتديات التي تستخدم بالفعل صورة خلفية في <body>.
شعار مرعب
إذا كان شعارك يستخدم نصًا عاديًا أو هو صورة نصية بسيطة، فيمكنك استبدال الخط بآخر أكثر انسجامًا مع جو هالوين.
→ 
الخط المستخدم: Creepster
- إذا كان شعارك يستخدم صورة، فقم بتعديل صورتك لتغيير الخط.
- إذا كان شعارك نصًا حقيقيًا، فاتبع هذا الدليل لتغيير الخط المستخدم في الشعار: Include assets (e.g. images, fonts) in themes and components
- استخدم المحدد
#site-text-logoفي كود CSS الخاص بك.
- استخدم المحدد
نحن في حالة احتفال على 
