Аналогично рождественским украшениям, создаем тему для обмена хэллоуинскими украшениями.
Пугающий призрак
По умолчанию призрак появляется с шансом 1 из 10 при открытии редактора сообщений.
- Загрузите следующее изображение в вашу тему/компонент и задайте имя переменной как ghost:
Источник
-
Добавьте этот JavaScript в раздел
</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 icon subset:
-
Замените иконку на вкладке
</head>вашей темы/компонента темы:<script type="text/discourse-plugin" version="0.8.23"> api.replaceIcon('far-smile', 'skull'); </script>
Это также заменяет иконку смайлика в других местах, например, в панели администратора. Но ведь сегодня Хэллоуин, верно?
Тыква-фонарь
Простая статичная резная тыква, расположенная в правом нижнем углу вашего сайта:
-
Создайте новый компонент темы или отредактируйте существующую тему, загрузите это изображение и задайте имя переменной как 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.
- Используйте селектор
Мы празднуем на 
