Новогодний стикер с Сантой
Продолжаем украшать сайт, добавляя тематические вставки.
В этот раз через раздел управление рекламой добавим на сайт виджет/стикер с Сантой.
Порядок создания банера аналогичный описанному в статье Снег на сайт для 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
Демо-версия доступна на странице Портфолио
Перезагрузка страницы портфолио выдает по очереди или Санту или Оленя.
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
Скрипт падающего снега на сайте
Скрипт падающего снега обычно используют перед новым годом Собственно все элементарно! В тело html страницы вставляем Ява-скрипт и на сайте уже падает снег. Но я предлагаю более изящное решения для... читать далее
Снег на сайте для DLE
Очередная реализация снежинок для сайта - создаем новогоднее настроение средствами JS. Вывод снежинок организуем через раздел админки "управление рекламой", тем более, что весь код помещается внутри... читать далее
Падающий снег на сайт с помощью jQuery
Еще один способ сделать падающие снежинки на сайт в канун Нового года. В этот раз помог сайт my-dle.ru на котором и был обнаружен данный скрипт Для работы скрипта необходима библиотека Jquery... читать далее
Версия сайта для слабовидящих - как сделать для DLE
Если вам приходилось разрабатывать сайт для государственных учреждений РФ, то вы уже должны знать о требовании к специализированной версии сайта для слабовидящих. Скрипт "версии для слабовидящих"... читать далее
Снег на сайте - Jquery плагин
Наиболее современный способ реализации падающего снега на вашем сайте, работающем на движке DLE. Все, что требуется - распаковать архив из новости, загрузить папку со скриптами в шаблон сайта и... читать далее
Как сделать падающий снег на сайте (вариант 2)
Для всех тех, кто хочет видеть на своем сайте пдающий снег, но кому не подошел вариант описанный в новости "скрипт падающего снега для ДЛЕ" предлагаю к рассмотрению второй вариант. Он не требует... читать далее
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru html HTML html5 javascript JavaScript js layout react seo SEO на Хабрахабре vue Блог компании RUVDS.com Веб-дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт блог браузеры верстка вёрстка дайджест интернет-магазин информационный ресурс корпоративный сайт модуль мы рекомендуем портфолио разработка ссылки фронтенд
Реклама на сайте Студия создания и продвижения сайтов hover.com.ua . печать буклетов www.mospechat.com/polygrafiya/pechat-bukletov . принтеры cab цена у нас на сайте