クリスマスデコレーションと同様に、ハロウィンのデコレーションを紹介するトピックです。
不気味な幽霊
デフォルトでは、コンポーザーを開いた際に10分の1の確率でこの幽霊が表示されます。
- 以下の画像をテーマまたはコンポーネントにアップロードし、変数名をghostに設定してください：
出典
-
テーマまたはコンポーネントの
\u003c/head\u003eタブに以下のJavaScriptを追加してください：
rarity変数の値を増減させることで、幽霊が表示される頻度を調整できます。\u003cscript type="text/discourse-plugin" version="1.4.0"\u003e const appEvents = api.container.lookup("service:app-events"); appEvents.on('composer:opened', () =\u003e { let rarity = 10 // 幽霊はコンポーザーを開いた際に [rarity の値] 分の 1 の確率で表示されます 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); } }); \u003c/script\u003e -
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); \u0026.ghost-show { transform: translate(-50%, -60%) scale(.6); opacity: 0; } } @media all and (min-width: 1024px) { #halloween-ghost { transform: translate(-50%, -50%) scale(.75); \u0026.ghost-show { transform: translate(-50%, -60%) scale(.9); } } }
モバイル端末では、仮想キーボードが表示された際に幽霊が「ジャンプ」してしまいます。
クモの巣
クモの巣は画面が小さい場合は非表示になります。
フォーラムに追加する方法：
-
新しいテーマコンポーネントを作成するか、既存のテーマを編集し、以下の画像をアップロードして変数名をspiderwebに設定してください：
出典 -
テーマまたはコンポーネントに以下のCSSを追加してください：
@media all and (min-width: 1300px) { #main { \u0026:before, \u0026: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; } \u0026:after { right: 0; transform: scaleX(-1); } } }
イモリ選択器のドクロアイコン
メッセージコンポーザー内のスマイリーアイコンをドクロ💀に置き換える、さりげない変更です。
-
svg icon subset設定に
skullを追加してください：
-
テーマまたはテーマコンポーネントの
\u003c/head\u003eタブでアイコンを置き換えてください：\u003cscript type="text/discourse-plugin" version="0.8.23"\u003e api.replaceIcon('far-smile', 'skull'); \u003c/script\u003e
これにより、管理パネルなど他の場所のスマイリーアイコンも置き換えられてしまいますが、ハロウィンですからね、仕方ありませんよね？
ジャック・オー・ランタン
サイトの右下に置かれる、シンプルで静止した彫刻されたカボチャです：
-
新しいテーマコンポーネントを作成するか、既存のテーマを編集し、以下の画像をアップロードして変数名をpumpkinに設定してください：
出典 -
テーマまたはコンポーネントに以下のCSSを追加してください：
body { background: transparent url($pumpkin) bottom right no-repeat; background-size: 10%; } @media all and (min-width: 1024px) { body { background-size: 7%; } }
これは既に\u003cbody\u003eに背景画像を使用しているフォーラムとは互換性がありません。
不気味なロゴ
ロゴが単なるテキストまたはシンプルなテキスト画像の場合、フォントをよりハロウィンらしいものに置き換えることができます。
→ 
使用フォント: Creepster
- ロゴが画像の場合、画像を編集してフォントを変更してください。
- ロゴが実際のテキストの場合、以下のチュートリアルに従ってロゴで使用されるフォントを変更してください：Include assets (e.g. images, fonts) in themes and components
- CSSではセレクタ
#site-text-logoを使用してください。
- CSSではセレクタ
