Новогодний стикер с Сантой
Продолжаем украшать сайт, добавляя тематические вставки.
В этот раз через раздел управление рекламой добавим на сайт виджет/стикер с Сантой.
Порядок создания банера аналогичный описанному в статье Снег на сайт для 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>Несколько пояснения по коду:
class="visible-lg"
Указывает фреймворку bootstrap 3 что блок со стикером будет отображаться только если ширина экрана браузера более 1200px.
width: 200px;
Ширина стикера. Если он слшком большой для вас - просто укажите размер по меньше.
z-index: 5000;
Значение отвечающие за наложение стикера поверх основного контента сайта.
Так как в DLE модальные/диалоговые окна находятся в пределах z-index: 1050, и у bootstrap 3 примерно там же, то значение в 5000 гарантирует полное перекрытие.
top: 30%;
Картинка Санты будет в 30% сверху от высоты окна браузера.
left: 1px;
Картинка будет на расстоянии 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
Демо-версия доступна на странице Портфолио
Перезагрузка страницы портфолио выдает по очереди или Санту или Оленя.