Новогодний стикер с Сантой

Продолжаем украшать сайт, добавляя тематические вставки.
В этот раз через раздел управление рекламой добавим на сайт виджет/стикер с Сантой.

Порядок создания банера аналогичный описанному в статье Снег на сайт для DLE



Готовый код для банера

<div id="ny_dedmoroz" class="visible-lg">
     <img src="https://tcse-cms.com/uploads/dedmoroz.png" class="img-responsive">
</div>

<style type="text/css">
    #ny_dedmoroz {
        position: fixed;
        top: 30%;
        left: 1px;
        display: block;
        width: 200px;
        z-index: 5000;
    }
</style>

Сам тег банера {banner_newyear_santa} тоже вставляем в шаблон main.tpl перед

</body>

Несколько пояснения по коду:

Указывает фреймворку bootstrap 3 что блок со стикером будет отображаться только если ширина экрана браузера более 1200px.


Ширина стикера. Если он слшком большой для вас - просто укажите размер по меньше.


Значение отвечающие за наложение стикера поверх основного контента сайта.
Так как в DLE модальные/диалоговые окна находятся в пределах z-index: 1050, и у bootstrap 3 примерно там же, то значение в 5000 гарантирует полное перекрытие.


Картинка Санты будет в 30% сверху от высоты окна браузера.


Картинка будет на расстоянии 1px от левого края окна браузера.

Если хотите красивый стикер разместить с правой стороны окна, то код стоит поменять на

div id="ny_olen">
	<img src="https://tcse-cms.com/uploads/olen.png" class="img-responsive">
</div>

<style type="text/css">
    #ny_olen {
        position: fixed;
        top: 30%;
        right: 1px;
        display: block;
        width: 125px;
        z-index: 5000;
    }
</style>

тут уже используется другая картинка с Оленем.



Вывод обоих вариантов адаптирован для фреймворка bootstrap 3 и тестировался на DLE 13.1

Демо-версия доступна на странице Портфолио
Перезагрузка страницы портфолио выдает по очереди или Санту или Оленя.