Новогодний footer

Версия XenForo

Дисклеймер! Заморачиваться и делать по уму лень.
Не ну а что, другим можно, а мне не?

Делается через модификацию шаблона.

Включаем режим разработчика и идём сюда /admin.php?template-modifications/
Создаём новую модификацию, если нету кнопки добавить значит не включили режим разработчика.

Шаблон: PAGE_CONTAINER
Ключ модификации: любой на свой выбор
Описание: любое на своё выбор (можно не указывать)

Тип поиска: Регулярное выражение

Найти:

Код:

(</div>\s*</footer>)

Заменить:

Код:

<div id="rec264524117" class="r t-rec" style=" " data-animationappear="off" data-record-type="970" >
    <div class="t970 t970_santa ">
        <input class="t970__widget-input" type="checkbox" id="ny-widget-checkbox">
            <label for="ny-widget-checkbox" class="t970__widget"></label>
            <div class="t970__message-wrapper">
                <div class="t970__message-arrow_before" style="background-color: #ffffff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);"></div>
                <div class="t970__message-arrow_after" style="background-color: #ffffff;"></div>
                <div class="t970__message" style="background-color: #ffffff; border-radius: 5px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);">
                    <p class="t970__message-txt t-text t-text_sm" style="color:#000000;" field="text">
                        С наступающим Новым годом! Желаем расти, развиваться и создавать классные проекты. Пусть в 2026 году все сбудется!
                    </p>
                    <button class="t970__btn-close"> <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 1L1 16" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M16 16L1 1" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </button>
                </div>
            </div>
    </div>
</div>
<div id="rec264524117" class="r t-rec" style=" " data-animationappear="off" data-record-type="970" >
    <div class="t970 t970_santa ">
        <input class="t970__widget-input" type="checkbox" id="ny-widget-checkbox">
            <label for="ny-widget-checkbox" class="t970__widget"></label>
            <div class="t970__message-wrapper">
                <div class="t970__message-arrow_before" style="background-color: #ffffff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);"></div>
                <div class="t970__message-arrow_after" style="background-color: #ffffff;"></div>
                <div class="t970__message" style="background-color: #ffffff; border-radius: 5px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);">
                    <p class="t970__message-txt t-text t-text_sm" style="color:#000000;" field="text">
                        С наступающим Новым годом! Желаем расти, развиваться и создавать классные проекты. Пусть в 2026 году все сбудется!
                    </p>
                    <button class="t970__btn-close"> <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 1L1 16" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M16 16L1 1" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </button>
                </div>
            </div>
    </div>
</div>
<script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js"></script>
<script src="https://static.tildacdn.com/js/tilda-animation-1.0.min.js" charset="utf-8" async></script>
<script src="https://ws.tildacdn.com/project2454/tilda-blocks-2.7.js?t=1642674012"></script>
<script type="text/javascript">
    $(document).ready(function () {
        setTimeout(function () {
            t970_init('264524117');
        }, 500);
    });
</script>
<div id="rec264524909" class="r t-rec" style=" " data-animationappear="off" data-record-type="969"><!-- T969 -->
    <div class="t969"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            setTimeout(function () {
                t969_init('264524909');
            }, 500);
        });
    </script>
</div>

Далее в экстру пихаем CSS. Вообще можно и сразу в модификацию через <xf:css>, делайте как хотите крч, я делаю через экстру.

extra.less:

    .t969 {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        z-index: 500;
        display: block;
        pointer-events: none;
        background-image: url(https://static.tildacdn.com/tild3434-3132-4465-b765-663662356637/boughs.png);
        background-repeat: repeat-x;
        background-repeat-y: no-repeat;
        background-position: bottom;
        background-size: contain;
    }
    .t970_santa .t970__widget {
        background-image: url(https://static.tildacdn.com/tild6430-6261-4566-b833-396330613231/santa1.png);
        background-position-x: left;
        background-position-y: bottom;
        background-size: contain;
        background-repeat: no-repeat;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 220px;
    }
    .t970__widget {
        position: fixed;
        z-index: 1;
        cursor: pointer;
    }
    .t970__widget-input {
        display: none;
    }
    .t970_santa .t970__widget-input:checked+.t970__widget, .t970_preview.t970_santa .t970__widget {
        background-image: url(https://static.tildacdn.com/tild6465-6532-4637-b230-666235383665/santa2.png);
        background-position-x: left;
        background-position-y: bottom;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .t970__widget-input:checked~.t970__message-wrapper, .t970__message-wrapper_active {
        opacity: 1;
        transform: translateY(0);
        z-index: auto;
        pointer-events: auto;
    }
    .t970__message-wrapper {
        position: fixed;
        bottom: 40px;
        left: 137px;
        max-width: 350px;
        min-width: 200px;
        margin-right: 30px;
        opacity: 0;
        z-index: -1;
        transform: translateY(100%);
        transition: all ease .3s;
        box-sizing: border-box;
        pointer-events: none;
    }
    .t970__message-arrow_before, .t970__message-arrow_after {
        position: absolute;
        left: -13px;
        bottom: 45px;
        height: 30px;
        width: 30px;
        background: inherit;
        box-sizing: border-box;
        transform: skewX(45deg);
        box-shadow: inherit;
        z-index: -1;
        border-top: inherit;
        border-left: inherit;
    }
    .t970__message-arrow_after {
        box-shadow: none;
        z-index: 3;
    }
    .t970__message {
        padding: 21px 65px 20px 30px;
        display: block;
        box-sizing: border-box;
    }
    .t970__message-txt {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        max-height: 50vh;
        overflow-y: auto;
        margin: 0 0 1.5em;
        color: #fff;
    }
    .t-text_sm {
        font-size: 20px;
        line-height: 1.55;
    }
    .t970__btn-close {
        position: absolute;
        top: 21px;
        right: 20px;
        background: transparent;
        border: none;
        padding: 0;
        outline: none;
        cursor: pointer;
    }
    .t970_santa .t970__message::after {
        background-image: url(https://static.tildacdn.com/tild6161-3462-4132-b333-303439613330/branch1.png);
        background-position-x: right;
        background-position-y: bottom;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .t970__message::after {
        content: '';
        display: block;
        position: absolute;
        right: -25px;
        bottom: -25px;
        width: 277px;
        height: 173px;
        max-height: 100%;
        max-width: 300px;
        pointer-events: none;
        z-index: 4;
    }

При нажатии дед начинает говорить

Реакции: Bogina257, Sergo_1615, HugoPeak и 4 других

Поиск

Welcome!

Новогодний footer 01

Другие ресурсы пользователя KeoFox

Поделиться ресурсом