QR-код адреса статьи


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


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

Порядок создания банера аналогичный описанному в статье Снег на сайт для 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

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


Из всех способов сетевой коммуникации мы предпочитаем работу по электронной почте. Это позволяет отслеживать все этапы деловой переписки.
Пишите нам по адресу mail@tcse-cms.com

Мы в социальных сетях

Твиттер: twitter.com/tcsecms
Фейсбук: facebook.com/pages/TCSE-cms
Вконтакте: vk.com/public34349369


Вернуться назад