анимация

Настройте его, добавив анимацию наведения курсора мыши к кнопкам действий в сообщениях на вашем форуме. Приведенный ниже код является дополнительным для вашей темы, которую вы активно используете.добавьте и сохраните в шаблоне extra.less: /*Наведите курсор мыши на кнопки действий в...

.userBannerLight,.userBanner--staff { display: inline-block; text-align: center; font-weight: 500; color: #fff; width: 100%; border: none; position: relative; overflow: hidden } .userBannerLight.admin,.userBanner--staff.admin { background...

Добавьте следующее в свой шаблон extra.less для создания светящейся рамки вокруг редактора Forala, когда фокус находится на нём, а пользователи печатают. /* GLOWING EDITOR */ @-webkit-keyframes glow { to { border-color: #626262; -webkit-box-shadow: 0 0 4px #626262...

Добавляем код в extra.less: .stats-container:hover { background-color: var(--color-ebebeb); } .stats-container { display: flex; align-items: center; justify-content: space-around; background: var(--color-white); border-radius: 10px; padding: 6px 8px; margin: 0 auto; width...

Найдите следующий код в шаблоне page_container используемой темы: <a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register" data-xf-click="overlay" data-follow-redirects="on"> Вставьте следующий HTML-код чуть ниже: <span></span>...

Добавьте следующий код в шаблон вашей активно используемой темы extra.less: @keyframes xgtbell { 0% { transform: rotate(0); } 10% { transform: rotate(30deg); } 20% { transform: rotate(0); } 80% { transform: rotate(0); } 90% {...

Добавьте анимированное уведомление о новой теме в свои категории форума. Добавьте следующие коды extra.lessв шаблон темы, которую вы используете. .node.node--forum.node--unread .node-title a:after, .node.node--link.node--unread .node-title a:after, .node.node--page.node--unread .node-title...

Добавить эффект свечения к логотипу с увеличением и уменьшением масштаба. .p-header-logo { overflow: hidden; position: relative; animation: zoom-in-out 2s ease-out infinite; } .p-header-logo img { position: relative; } .p-header-logo:before { position: absolute; top...